超级会员免费看
本文详细介绍了HTML5中的标题标签、段落、换行、水平线、图片、超文本链接、列表、表格等基本元素的使用方法，包括VSCode插件辅助开发、路径详解、锚点实现和表格的属性与单元格合并。通过实例和学习效果反馈，帮助读者从入门到深化，掌握网页基本元素的运用。
目录
标签之标题
标题介绍与应用
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题 <h6> 定义最小的标题<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>生成h1~h6快捷键：h$*6
VSCode插件
快速打开浏览器 扩展 -> 搜索open in browser -> 点击安装
正确使用标题
请确保将 HTML 标题标签只用于标题。
不要仅仅是为了生成粗体或大号的文本而使用标题。
正确使用标题有益于SEO
应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要
的），再其次是 <h3> ，以此类推
标题标签位置摆放
在标签中添加属性： align="left | center | right" 默认居左
学习效果反馈
1. 以下那个是三级标题标签： <h3></h3>
2. 标题标签居中摆放属性使用正确的是: align="center"标签之段落、换行、水平线
标签之段落
段落是通过 <p> 标签定义的
<p>这是一个段落 </p>
<p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使
用 <br>
<br /> 元素是一个空的 HTML 元素。<p>这个<br>段落<br>演示了分行的效果</p>
水平线
<hr/> 标签在 HTML 页面中创建水平线
<hr color="" width="" size="" align=""/>
学习效果反馈
1. 要实现一个文本换行，可以使用以下那个标签： <br>标签
2. 承载段落文本信息使用以下那个标签: <p>标签
标签之图片
网站中最多的元素
网站中最多的元素毋庸置疑，一定是图片
<img> 标签定义 HTML 页面中的图像<img src="" alt="" title="" width="" height="">
属性：
1、src：路径（图片地址与名字）
2、alt：规定图像的替代文本
3、width：规定图像的宽度
4、height：规定图像的高度
5、title：鼠标悬停在图片上给予提示
学习效果反馈
1. <img> 标签中alt属性的作用： 规定图像的替代文本
2. 以下那个不是 <img> 标签的属性： href路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\itCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">
相对路径
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
练习
<div style="text-align: center;">
<img src="./1.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</div>
学习效果反馈
1. 以下那个是相对路径： ../images/1.jpg
2. 以下关于相对路径描述正确的是： 相对路径是两者相对关系，两者在同⼀路径下可以直接访问
标签之超文本链接
超链接描述
HTML使用标签 <a> 来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像， 您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接属性
<a href="url">链接文本</a>
超链接表现
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手
练习
<div style="text-align: center;">
<a href="https://www.mi.com/blackshark4s">
<img src="./1.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
<p>2699元起</p>
</a>
</div>
学习效果反馈
1. 超链接的作用是 跳转到新的文档或者当前文档中的某个部分
2. 超链接中 href 属性的作用 设置超链接的跳转地址
超链接之锚点
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
跳转到当前文档的某个部分的形式就是“锚点”
锚点实现方式
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>学习效果反馈
1. 超链接锚点的作用 跳转到当前页某个位置
标签之文本
常用文本标签
练习
<div style="text-align: center;">
<a href="https://www.mi.com/blackshark4s">
<img src="./1.webp" alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
<p>2699元起 <del>3999元</del></p>
</a>
</div>
学习效果反馈
1. 定义加重语气的标签是哪一个：
<strong>2. 定义着重文字的标签是哪一个：em
列表标签之有序列表
有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。<ol>
<li>小童</li>
<li>童小纯</li>
</ol>
有序列表嵌套
列表是可以进行嵌套的
<ol>
<li>小童</li>
<li>
<ol>
<li>童小纯</li>
<li>菜鸟</li>
</ol>
</li>
<li>童小纯菜鸟</li>
</ol>学习效果反馈
1. 有序列表展示效果以下那个描述是正确的：展示一个有序的列表效果
2. 有序列表的标签组合正确的是：
<ol> + <li>
列表标签之无序列表
无序列表实现
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑 圆圈）进行标记
无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。
<ul>
<li>小童</li>
<li>童小纯</li>
</ul>type属性
无序列表嵌套
列表是可以进行嵌套的
<ul>
<li>小童</li>
<li>
<ul>
<li>阿里</li>
<li>京东</li>
</ul>
</li>
<li>童小纯</li>
</ul>
导航效果
<ul>
<li>Xiaomi手机</li>
<li>Redmi 红米</li>
<li>电视</li>
<li>笔记本</li>
</ul>
练习
<ul>
<li><a href="https://bjsxt.com">小童</a></li>
<li><a href="https://itbaizhan.cn">童小纯</a></li>
<li><a href="https://mi.com">小米</a</li>
<li><a href="https://jd.com">京东</a></li>
</ul>
学习效果反馈
1. 无序列表的type属性以下描述错误的是：triangle 三角形
2. 无序列表的标签组合正确的是：
<ul> + <li>
列表标签之自定义列表
自定义列表实现
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。<dl>
<dt>小童</dt>
<dd>童小纯</dd>
<dt>京东</dt>
<dd>阿里</dd>
</dl>
应用场景
在一些需要对列表进行解释的部分，可以使用自定义列表
学习效果反馈
1. 下列自定义列表标签组合正确的是： dl + dt + dd
2. 以下关于自定义列表描述正确的是：自定义列表不仅仅是一列项目，而是项目及其注释的组合
标签之表格
表格展示效果
表格在数据展示方面非常简单，并且表现优秀
<table border="1">
<tr>
<td>小童</td>
<td>童小纯</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>
复杂且并不常用的表格标签
<table>
<caption>表格名字</caption>
<thead>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>李四</td>
<td>20</td>
</tr>
</tfoot>
</table>学习效果反馈
1. 以下那个是表格组成标签组合：table + tr + td
2. 以下代码，空格处要填写的标签：
<table> ___ <td>小童</td> <td>童小纯</td> ___ </table><tr> </tr>
表格属性详解
学习效果反馈
1. 下列那个是表格居中属性：align
表格单元格合并
单元格合并属性
<table align="center" border="" width="500px" height="200px" cellspacing="0">
<tr>
<td colspan="3">单元格1单元格2单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td rowspan="2">单元格6-11</td>
<td>单元格7</td>
<td rowspan="3">单元格81318</td>
<td colspan="2" rowspan="2">单元格 9101415</td>
</tr>
<tr>
<td>单元格12</td>
</tr>
<tr>
<td>单元格16</td>
<td>单元格17</td>
<td>单元格19</td>
<td>单元格20</td>
</tr>
</table>学习效果反馈
1. 下列那个是单元格垂直合并的属性：rowspan
表格实操
合并单元格
<table border="1" width="500" height="500" align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>表格布局
<table width="800" height="800">
<tr align="center" bgcolor="pink">
<td rowspan="2">酒店</td>
<td>海外酒店</td>
<td>团购</td>
</tr>
<tr align="center" bgcolor="pink">
<td>特价酒店</td>
<td>民宿.客栈</td>
</tr>
<tr align="center" bgcolor="blue">
<td rowspan="2">机票</td>
<td>火车票.抢票</td>
<td>汽车票.船票</td>
</tr>
<tr align="center" bgcolor="blue">
<td>特价机票</td>
<td>专车.租车</td>
</tr>
<tr align="center" bgcolor="green">
<td rowspan="2">旅游</td>
<td>目的地攻略</td>
<td>邮轮旅游</td>
</tr>
<tr align="center" bgcolor="green">
<td>周边游</td>
<td>定制旅行</td>
</tr>
<tr align="center" bgcolor="yellow">
<td>景点玩乐</td>
<td>美食林</td>
<td>购物外汇</td>
</tr>
<tr align="center" bgcolor="yellow">
<td>礼品卡</td>
<td>WIFI电话</td>
<td>保险签证</td>
</tr>
</table>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
