700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > HTML的语义化 你需要深入了解

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

时间:2018-12-08 12:22:17

相关推荐

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

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

HTML,XHTML的区别:

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

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

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

div和span

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

语义化

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

图片语义化:

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

表格语义化:

表单语义化:

label标签,它的for属性为所关联表单元素的id。for有两个作用:绑定label和表单;增强鼠标可用性,即点击文本,表单元素也可获得焦点。fieldset和legend,fieldset给表单进行分组,legend用于某一组表单的标题;

1 <!DOCTYPE html> 2 <html> 3<head> 4 <meta charset="utf-8" /> 5 <title>html</title> 6</head> 7<body> 8 <form action="" method="post"> 9 <fieldset>10 <legend>登陆系统</legend>11 <p>12 <label for="name">账号:</label><input type="text" id="name" name="name" />13 </p>14 <p>15 <label for="pwd">密码:</label><input type="password" id="name" name="name" />16 </p>17 <input type="checkbox" id="remenber" name="remenber" /><label for="remenber">记住我</label>18 <input type="submit" value="登陆" />19 </fieldset>20 </form>21</body>22 </html>

其效果显示:

相对也是比较好看的。

用多了自然也就熟悉了~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。