介绍一些HTML标签

2018-10-03 本文已影响0人饥人谷_王捷

随意打开一个网页，查看它的源码，就能看到很多常用的标签。关于标签的使用，非常重要的一点是语义化，就是说尽量不要使用无关的标签，这个部分要表达什么，就是用什么样的标签。以下以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>标签的顺序可以打乱，但在浏览器中，只要写了在三个标签，就会用特定的顺序显示。

介绍一些HTML标签

下面介绍一些常用的html标签。

一些稍微复杂的标签。

猜你喜欢

热点阅读