随意打开一个网页，查看它的源码，就能看到很多常用的标签。关于标签的使用，非常重要的一点是语义化，就是说尽量不要使用无关的标签，这个部分要表达什么，就是用什么样的标签。以下以html5为例讲解一些常用标签。
-
<!DOCTYPE HTML>告诉浏览器文档类型，此标签放在文档的最上面。 -
<html lang="en">是文档的根元素，包含<head>, <body>标签。 -
<head>中主要包含页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。其中主要的标签有<meta>, <title>, <link>, <script>等。 - 而我们所看到的所有信息都包含在
<body>标签内。
下面介绍一些常用的html标签。
-
<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>分别代表了页面的头部信息， 导航栏， 主要内容， 文章， 主要的逻辑块， 次要的逻辑块， 尾部。像<header>, <footer>等标签也可以在<main>, <article>, <section>等中使用，并没有严格的规定。重要的是其中的逻辑意义。 -
<div>, <span>这两个标签主要用于块级逻辑分区和内联逻辑分区。通常与class="xxx" id="xxx"属性一同使用，代表了它们要表达的内容。 - 其他的常用标签还有
<blockquote>表示块级层面的引用内容，<q>表示内联的短引用。<h1~6>表示标题，<p>表示段落，<br>表示换行，因为html文档会默认的将多余的空格和换行去掉。<ul>表示无序列表，<ol>表示有序列表，无论哪种列表形式，都必须与<li>表示共同使用。其他常用标签可参考这里。
一些稍微复杂的标签。
-
<iframe>此标签用于在先有页面中嵌套一个页面，在现代前端编程中已较少使用，也并非所有网站都可以嵌套在内。
以下写法可将<iframe>标签与<a>标签配合使用。当<a>中的target属性与<iframe>中的name属性相同时，点击链接即可在嵌套页面中显示内容。
<iframe name="xxx" src="#" frameborder=0>xxx</iframe>
<a target="xxx" href="http://xxx">xxx</a>
另外介绍一些target属性的值
-
_blank在新窗口打开页面。 -
_self在本身打开。 -
_parent在上一级页面打开。 -
_top在顶级页面打开。
后面三种当页面中嵌套的页面内又嵌套了一个页面时，效果明显。
关于<a>标签中的href属性，如果不写使用的协议，可能会出现意想不到的错误。另外file:///协议是不准使用的。当href="#'时，点击链接只会实现页面内的跳转，并不会发出一个请求。当href=""时，点击链接会刷新当前页面。如果需要让链接点击时不发生任何跳转，可使用伪协议href="javascript:;，此时点击链接，会执行其中的javascript代码，代码为空即表示不会发生任何事情。
<form>标签需与含有type="sbumit"属性的标签一同使用，如果没有，则无法提交表单。当<button> a button </button>标签中不包含type属性时，默认的属性值就为submit。
<form action="http://xxx" method="POST">
<label><input type="submit" value="提交"></label>
<label><input type="checkbox" name="多选" value="1"> 1 </label>
<label><input type="checkbox" name="多选" value="2"> 2 </label>
<label><input type="radio" name="单选" value="3"> 3 </label>
<label><input type="radio" name="单选" value="4"> 4 </label>
<select name="选项菜单" multiple>
<option value="5"> 5 </option>
<option value="6" disabled > 6 </option>
<option value="7" selected > 7 </option>
</select>
<textarea name="多行文本" cols="50" rows="30">输入意见</textarea>
</form>
在<form>标签中也可使用target属性，其规则和<a>标签一致。无论是多选还是单选，其一组的name属性值必须相同。<select>标签中，multiple属性时可选的，如果添加此属性，按住ctrl键即可实现多选。<option>标签中，disable属性表示此项不可选，selected属性表示了表达加载时的默认选项，此属性亦可用于多选及单选框。关于<textarea>标签中的cols、rows属性只是代表了默认的输入框大小，用户仍可用鼠标调整期大小，如果你不希望用户这样做（可能会破坏页面的布局），可使用css来限制，在css中输入textarea { resize: none; }即可。
其他关于<input>标签中type属性的值可查看这里
最后简单介绍一下<table>标签。
<table border=1>
<colgroup>
<col width=100>
<col width=200>
<col width=80>
</colgroup>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>底部1</td>
<td>底部2</td>
<td>底部3</td>
</tr>
</tfoot>
</table>
<colgroup>标签可控制每列的宽度。<thead>, <tbody>, <tfoot>标签的顺序可以打乱，但在浏览器中，只要写了在三个标签，就会用特定的顺序显示。
网友评论