HTML基础知识总结

 

1、HTML页结构说明

 

(1)、 所有内容都在标签之内；内放的是头部信息，是对页面的描述，不会直接显示在页面中，

(2)、内的只能放在中，是页面的主体，大部分显示内容都定义在这里.

(3)、所有页面都应该至少包含这些部分，由于浏览器容错性强，所以即使不包含也能正常显示，但是最好还是写全.

 

2、HTML和XML的联系、区别

 

(1)、 属性值：HTML中属性值既可以用单引号括起来、也可以用双引号括起来、甚至不用引号都可以(不推荐)，单双要配对.

(2)、注释：HTML使用和XML一样的来做注释.

(3)、特殊字符：HTML中<、>是有特殊含义的、空格是不会被显示的，所以需要特殊符号，相当于C#中的'\n'转义符.<(小于号，less than); >(大于号，greater than);  (空格，no-break space).

(4)、格式标签：创建段落；
回车,也可以写成
,在HTML中有一些标签可以不关闭，
就是一个，这是和XML不同的地方，但是为了遵循XHTML规范，推荐像XML一样严格关闭.

 

3、超链接深入

 

相对URL：相对URL表示相对于当前文档的资源

• "/"表示网站根目录
• "../"表示父目录
• "../../表示父目录的父目录
• "./"或者不写任何斜线表示相对于当前路径的目录

站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响.

例如：

<a href="a.html"><img src="a.jpg"/></a>

<img src="../images/csharp.jpg"/>

<img src="http://images.cnblogs.com/csharp.jpg"/>

 

4、图片

 

 (1)、如果网页上要显示小图(比如缩略图)，不要仅仅是把大图设定一下width、height来缩小，因为仍然会下载大图，会使得加载速度很慢.

 (2)、如果要用小图，可以用PS改变图片的大小.缩略图显示小图文件，大图显示大图文件.

 

5、表格

 

 注意：子标签默认继承父标签的属性，如果自己单独定义了一个属性，则会覆盖父标签的属性.

 例如：

 <table border="1">

   <tr align="center"><td align="left">姓名</td></tr>

 </table>

 上面姓名在表格中居左显示.

 

6、表单

 

 (1)、radio：相同name属性的为一组，不同radio设定不同的value值，这样通过取指定的name的值就可以知道谁被选中了，不用单独判断.

 (2)、file：使用file，则form的enctype必须设置为multipart/form-data、method属性为post 

 (3)、image：使用src属性指定图片的地址，用来实现美化的“按钮”

 

  7、<select>标签

 

(1)、用来创建类似于WinForm中的ComboBox或者ListBox

 

(2)、如果size属性大于1就是ListBox(size的值为显示出来的列表数量)，否则就是ComboBox.<select multiple>或者<select multiple="multiple">(推荐),那么就是可以多选的ListBox.

 (3)、select中的项是<option>，例如：<option>北京</option>

(4)、如何实现“不选择”，添加一个<option value="-1">--不选择--</option>,然后编程判断select选中的值，如果是-1就认为是不选择.

(5)、select分组选项,可以使用optgroup对数据进行分组,分组本身不会被选择，无论对于下拉列表还是列表框都适用

例如：

<select size="6" name="country">

<optgroup label="Africa">

 <option value="gan">Ganbia</option>

 <option value="mad">Madagascar</option>

 <option value="nam">Namibia</option>

</optgroup>

<optgroup label="中国">

 <option value="sd">山东</option>

 <option value="bj">北京</option>

 <option value="yn">云南</option>

</optgroup>

</select>

 

8、

 

当用户点击文本框前的文字时，文本框获得焦点

例如：

<label for="name">姓名：</label><input type="text" id="name"/>

<label for="ma">婚否</label><input type="checkbox" id="ma"/>

 

9、fieldset

 

实现GroupBox效果，将控件划分一个区域.

例如:

 <fieldset>

 <legend>常用</legend>

 姓名：<input type="text">

 性别：<input type="text">

<fieldset/>