HTML 标签的使用

一.常用布局标签

id 版 (id 权重太大不利于样式复用，不常用)

<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>

常用的 class 版（class 比 id 权重小更有利于样式复用，用的更多）

<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

语义化不惧标签（直接根据单词语义直接当做标签）

<header>header 头部</header>
<main>main 主体</main>
<footer>footer 页尾</footer>

二.链接，图片与内联框架标签

<a></a>标签是链接元素，用于链接跳转，可以跳转的站外，站内，或者指定窗口打开
<img>标签表示图片，用于引入图片元素，单标签是可替换元素
<iframe></iframe>标签，可以在当前页面在嵌入一个窗口打开网页

跳转到站外
<a href="https://taobao.com">taobao.com</a>

站内跳转（使用锚点/书签来实现 id 通过绑定属性，实现站内跳转）

<a href="#hello">去底部</a>
<h2 id="hello" style="margin-top: 1000px">底部</h2>
<a href="#">回到顶部</a>

跳转到指定窗口（通过 a + iframe 标签连用实现站内窗口打开链接）

<a href="https://taobao.com" target="taobao">淘宝</a>
<iframe src="https://taobao.com" frameborder="0" name="taobao"</iframe>

图片跳转到网页（通过 img + a 标签连用，用于网页上点击图片跳转网页）
<a href="https://taobao.com"><img src="moxing.jpg" alt="moxing" /></a>

三.列表与导航

1. 列表

1.1 有序列表（有序列表极少用，如果要用都是请求无序列表+ css代替）

输入：

<h3>数学成绩单</h3>
<ol>
<li>小明142</li>
<li>小红121</li>
<li>小兰105</li>
</ol>

输出：

1.2 无序列表

输入：

<h3>文具购买</h3>
<ul>
<li>教材1+1一本</li>
<li>作业本2本</li>
<li>水性笔2支</li>
</ul>

输出：

1.3 自定义列表

输入：

<dl>
<dt>地址：</dt>
<dd>四川省合江县桂花树村</dd>
<dt>邮箱：</dt>
<dd>2958852435@.qq.coms</dd>
</dl>

输出：

2.导航

2.1. 导航可以用 ul + li + a 来实现

输入：

<ul class="menu">
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">教学视频</a></li>
<li class="item"><a href="">社区问答</a></li>
<li class="item"><a href="">资源下载</a></li>
<li class="item"><a href="">关于我们</a></li>
</ul>

输出：

2.2. 还可以用 Nav + a 来实现也是一样的

输入：

<nav class="menu">
<a href="">首页</a>
<a href="">教学视频</a>
<a href="">社区问答</a>
<a href="">资源下载</a>
<a href="">关于我们</a>
</nav>

输出：

四.表格与布局

表格合并

表格由：table（表格标签） + caption（表格标题） + thead（表头） + tbody（表格主体） + tfoot(表尾)
tr（表格行标签） + td（单元格元素） (表格中的所有数据必须在单元格 td 的元素中必须写到 tr 中)
合并操作一定是发生在单元格上 td 元素，合并属性colspan，rowspan，一定写到被合并的起始单元格上

输入：

<table>
<caption>表格合并</caption>
<thead align="center">
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td bgcolor="red" colspan="2">表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td bgcolor="violet" rowspan="2">表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
</thead>
<tfoot align="center">
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
</tfoot>
</table>

输出：

五.扩展练习

狗狗体检报告

输入：

<table width="500" border="1">
    <caption>
      狗狗体检表
    </caption>
    <thead align="center">
      <tr>
        <td>姓名</td>
        <td width="80"></td>
        <td>性别</td>
        <td></td>
        <td colspan="2" rowspan="4"><img src="dog.jpg" alt="" /></td>
      </tr>
      <tr>
        <td>种类</td>
        <td></td>
        <td>出生年月</td>
        <td width="80"></td>
      </tr>
      <tr>
        <td>健康状况</td>
        <td></td>
        <td>爱好</td>
        <td></td>
      </tr>
      <tr>
        <td>身高</td>
        <td></td>
        <td>体重</td>
        <td></td>
      </tr>
    </thead>
    <tfoot align="center">
      <tr>
        <td rowspan="2">备注:</td>
        <td colspan="5"></td>
      </tr>
    </tfoot>
  </table>

输出：

HTML 链接，列表与表格标签