一、什么事标签语义化?
你设计的页面还是一对的div堆积的吗?如果你还在沉浸在div包围的设计风格中,那么你就是不合格的前端工程师。标签语义化,让你的页面在机器的世界里不再陌生。html的标签都是有各自特定的意义的,同时也是为了更好的开发和更加规范。
二、标签语义化的作用?
1、让你的手机更加完美的展示你的网页
2、让搜索引擎更好地搜索到你的作品
3、让你的开发和维护更加方便,提高你的效率
4、让盲人更好地阅读你的网页,阅读器根据标签语义自动解析,呈现更容易、更好的阅读
5、。。。
三、HTML标签语义总结
既然标签语义化如此重要,那么从现在开始,规范化你的代码风格,语义化你的标签吧!以下是对html标签的一个汇总。
HTML标记一览,后有详解
标记 | 译名或意义 | 作 用 |
文件标记 | ||
<HTML> | 文件声明 | 让浏览器知道这是 HTML 文件 |
<HEAD> | 开头 | 提供文件整体资讯 |
<TITLE> | 标题 | 定义文件标题,将显示于浏览顶端 |
<BODY> | 本文 | 设计文件格式及内文所在 |
排版标记 | ||
<!--注解--> | 说明标记 | 为文件加上说明,但不被显示 |
<P> | 段落标记 | 为字、画、表格等之间留一空白行 |
<BR> | 换行标记 | 令字、画、表格等显示于下一行 |
<HR> | 水平线 | 插入一条水平线 |
<CENTER> | 居中 | 令字、画、表格等显示于中间 |
<PRE> | 预设格式 | 令文件按照原始码的排列方式显示 |
<DIV> | 区隔标记 | 设定字、画、表格等的摆放位置 |
<NOBR> | 不折行 | 令文字不因太长而绕行 |
<WBR> | 建议折行 | 预设折行部位 |
字体标记 | ||
<STRONG> | 加重语气 | 产生字体加粗 Bold 的效果 |
<B> | 粗体标记 | 产生字体加粗的效果 |
<EM> | 强调标记 | 字体出现斜体效果 |
<I> | 斜体标记 | 字体出现斜体效果 |
<TT> | 打字字体 | Courier字体,字母宽度相同 |
<U> | 加上底线 | 加上底线 |
<H1> | 一级标题标记 | 变粗变大加宽,程度与级数反比 |
<H2> | 二级标题标记 | 将字体变粗变大加宽 |
<H3> | 三级标题标记 | 将字体变粗变大加宽 |
<H4> | 四级标题标记 | 将字体变粗变大加宽 |
<H5> | 五级标题标记 | 将字体变粗变大加宽 |
<H6> | 六级标题标记 | 将字体变粗变大加宽 |
<FONT> | 字形标记 | 设定字形、大小、颜色 |
<BASEFONT> | 基准字形标记 | 设定所有字形、大小、颜色 |
<BIG> | 字体加大 | 令字体稍为加大 |
<SMALL> | 字体缩细 | 令字体稍为缩细 |
<STRIKE> | 画线删除 | 为字体加一删除线 |
<CODE> | 程式码 | 字体稍为加宽如<TT> |
<KBD> | 键盘字 | 字体稍为加宽,单一空白 |
<SAMP> | 范例 | 字体稍为加宽如<TT> |
<VAR> | 变数 | 斜体效果 |
<CITE> | 传记引述 | 斜体效果 |
<BLOCKQUOTE> | 引述文字区块 | 缩排字体 |
<DFN> | 述语定义 | 斜体效果 |
<ADDRESS> | 地址标记 | 斜体效果 |
<SUB> | 下标字 | 下标字 |
<SUP> | 上标字 | 指数(平方、立方等) |
清单标记 | ||
<OL> | 顺序清单 | 清单项目将以数字、字母顺序排列 |
<UL> | 无序清单 | 清单项目将以圆点排列 |
<LI> | 清单项目 | 每一标记标示一项清单项目 |
<MENU> | 选单清单 | 清单项目将以圆点排列,如<UL> |
<DIR> | 目录清单 | 清单项目将以圆点排列,如<UL> |
<DL> | 定义清单 | 清单分两层出现 |
<DT> | 定义条目 | 标示该项定义的标题 |
<DD> | 定义内容 | 标示定义内容 |
表格标记 | ||
<TABLE> | 表格标记 | 设定该表格的各项参数 |
<CAPTION> | 表格标题 | 做成一打通列以填入表格标题 |
<TR> | 表格列 | 设定该表格的列 |
<TD> | 表格栏 | 设定该表格的栏 |
<TH> | 表格标头 | 相等于<TD>,但其内之字体会变粗 |
表单标记 | ||
<FORM> | 表单标记 | 决定单一表单的运作模式 |
<TEXTAREA> | 文字区块 | 提供文字方盒以输入较大量文字 |
<INPUT> | 输入标记 | 决定输入形式 |
<SELECT> | 选择标记 | 建立 pop-up 卷动清单 |
<OPTION> | 选项 | 每一标记标示一个选项 |
图形标记 | ||
<IMG> | 图形标记 | 用以插入图形及设定图形属性 |
连结标记 | ||
<A> | 连结标记 | 加入连结 |
<BASE> | 基准标记 | 可将相对 URL 转绝对及指定连结目标 |
框架标记 | ||
<FRAMESET> | 框架设定 | 设定框架 |
<FRAME> | 框窗设定 | 设定框窗 |
<IFRAME> | 页内框架 | 于网页中间插入框架 |
<NOFRAMES> | 不支援框架 | 设定当浏览器不支援框架时的提示 |
影像地图 | ||
<MAP> | 影像地图名称 | 设定影像地图名称 |
<AREA> | 连结区域 | 设定各连结区域 |
多媒体 | ||
<BGSOUND> | 背景声音 | 于背景播放声音或音乐 |
<EMBED> | 多媒体 | 加入声音、音乐或影像 |
其他标记 | ||
<MARQUEE> | 走动文字 | 令文字左右走动 |
<BLINK> | 闪烁文字 | 闪烁文字 |
<ISINDEX> | 页内寻找器 | 可输入关键字寻找于该一页 |
<META> | 开头定义 | 让浏览器知道这是 HTML 文件 |
<LINK> | 关系定义 | 定义该文件与其他 URL 的关系 |
StyleSheet | ||
<STYLE> | 样式表 | 控制网页版面 |
<span> | 自订标记 | 独立使用或与样式表同用 |
其中常常被div替用的标签如下,要在以后的书写中注意:
1、<Hx>
<h1>、<h2>、<h4>、<h5>、<h6>,标题标签,且重要性依次递减。<h1>为最大标题。
如:<h1>大标题</h1>
<h2>次标题</h2>
2、<p>
段落标签,尽量少用<br/>来换行。
3、<ul>、<ol>、<li>
<ul>无序列表,<ol>有序列表,其用法如下:
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
4、<dl>、<dt>、<dd>
dl 就是“定义列表”。
5、<cite>、<q>、<blockquote>
<q>来标记简短的单行引用。
6、<em>、<strong>
em是用作强调的,strong是用作重点强调的。
<p><em>强调</em> 的文本通常用斜体显示,
然而, <strong>特别强调</strong> 的文本通常以粗体显示。</p>
7、<table>、<td>、<th>、< caption >、 summary
summary为摘要,<th>为表哥标题,<caption>为首部说明
8、<dfn>
9、<ins>,<del>
知道del,就不要再用<s>做删除线了,用del显然更具有语义化。
10、<code>
11、<abbr>、<acronym>
12、alt属性和title属性