黑马程序员-我的入学笔记7-HTML的初次了解
2013-09-26 20:03
441 查看
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a
href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流! ----------------------
HTML是对网页长什么样子的一个描述,也就是“这里显示一个超链接、那里显示一个按钮”都是通过HTML来进行描述的。更加官方的定义是超文本标记语言,即HTML(Hypertext
Markup Language),是用于描述网页文档的一种标记语言。入学的基础视频中只讲到静态页面的格式,关于网页上控件按钮等实现并没有进一步的讲解到.css(Cascading
Style Sheet)层叠样式表,通常又称为风格样式表是视频中重点讲到的方法,我感觉特别的实用.
不过我觉得我们开发最重要的学习地方是要实现“点击【计算】按钮的时候让表格放大显示”这样的动态效果,则要通过程序操作Dom,一般使用JavaScript这种脚本语言来操作Dom。这的基础视频只是让我们先熟悉服务端网页的制作。就视频中的案例,简单的实现一下如下
简单用户登录界面,表格,及css样式选择器,只是初步的了解,css的样式选择还有很多
href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流! ----------------------
HTML是对网页长什么样子的一个描述,也就是“这里显示一个超链接、那里显示一个按钮”都是通过HTML来进行描述的。更加官方的定义是超文本标记语言,即HTML(Hypertext
Markup Language),是用于描述网页文档的一种标记语言。入学的基础视频中只讲到静态页面的格式,关于网页上控件按钮等实现并没有进一步的讲解到.css(Cascading
Style Sheet)层叠样式表,通常又称为风格样式表是视频中重点讲到的方法,我感觉特别的实用.
不过我觉得我们开发最重要的学习地方是要实现“点击【计算】按钮的时候让表格放大显示”这样的动态效果,则要通过程序操作Dom,一般使用JavaScript这种脚本语言来操作Dom。这的基础视频只是让我们先熟悉服务端网页的制作。就视频中的案例,简单的实现一下如下
简单用户登录界面,表格,及css样式选择器,只是初步的了解,css的样式选择还有很多
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>用户登录界面</title> </head> <body> <table ><!--tr行td列及风格和文本框,密码框,验证码,登录按钮,记住密码等的实现--> <tr><td >用户名</td><td class="style1"><input type="text"/></td></tr> <tr><td >密码</td><td class="style1"><input type="password"/></td></tr> <tr><td >验证码</td><td class="style3"><input type="text" /></td><td> <img src="images/验证码.png" alt="验证码"/></td></tr> <tr><td ><input id="jizhu" type="checkbox"/><label for="jizhu">记住密码</label></td> <td ><input type="button" value="登录"/></td></tr> </table> </body> </html>
<!--一个表格--><table border=1> <tr><td><font color="red"/>姓名</td><td>年<font color="red"/>龄</td> <td>性别</td></tr> <tr><td><a href="">tom</td><td>22</td> <td>男</td></tr> <tr align="right"><td>jerry</td><td align="left">21</td> <td>女</td></tr> <tr><td align="right">lucy</td><td>22</td> <td>女</td></tr> </table>
<ul><li>灌水区</li><li>原创区</li><li>技术区</li></ul><!--ul,li的用法-->
<form action="一个动态页面"><!--表单中input的控件--> <input type="text" title="控件" value="帅哥" maxlength="6" readonly="readonly"/><!--通过input显示什么样的内容--> <input type="checkbox" checked="checked"/> <input type="button" value="我的按钮" style="width: 81px"/> <input type="submit" value="提交一下下"/><br/> <input type="file"/>密码框<!--关于file的属性用于指示是否提交给服务器,以后再做深入--> <input type="password"/> <input type="hidden"/> <input type="radio" name="1"/><input type="radio" name="1" /><input type="radio" name="1"/> <input type="reset" /> <input type="image" src="images/按钮.png"/>图片<!--按钮的路径以后再深入--> <input type="button"/><!--按钮的实现在通过写代码实现功能--> </form>
<head> <title>关于css选择器</title> <style type="text/css"> input{background-color:Red;border-color:Green;}<!--标签选择器 --> p{color:Blue;} .style4 <!--class选择器--> { height: 31px; } #usename<!--id选择器--> { background-color:Blue; } </style> </head> <body><input type="text" style="background-color:Red;border-color:Blue;"/></body><!--样式选择-->
相关文章推荐
- 黑马程序员-我的入学笔记6-winform的初次了解
- 黑马程序员-我的入学笔记8-多线程的初次了解
- 黑马程序员-我的入学笔记10-List类的初次了解
- 黑马程序员 —入学笔记《基础知识1》
- 黑马程序员之HTML学习笔记:有关css和js针对不同浏览器兼容的问题
- 黑马程序员-我的入学笔记1-关于C#.net基础
- 黑马程序员—C语言笔记—了解Mac的基本使用和C语言基础语法
- 黑马程序员 HTML笔记总结
- 黑马程序员之HTML学习笔记:把数据放在表格中
- 黑马程序员 笔记(一)——html基础
- 黑马程序员之HTML学习笔记:什么是浏览器?
- 黑马程序员 - 学习笔记8 接口的初步了解
- 黑马程序员--HTML笔记
- 黑马程序员--入学笔记《基础知识2》
- 黑马程序员-HTML学习笔记
- “黑马程序员”正则表达式+html+css笔记
- RxAndroid 学习笔记(一) 初次了解
- HTML CSS简单了解笔记
- 黑马程序员-我的入学笔记3-飞行棋小程序
- 黑马程序员_学习笔记4——html标签和表单标签