前端学习——关于语义化标签的一些思考
来源:互联网 发布:python win32api 编辑:程序博客网 时间:2024/06/06 08:44
转自:http://ife.baidu.com/note/detail/id/486
关于语义化标签的一些思考
现在html越来越提倡语义化,这样不仅方便开发者更好地理解文档,也使得计算机对于文档地理解更加地友好。比如人工智能的语义分析,搜索引擎的搜索分析,辅助视力阅读障碍者的屏幕阅读器之类的软件,在语义化标签的帮助下,能够更好的工作。
文档结构
在学习html5的过程中,知道了一些新的标签,能够更清晰的表达文档的结构(原来都是用div,可能加上id或者class来划分)。举个简单的例子
- html
- head
- body
- header (包含网站的标题,或者logo,SLOGEN之类的)
- nav (导航栏)
- main (文档的主要内容,不包含侧边栏、导航栏、版权信息,网站logo等附属信息)
- article (文档中可以脱离其他部分,独立出来而又完整,甚至可以复用的一部分,通常有自己的标题,当article内嵌article时,里外层的内容应该是相关的,比如一篇微博和它的评论)
- section (文档中一段主题性内容,通常也有自己的标题,跟article的区别在于他是整体的一部分或者说文章的一节)
- aside (侧边栏或者嵌入内容,通常认为是独立拆分出来而不受整体影响的一部分,作为主要内容的附属信息,如索引,词条列表,或者页面及站点的附属信息,如广告,作者资料介绍等)
- footer (页脚,通常包含作者、版权信息或者相关链接等)
- head
html元素的语义化及排版注意
一些常用的html元素,特别是html文本元素的语义化使用中,也有一些可以优化及需要注意的地方
<strong>
和<b>
,<em>
和<i>
,其效果差不多是一样的,但是前者的语义化更加友好- 白色空间折叠:当浏览器遇到两个或者两个以上的白色空间元素(空格,换行)时,会折叠成一个空格。自己编码时注意换行应该用
<br>
。 - 文档中的一些嵌入式内容,比如引用的图片,插图,表格,代码段等,可以作为独立的单元,当这部分转移到附录中或者其他页面时不会影响到主体,这样的元素都可以放在
<figure>
元素内,而且可以搭配其子元素<figcaption>
作很好的元素说明或者备注信息 - img元素最好附带alt信息,即对图片进行文本说明,当图像无法查看时会显示这段文本描述
- table元素现在也有更好的语义化结构元素
- caption 表格的标题
- thead 适合放表格的表头行
- tbody 表格的主体部分
- tfoot 表格的脚注部分
- form表单元素,
- label标签,为input元素定义标注,改进了表单控件的可用性,当你点击到label标签时,会自动聚焦到对应控件上,label标签一般有两种用法
- label的for属性与控件的id对应,比如
<label for="username"> 请输入用户名: <input type="text" id="username" name="username"></label>
- label内嵌控件,比如
<label>请输入用户名<input type="text" id="username" name="username"></label>
- label的for属性与控件的id对应,比如
- placeholder属性,其值会在输入字段为空时显示,并会在字段获得焦点时消失
- 对于表单中的单选radio控件和复选checkbox控件甚至下拉框select控件,可以为某项添加checked属性让其默认选中
- label标签,为input元素定义标注,改进了表单控件的可用性,当你点击到label标签时,会自动聚焦到对应控件上,label标签一般有两种用法
以上,是这次任务一中可能用到的一些信息,可能有纰漏或者错误的地方,还请大家多多指正!
参考资料:《HTML&CSS设计与构建网站》
0 0
- 前端学习——关于语义化标签的一些思考
- 关于邮箱前端架构的一些思考
- 关于语义化标签
- 关于语义化标签
- 学习笔记——关于size_t的一些思考
- 关于学习的一些思考
- 关于学习的一些思考
- 关于学习的一些思考
- 关于学习的一些思考
- 关于学习的一些思考
- 关于产品的一些思考——(四十)腾讯微信之修改备注和标签
- 关于web语义化的一些感悟
- 关于html标签语义化
- 关于“箭头——>“的一些思考
- 语义化标签应注意的一些问题
- html5中新增的一些语义化标签
- 关于闭包的一些学习思考
- 关于英语学习的一些思考
- dubbo 简单搭建流程
- Hive复合数据类型array,map,struct的使用
- 重温JavaSE之方法的声明和使用(三)
- EL表达式整数被当作字符串处理
- Tomcat启动报错[org.apache.struts2.dispatcher.Dispatcher]Dispatcher initialization failed
- 前端学习——关于语义化标签的一些思考
- ubuntu下 tensorflow 升级到 新版本 0.11.0版本
- 数论初步
- 算法笔记_061-蓝桥杯练习 字串统计(Java)
- CS231n Assignment1--Q5
- 函数的封装
- Python定时执行任务
- Largest Divisible Subset
- Android常用shape指南