HTML的语义化,你需要深入了解

有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可。然而,这种要求,对于后期的维护与测试,真的是。。。。。。想起日前我们所做的这个项目,那里面的jsp代码,感觉有些看不下去,各种标签混杂一起,而且经常使用的是无实义的比如div,看起来真是头疼!所以,此番我做一个总结,方便日后做项目时,知道该如何规范好自己的代码,做到严谨。

HTML,XHTML的区别:

HTML,HyperText Mark-up Language,是构成网页文档的主要语言。指的是html4,不过html5已经很火了。

XHTML,EXtensible HyperText Mark-up Language,较于html,它更加严格。

  • XHTML标签必须闭合;
  • XHTML标签及属性必须小写;
  • XHTML标签属性必须用引号;
  • XHTML id属性代替name属性;

div和span

  1. div是块元素,包含行内元素,不与其他的元素同行;span是行内元素,可与其他元素同行;
  2. div大结构的划分;span应用样式;

语义化

所谓语义化,就是将标签的语义理解,放在它应该在的位置。

图片语义化:

figure和figcaption:figure元素用于图片和图注,figcaption用于图注的文字;

表格语义化:

标签 说明
table 表格
caption 标题
thead 表头
tbody 表身
tfoot 表尾
tr
th 表头单元格
td 表格单元格

表单语义化:

  • label标签,它的for属性为所关联表单元素的id。for有两个作用:绑定label和表单;增强鼠标可用性,即点击文本,表单元素也可获得焦点。
  • fieldset和legend,fieldset给表单进行分组,legend用于某一组表单的标题;
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html</title>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>登陆系统</legend>
<p>
<label for="name">账号:</label><input type="text" id="name" name="name" />
</p>
<p>
<label for="pwd">密码:</label><input type="password" id="name" name="name" />
</p>
<input type="checkbox" id="remenber" name="remenber" /><label for="remenber">记住我</label>
<input type="submit" value="登陆" />
</fieldset>
</form>
</body>
</html>

其效果显示:

HTML的语义化,你需要深入了解

相对也是比较好看的。

用多了自然也就熟悉了~

上一篇:【Qt编程】设计ColorBar颜色栏


下一篇:Egret的项目结构