HTML结构 语义化思想
总体思想:用正确的标签做正确的事情!
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
主要体现:
1. 对用户而言,更好的用户体验,例如:在没有样式CCS或图片的情况下也以一种文档格式显示;title、alt用于解释名词或解释图片信息、label标签的活用。
2. 对机器而言,更利于机器识别,更利于SEO,搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。
3. 对开发而言,更利于团队开发和维护,使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解,
编写HTML代码应该注意什么?
1. 尽可能少的使用无语义的标签div和span;
2. 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3. 不要使用纯样式标签和规范不支持的标签,如:b、font、u、center,strike,menu等,改用css设置。
4. 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
5. 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
6. 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
7. 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
8. 不要省略某些标签的属性,<img>标签的alt属性的作用是当图片不能正常显示的时候的替换文字,<a>标签的title属性可作为说明信息,并且当鼠标hover时显示为提示信息。
雅虎一道面试题:
<P> 哥写的不是HTML,是寂寞。<br><br> 我说:<br>不要迷恋哥,哥只是一个传说
其中存在的问题:
1. html与xhtml标准的区别,xhtml有严谨的结构,标签必须关闭,单标签最后需要添加/来关闭,并且标签都必须小写;
2. 结构和样式的分离,不应该使用<br/>来控制样式,合理设计结构,换行的段落需要为每个段落都添加p,样式需要利用css实现;
3. 合理利用标签,注重标签语义化,缩略可以用<abbr>标注,“我”可以用<cite>标注,引用的说话内容可以用<q>标记;
//代码参考如下
<p>哥写的不是<abbr title="Hypertext Markup Language">HTML</abbr>,是寂寞。</p>
<p><cite>我</cite>说:<q>不要迷恋哥,哥只是一个传说</q></p>
HTML结构 语义化思想的更多相关文章
- 前端面试题-HTML结构语义化
一.HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签.用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML ...
- THML结构语义化之table/form
以table/form标签语义化,做为博客首贴 应用场景1-table表格 <table> <caption> <thead> <th colspan=&qu ...
- 浅谈web语义化
在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...
- 语义化HTML
一.怎样语义化html结构 语义化是指用合理HTML标签以及其特有的属性去格式化文档内容. 正确语义化----结构(html)才是重点,样式(css)是用来修饰结构的.所以要先确定html,确定标签, ...
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 语义化的html结构的好处
HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- [html] HTML结构的语义化
原文链接:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是html语义化 选择合适的html标签,便于开发者阅读和写出更优雅的代码的同时 ...
- 你如何理解HTML结构的语义化?
去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- HTML5学习笔记(三):语义化和新增结构元素
在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...
随机推荐
- hadoop之hive集合数据类型
除了string,boolean,date等基本数据类型之外,hive还支持三种高级数据类型: 1.ARRAY ARRAY类型是由一系列相同数据类型的元素组成,这些元素可以通过下标来访问.比如有一个A ...
- play框架之模板
现在网站发展日新月异,网页上显示的东西越来越复杂,看看HTML源码就知道,这东西不是正常人能拼出来的.因此模板应运而生,自我感觉,好的模板应该支持一下功能: 1.支持HTML代码段的复用,即在HTML ...
- Netty源码分析--NIO(一)
好久没写博客了,最近打算花些时间把Netty的源码好好读一读,下面是本人在学习的过程中的一些笔记,不能确保自己思考的完全是正确的,如果有错误,欢迎大家指正. 由于本人的语文功底烂的很,通篇使用大白话来 ...
- 不一样的go语言-玩转语法之二
本文继续玩转语法,是为之二. I/O(Input/Output),输入输出是计算机最为突出的特点,也可以说是计算机最为核心的功能.没有I/O,计算机就是一堆废铜废铁.从最低层的电子元器件开始, ...
- 不用 qlv 格式转换成 mp4 - 优雅的下载腾讯视频(mp4 格式)
不用 qlv 格式转换成 mp4 - 优雅的下载腾讯视频(mp4 格式) 问题描述: 朋友说离线腾讯视频是 qlv 格式的,只能使用腾讯视频软件打开.让我帮忙想想办法,能不能将 qlv 格式转换成 m ...
- HBase —— 单机环境搭建
一.安装前置条件说明 1.1 JDK版本说明 HBase 需要依赖JDK环境,同时HBase 2.0+ 以上版本不再支持JDK 1.7 ,需要安装JDK 1.8+ .JDK 安装方式见本仓库: Lin ...
- fis3前端工程构建配置入门教程
一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于 ...
- Codeforces 730J:Bottles(背包dp)
http://codeforces.com/problemset/problem/730/J 题意:有n个瓶子,每个瓶子有一个当前里面的水量,还有一个瓶子容量,问要把所有的当前水量放到尽量少的瓶子里至 ...
- HttpUtility.UrlEncode讲解
hello 大家好,今天讲讲HttpUtility.UrlEncode编码 HttpUtility.UrlEncode方法有4个重载分别如下 我们有这么一个字符串 string str = " ...
- 用jQuery做定位元素,做自动化测试你尝试过吗
一.前言 元素定位可以说是学自动化测试中必会技能之一,也可以说是通往自动化之路的开门钥匙. 就元素定位方法,除了我们常用并熟知的8种元素定位方法之外,还有一种定位方法可以说是一种特殊的存在,那就是JQ ...