常见标签

• h1~h6

标题

---

• p

段落,大段文字

---

• a

链接,链到一个地址

<a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com</a>
<a href="#">饥人谷.com</a>
<a href="#about">饥人谷.com</a>
<a href="/getCourse">饥人谷.com</a>

• href:必备属性

• target:如果没有target或者target="_self",直接在当前页面刷新跳转;
  target="_blank"则在新窗口打开页面
• title:鼠标悬停在链接上时展示的文字,相当于指路
• href="#about":跳转到id为"about"的内容上,起定位的作用

---

• img

展示一张图片

![](a.png)```

>- alt属性:如果图片无法显示,展示alt属性的文字内容;
    优点:
     1. 方便视觉障碍患者;
     2. 对搜索引擎友好
- 自闭和标签




- div
>语义为“块”，用于给页面划分区块，让结构更清晰

<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
<div class="text">...</div>

id/class:标签,用于个体化设置
     id:一个元素
    class:一类元素

---
- ui li
>ul: unsort list 无序列表
 用于表示并列的内容
ul的直接子元素是li
可以嵌套

<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>联系</li>
<li>地址</li>
</ul>
</li>
</ul>

---
- ol li
>ol: order list 有序序列表 用于表示带步骤或者编号的并列内容 
ol的直接子元素只能是li, 可以嵌套

<h2>把大象关到冰箱的步骤</h2>
<ol>
<li>把大象变小</li>
<li>打开冰箱</li>
<li>把大象塞进去</li>
</ol>

---
- dl dt dd
>用于展示一系列 “标题:内容... ”的场景

<dl>
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>

---
- strong em span
>strong:重点强调
em:强调
span:可添加id,个性化设置

---
- iframe
>用于嵌入一个页面 注意跨域操作问题

<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>

target="mypage":在frame里面展示页面

---
- table
>用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框

<table>
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>

<table>
<tr>
<th>姓名</th>
<th>年纪</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>