HTML一些基础整理

一、语义化

通俗理解，就是明白每个标签的用途（在什么情况下使用此标签合理）

比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

语义化的好处：

1.更容易被搜索引擎收录

2.更容易让屏幕阅读器读出网页内容

<span>、<div>标签是没有语义的，它们的作用就是为了设置单独的样式用的。

<span>和<div>的区别：

<span>是行内元素，<div>是块级元素。所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。即：<span>这里的文本显示不会发生变化</span><div>这里的文本会另起一行显示</div>。借用一张图说明：

其中，行内元素也可以换行显示，块级元素也可以不换行显示，这里要通过css样式显式设定，如图中例2。

二、一些不常用的标签或属性整理

<q>引用别人的话</q>--效果："引用别人的话"。<q>标签重在展现语义，即：引用别人的话，而不是展现样式（双引号）

<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>（长文本引用）--效果：显示出缩进样式

<hr/>：添加水平横线

<address>在这里填写地址信息</address>--效果：表示地址的文本变为斜体，区分于其他文本，更直观

<code>在文本中添加一行代码</code>--效果：代码部分的字体会区分于其他文本，更直观(如果是多行代码，可以使用<pre>标签，可以规范代码格式)

<caption>表格的标题</caption>(写在<table>下，<tr>上)--效果：在表格的正上方，居中显示出标题。

<tablesummary="本表格记录了2012年到2013年的库存记录">--效果：不在浏览器中显示，summary为摘要，作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

<a href="http://www.m1905.com/mdb/star/3316/"target="_blank">托比·马奎尔</a>--效果：链接到新的标签页

关于通过<a>标签发邮件--mailto属性：

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

下面是一个完整的实例：

<img title="某某某的照片" src="www.baidu.com"/>--效果：鼠标滑过图片时显示的文本

<textarea rows="5" cols="8">这是一个文本域(写在这里的文本，旨在提示用户输入什么，用户输入时，可以被用户删掉)</textarea>--效果：生成一个可以输入5行8列文本的文本域

注：rows、cols两个属性，可以用css样式的width(cols)、height(rows)代替

<select multiple="multiple"><option value="1">第一个option</option><option value="2">第二个option</option><option value="3">第三个option</option></select>

设置multiple属性，可以实现option的多选（选择时，ctrl+鼠标单击）

<input type="radio" value="0" name="sex"/>男<input type="radio" value="1" name="sex"/>女

设置radio单选时，同组的name一定要相同，否则只是图标样式为radio，依然可以多选

（type="checkbox"时，name要不同，才可以复选）

<input type="reset" value="重置">--效果：显示按钮，名称为：重置，可实现重置功能

<label>：没有显示效果，用于与某标签绑定

例如：

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" />  <label for="email">输入你的邮箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>

这里label的作用是：如果用户用鼠标点击的不是radio，而是"男"或"女"，也就是点击的是文字时，则它对应的radio也会被选中。如果没有label，当用户点击文字时，radio不会被选中。