标签之标题
标题介绍与应用
标题（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" 默认居左
标签之段落、换行、水平线
标签之段落
段落是通过 <p> 标签定义的
<p>这是一个段落 </p>
<p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>
<br /> 元素是一个空的 HTML 元素。
<p>这个<br>段落<br>演示了分行的效果</p>
水平线
<hr/> 标签在 HTML 页面中创建水平线
<hr color="" width="" size="" align=""/>
属性：
1 color：设置水平线的颜色
2 width：设置水平线的长度
3 size：设置水平线的高度
4 align：设置水平线的对齐方式（默认居中），可取值left|right
标签之图片
网站中最多的元素
网站中最多的元素毋庸置疑，一定是图片<img> 标签定义 HTML 页面中的图像
<img src="" alt="" title="" width="" height="">
注意事项
<img>是单标签，不需要进行闭合操作
属性：
1 src：路径（图片地址与名字）
2 alt：规定图像的替代文本
3 width：规定图像的宽度
4 height：规定图像的高度
5 title：鼠标悬停在图片上给予提示
路径详解
绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">
相对路径
两者相对关系，两者在同⼀路径下可以直接访问
1 ⼦级关系: /
2 ⽗级关系: ../
3 同级关系: ./
网络路径
具体的⽹络地址:
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>
标签之超文本链接
超链接描述
HTML使用标签 <a> 来设置超文本链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
超链接属性
在标签 <a> 中使用了 href 属性来描述链接的地址默认情况下，链接将以，以下形式出现在浏览器中：
1 一个未访问过的链接显示为蓝色字体并带有下划线。
2 访问过的链接显示为紫色并带有下划线。
3 点击链接时，链接显示为红色并带有下划线。
特别提示
后期我们会通过CSS样式修改掉这些效果
<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>
超链接之锚点
超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
跳转到当前文档的某个部分的形式就是 “锚点”
锚点实现方式
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>
标签之文本
常用文本标签
特别提示
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇
练习
<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>
列表标签之有序列表
有序列表
有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>尚学堂</li>
<li>百战程序员</li>
</ol>
type属性
<ol> 的属性type 拥有的选项
1 1 表示列表项目用数字标号（1,2,3...）
2 a 表示列表项目用小写字母标号（a,b,c...）
3 A 表示列表项目用大写字母标号（A,B,C...）
4 i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5 I 表示列表项目用大写罗马数字标号（I,II,III...）
有序列表嵌套
列表是可以进行嵌套的
<ol>
<li>尚学堂</li>
<li>
<ol>
<li>阿里</li>
<li>京东</li>
</ol>
</li>
<li>百战程序员</li>
</ol>
列表标签之无序列表
无序列表实现
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。
<ul>
<li>尚学堂</li>
<li>百战程序员</li>
</ul>
type属性
<ul> 的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示
无序列表嵌套
列表是可以进行嵌套的
<ul>
<li>尚学堂</li>
<li>
<ul>
<li>阿里</li>
<li>京东</li>
</ul>
</li>
<li>百战程序员</li>
</ul>
常见应用场景
1 无序的列表效果
2 导航效果
导航效果
<ul>
<li>Xiaomi手机</li>
<li>Redmi 红米</li>
<li>电视</li>
<li>笔记本</li>
</ul>
快捷键
快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）
练习
<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>
快捷键
快速生成上述结构：ul>li>a[href=#]
列表标签之自定义列表
自定义列表实现
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>尚学堂</dt>
<dd>百战程序员</dd>
<dt>京东</dt>
<dd>阿里</dd>
</dl>
应用场景
在一些需要对列表进行解释的部分，可以使用自定义列表
标签之表格
表格展示效果
表格在数据展示方面非常简单，并且表现优秀
表格组成与特点
行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签
表格： <table>
行： <tr>
单元格(列)： <td>
<table>
<tr>
<td>尚学堂</td>
<td>百战程序员</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>
快捷键
快速生成表格结构：table>tr*2>td{单元格}
表格其他标签
表格名字： <caption>
表格头部： <thead>
特殊单元格： <th>
表格的身体： <tbody>
表格的脚步： <tfoot>
复杂且并不常用的表格标签
<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>
表格属性详解
<table> 表格属性
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
align：设置表格的水平对齐方式
cellpadding：设置内容距离边框的距离
cellspacing：设置单元格之间的距离
bgcolor：设置表格背景颜色
bordercolor：设置边框颜色
background：设置背景图片
<tr> 的属性
height：设置一行的高度
bgcolor：设置一行的背景颜色
background：设置一行的背景图片
align：设置行里内容水平对齐方式，取值：left、center、right
valign：设置行里内容垂直对齐方式，取值：top、middle、bottom
<td> 的属性
width：设置单元格的宽度，同列等宽
height：设置单元格的高度，同行等高
align：设置单元格内容水平对齐方式
valign：设置单元格内容垂直对齐方式
bgcolor：设置单元格背景颜色
background：设置单元格背景图片
表格单元格合并
单元格合并属性
水平合并：colspan
垂直合并：rowspan
<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>
表格实操
合并单元格
<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>
2955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
