常见标签
- 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
展示一张图片
```
>- 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>
