HTML标签重点划注

1、粗体：

html

1	<strong>粗体</strong>

2、斜体

html

1	<em>斜体</em>

3、特殊符号：

HTML特殊字符符号大全（查看更多）

4、锚链接

html

<a id="top"></a>
...
<!--点击这个a标签就会回到上面那个a标签-->
<a href="#top"></a>

...
...
<!--点击这个a标签就会回到上面那个HelloWOrld.html那个网页的a标签-->
<a href="HelloWorld.html#top"></a>

5、功能性链接

html

1 2	<!--点击这个a标签就会打开邮箱--> <a href="mailto:1520394133@qq.com"></a>

例子：qq推广链接
https://shang.qq.com/v3/widget.html

html

1
2

<!--qq推广链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

注：51标准型，52简洁型，53扩展型

6、行内元素

html

1
2
3

<a></a>
<strong></strong>
<em></em>

7、块元素

html

<p></p>
<h1></h1>
...
<h6></h6>

8、有序列表

html

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

9、无序列表

html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

10、自定义列表

html

<dl>
  <dt>课程</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
  <dt>老师</dt>
    <dd>王老师</dd>
    <dd>张老师</dd>
    <dd>刘老师</dd>
</dl>

11、表格

html

<table>
  <tr>
    <!--跨列，横地占-->
    <td colspan="4">1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <!--跨行，竖地占-->
    <td rowspan=“2”>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
   </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
   </tr>
</table>

12、视频

html

<!--
controls:控制跳
autoplay:自动播放
-->
<vedio src="" controls autoplay></vedio>
<audio src="" controls autoplay></audio>

13、页面结构分析

14、iframe（内联框架）

html

1
2
3

<iframe src="" name="MyFrame"></iframe>
<!--点击这个a标签可以将a标签中的地址显示到上面这个iframe中-->
<a href="https://www.baidu.com" target="MyFrame"></a>

html

1
2

<!--哔哩哔哩的内联框架，可以试试-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>