常用标签

一、基础标签

1.<html> 文档
2.<body> 主体
3.<h1> to <h6> 标题
4.<P> 段落
5.<br /> 简单换行
6.<hr /> 水平线
7.</!-- ... --/> 注释

二、格式标签

1.<abbr> 定义缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

2.<b> 呈现粗体文本效果。
3.<del>定义被删除文本。
4.<dfn>定义定义项目。不常用
5.<em>把文本定义为强调的内容。
6.<i>显示斜体文本效果。
7.<ins>定义被插入文本。

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

三、表单

1.<form>定义供用户输入的 HTML 表单。
2.<input>定义输入控件。

<form action="/demo/demo_form.asp">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br>
  <br>
  <input type="submit" value="Submit">
</form>

3.<textarea>定义多行的文本输入控件。

<textarea rows="10" cols="20">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>

4.<button>

<!--type:button/reset/submit-->
<button type="button">Click Me!</button>

5.<select>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

QQ20190827-135209.png

6.<optgroup>

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

QQ20190827-135258.png

7.<label>主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

8.<output>定义输出的一些类型。这个在IE中不适用

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>

四、媒体（图像/音频/视频）

1.<img>定义图像。

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

2.<area>

<!--coords:坐标+半径 -->
<area shape="circle" coords="180,139,14" href ="" target ="" alt="Venus" />

3.<audio> 定义声音内容。和video标签一样使用
4.<video>定义视频。

<!--
controls:如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay:如果出现该属性，则视频在就绪后马上播放。
loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。
-->
<video controls="controls" autoplay="autoplay">
  <source src="/i/movie.mp4" type="video/mp4" />
</video>

五、链接

1.<a> 定义一个超链接

<a href="http://www.w3school.com.cn">W3School</a>

2.<link> 定义文档与外部资源的关系。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

六、列表

1.<ul>无序列表。
2.<li>列表的项目。

<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>

3.<dl>定义列表。
4.<dt>定义列表中的项目。
5.<dd>定义列表中项目的描述。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

6.<table> 定义表格
7.<th> 表格中的表头单元格。
8.<tr> 表格中的行。
9.<td> 表格中的单元。
10.<thead> 表格中的表头内容。
11.<tfoot> 表格中的表注内容（脚注）。
12.<tbody>表格中的主体内容。

 <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

七、其他标签

1.<div> 文档中的节
2.<span> 文档中的节
span和div的区别：
div：它是块级元素，独占一行
span：它是行内元素，不会独占一行，它根据内容的多少决定大小
3.<style>

<head>
  <style type="text/css">
    h1 {color: red}
    p {color: blue}
  </style>
</head>

4.<script>

<script type="text/javascript">
  document.write("<h1>Hello World!</h1>")
</script>