常用标签
标题标签
html
<h1>一级标签</h1>
<h2>二级标签</h1>
<h3>三级标签</h1>
<h4>四级标签</h1>
<h5>五级标签</h1>
<h6>六级标签</h1>//注意：无效标签会按照纯文本内容展示在页面上段落标签
html
<p>我好像在哪儿见过你</p>文本标签
html
<!--
知识点:文本标签
span:文本标签
br:换行标签
hr:分割线标签
-->
<span>我好像在哪儿见过你</span>
<br />
<span>我听见了你的声音</span>
<hr />图片标签
html
<!--
知识点:图片标签
img:图片标签
src:图片资源属性
width:宽属性
height:高属性
注意:
100px 表示100像素
30% 表示占页面宽度的百分比
-->
<img src="../img/01.jpg" width="100px" height="120px" />
<br />
<img src="../img/01.jpg" width="30%" />
<br />
<img src="https://b0.bdstatic.com/fb0392d8c9bd8656cca4983f62c39007.jpg@h_1280" width="30%" />无序列表
html
<!--
知识点:无序列表
ul:无序列表
type:列表的类型
circle:空心圆
disc:实心圆
square:实心方块
li:项
-->
<h3>上课注意事项</h3>
<ul type="square">
<li>不能睡觉</li>
<li>不能玩手机</li>
<li>不能打游戏</li>
<li>不能浏览与课程无关的网页</li>
</ul>有序列表
html
<!--
知识点：有序列表
ol：有序列表
type：列表的类型
1-阿拉伯数字
a-小写英文
A-大写英文
i-小写罗马数字
I-大写罗马数字）
li：项
-->
<ol type="I">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ol>定义列表
html
<dl>
<dt>
<h1>薛之谦</h1>
<img src="../img/01.jpg" width="100px" />
</dt>
<dd>
<p>1983年7月17日出生于上海</p>
<p>毕业于格里昂酒店管理学院</p>
<p>华语流行乐男歌手、影视演员、音乐制作人</p>
<p>2005年，因参加选秀节目《我型我秀》而正式出道</p>
<p>2006年6月12日，发行个人首张同名专辑《薛之谦》</p>
<p>随后凭借歌曲《认真的雪》获得广泛关注</p>
</dd>
</dl>
列表案例
html
<!--
注意：HTML标签可以无限层嵌套！！！
-->
<ul>
<li>
<h3>荤菜</h3>
<ol>
<li>回锅肉</li>
<li>鲜椒兔</li>
<li>酸菜鱼</li>
<li>冷锅兔</li>
<li>宫保鸡丁</li>
<li>水煮肉片</li>
</ol>
</li>
<li>
<h3>素菜</h3>
<ol>
<li>家乡豆腐</li>
<li>酸辣土豆丝</li>
<li>土豆丝炒洋芋</li>
<li>西红柿炒番茄</li>
</ol>
</li>
<li>
<h3>汤类</h3>
<ol>
<li>丝瓜汤</li>
<li>皮蛋黄瓜汤</li>
<li>翡翠白玉汤</li>
<li>胡豆瓣酸菜粉丝汤</li>
</ol>
</li>
</ul>
超链接
html
<!--
知识点:超链接
a:超链接
href:链接地址
target:跳转方式
_self:表示在当前页面跳转
_blank:表示新增卡页跳转
-->
<!--跳转到本地页面-->
<a href="08_列表案例.html" target="_blank">跳转到列表案例</a>
<a href="08_列表案例.html" target="_self">跳转到列表案例</a>
<!--跳转到外部页面-->
<a href="http://www.baidu.com">跳转到百度页面</a>
<!--图片超链接-->
<a href="07_定义列表.html">
<img src="../img/01.jpg" width="100px" />
</a>锚链接
html
<!--导航栏-->
<a href="#new01">法治</a>
<a href="#new02">国际</a>
<a href="#new03">娱乐</a>
<a name="new01"></a><!--下锚点-->
<h1>法治新闻</h1>
<h1>法治新闻</h1>
<h1>法治新闻</h1>
<h1>法治新闻</h1>
<a name="new02"></a><!--下锚点-->
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<h1>国际新闻</h1>
<a name="new03"></a><!--下锚点-->
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>
<h1>娱乐新闻</h1>表格
html
<!--
table - 表格
border：设置边框（1表示1像素）
tr - 行
th - 列（居中、加粗）
td - 列（向左对齐）
-->
<table border="1" width="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>13</td>
</tr>
<tr>
<td>小刚</td>
<td>男</td>
<td>13</td>
</tr>
<tr>
<td>小强</td>
<td>男</td>
<td>13</td>
</tr>
<tr>
<td>小凯</td>
<td>男</td>
<td>13</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>13</td>
</tr>
</table>