本文将主要梳理html网页布局的基础知识与常用标签以及注意事项，对于软件的选用与课外知识不加涉猎
文章目录
- 一、HTML的基本结构标签
- 二、常用的HTML标签与必要的基本知识点
- 1、基础知识之标签结构说明：
- 2、基础知识之属性特性说明：
- 3、常用标签
- 1.标题标签（h1-h6）
- 2.段落标签（p）
- 3.换行标签（br）
- 4.水平线标签（hr）
- 5.各种文本格式化标签
- 6.图片标签（img）
- 7.媒体标签
- 1.音频标签（audio）
- 2.视频标签（video）
- 8.链接标签（a）
- 9.无语义的布局标签-div和span
- 10.有语义的布局标签-html5标签
- 路径知识点补充：
- 三、列表类型标签
- 1、列表
- 1.无序列表（常用ul-li）
- 2.有序列表（ol-li）
- 3.自定义列表（dl-dt-dd）
- 四、表格类型标签
- 1、基本标签和属性
- 基本标签：
- 基本属性：
- 其他常用标签
- 1.caption（表格大标题）
- 2.th（表头单元格）
- 3.合并单元格（rowspan跨行，colspan跨列）
- 五、表单类型标签
- 1、input类型标签总结
- 2、button按钮标签
- 3、select下拉菜单标签
- 4.文本域标签（textarea）
- 5.label标签
一、HTML的基本结构标签
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>网页标题</title></head><body>网页主体内容</body></html>运行示例：
二、常用的HTML标签与必要的基本知识点
1、基础知识之标签结构说明：
- 标签由<、>、/、英⽂单词或字⺟组成。并且把标签中<>包括起来的英⽂单词或字⺟称为标签名
- 常⻅标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
- 少数标签由⼀部分组成，我们称之为：单标签。⾃成⼀体，⽆法包裹内容。
2、基础知识之属性特性说明：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
3、常用标签
1.标题标签（h1-h6）
<h1>我是1级标题</h1>特点：
1、标签的文字都有加粗
2、标签的文字都有变大，从h1~h6文字逐渐减小
3、每⼀个标题独占一行
2.段落标签（p）
<p>前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。HTML5，Node.js的⼴ 泛应⽤，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>特点：
1、段落之间存在间隙
2、每个段落是独占⼀行
3.换行标签（br）
<p>前端开发跟随移动互联⽹发展带来了⼤量⾼性能的移动终端设备应⽤。<br>HTML5，Node.js 的⼴泛应⽤，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。</p>作用：强制换行
4.水平线标签（hr）
<h1>前端开发</h1><hr>作用：显示出一条分割不同主题的水平线
5.各种文本格式化标签
<!-- ⽂本格式化标签：让⽂本有加粗、下划线、倾斜、删除线⽂本的格式效果 --><!-- 第⼀组 --><b>加粗</b><u>下划线</u><i>倾斜</i><s>删除线</s><br><!-- 第⼆组：推荐使⽤，语义更加强烈 --><strong>加粗</strong><ins>下划线</ins><em>倾斜</em><del>删除线</del>6.图片标签（img）
<imgsrc="cat.gif"alt="这是⼀只摇头猫"title="震惊！⼩猫咪竟然会⼲这种事？">作用：在网页中展示⼀张图片
属性：
1、src：告诉浏览器要显示哪⼀张图⽚
属性值：路径（如果图片和当前页面在同级目录下，此时直接写图片的名字即可）
2、alt：替换文本
当图片加载失败时（如：路径写错了），才显示的文字
3、title：提示文本
当⿏标悬停在图⽚上时，才显示的⽂字
4、width：图片的宽度
5、height：图片的⾼度
注意点：
1、如果只设置图片的宽度或者高度，此时另⼀个会自动等比例缩放
2、如果同时设置了两个，若设置不当此时图片可能会变形
7.媒体标签
1.音频标签（audio）
<audiosrc="./music.mp3"controlsautoplayloop></audio>属性：
1、src：路径
2、controls：播放的控件
3、autoplay：自动播放（部分浏览器不支持）
4、loop：循环播放
2.视频标签（video）
<videosrc="./video.mp4"controlsautoplaymutedloop></video>属性：
1、src：路径
2、controls：播放的控件
3、autoplay：自动播放（部分浏览器不⽀持）——>在谷歌浏览器中写muted可以完成静音的自动播放
4、loop：循环播放
8.链接标签（a）
<ahref="https://www.baidu.com/"target="_blank">点击之后去百度⽹⻚</a><ahref="./15-视频标签.html"target="_blank">点击之后去刚刚书写的视频⽹⻚</a>属性：
1、href：告诉浏览器点击之后跳转去哪⼀个网页
取值：路径
1、外部链接：互联网上的绝对路径
2、内部链接：推荐使用相对路径
2、target：目标网页的打开方式
取值：
1、_self：(默认值) 在当前窗⼝中进行跳转，原网页会被覆盖
2、_blank：在新窗⼝中进行跳转，原网页保留
9.无语义的布局标签-div和span
1.div标签：⼀行只显示⼀个（独占⼀行）
2.span标签：⼀行可以显示多个
10.有语义的布局标签-html5标签
路径知识点补充：
路径分为俩种，一种是相对路径，这也是最常用的，还有一种是绝对路径，这种用到的情况较少
1.相对路径的描述
同级目录：直接写：目标文件名字！
下级目录：直接写：文件夹名/目标文件名字！
上级目录：直接下：…/目标文件名字！
2.绝对路径的描述
就是从根目录一直写道当前的文件D:\day01\images\1.jpg
若是网络的话就是当前的网络链接https://www.baidu.com/2018czgw/images/logo.gif
三、列表类型标签
1、列表
1.无序列表（常用ul-li）
<ul><li><p>我也是⼀个p标签</p></li><li>榴莲</li><li>⾹蕉</li><li>苹果</li><li>哈密⽠</li><li>⽕⻰果</li></ul>ul：表示整个无序列表的主体，用来包含li标签
li：表示无序列表的每一项，用于包含每一行的内容
2.有序列表（ol-li）
<ol><li>⼩姐姐：100分</li><li>⼩帅哥：80分</li><li>⼩可爱：60分</li></ol>ol：表示有序列表的整体
li：表示有序列表的每⼀项
3.自定义列表（dl-dt-dd）
<dlclass="product-spec"><dt>屏幕尺寸</dt><dd>6.7 英寸 OLED 屏</dd><dt>处理器</dt><dd>骁龙 8 Gen3</dd><dt>电池容量</dt><dd>5000mAh（典型值）</dd><dt>充电功率</dt><dd>80W 有线快充</dd><dd>50W 无线快充</dd><!-- 1个dt对应多个dd --></dl>dl：包裹整个定义列表，是父容器；
dt：定义「被解释的术语 / 分类标题」（可多个，对应一个 / 多个 dd）；
dd：定义「对 dt 的解释 / 详情」（默认有左侧缩进，可通过 CSS 重置）；
结构灵活：1 个 dt 可对应多个 dd，或多个 dt 对应 1 个 dd（需符合语义）
四、表格类型标签
适用场景：在网页中以行+列的单元格的方式整齐展示和数据
1、基本标签和属性
基本标签：
标签嵌套关系：table>tr>td
基本属性：
其他常用标签
1.caption（表格大标题）
<tableborder="1"cellspacing=""cellpadding=""><caption>表格大标题</caption><tr><td>Data</td></tr></table>显示效果：在表格整体顶部居中位置显示
注意caption标签是要书写到table标签内部
2.th（表头单元格）
<tableborder="1"cellspacing=""cellpadding=""><tr><th>Header</th></tr><tr><td>Data</td></tr></table>显示效果：表格内部文字加粗并居中显示
3.合并单元格（rowspan跨行，colspan跨列）
<tableborder="1"width="300"height="300"><caption><h3>学⽣成绩单</h3></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>⼩哥哥</td><!-- 保留 --><tdrowspan="2">100分</td><td>⼩哥哥真帅⽓</td></tr><tr><td>⼩姐姐</td><!-- 删除 --><!-- <td>100分</td> --><td>⼩姐姐真漂亮</td></tr><tr><td>总结</td><!-- 保留 --><tdcolspan="2">郎才⼥貌</td><!-- 删除 --><!-- <td>郎才⼥貌</td> --></tr></table>五、表单类型标签
1、input类型标签总结
！！！注意：input标签可以通过type属性值的不同，展示不同效果
<form><!-- 1、⽂本框：text（type属性的默认值） -->昵称：<inputtype="text"placeholder="请输⼊您的昵称"><br><br><!-- 2、密码框：password -->密码：<inputtype="password"placeholder="请输⼊您的密码"><br><br><!-- 3、单选框：radio -->性别：<inputtype="radio"name="sex"checked>男<inputtype="radio"name="sex">⼥<br><br><!-- 4、多选框：checkbox -->爱好：<inputtype="checkbox"checked>敲代码<inputtype="checkbox"checked>熬夜<inputtype="checkbox">掉头发<br><br><!-- 5、⽂件选择：file --><inputtype="file"multiple><br><br><!-- 按钮 --><!-- 1、submit：提交按钮 --><inputtype="submit"><!-- 2、reset：重置按钮 --><inputtype="reset"><!-- 3、button：普通按钮 --><inputtype="button"value="普通按钮"></form>2、button按钮标签
<formaction=""method=""><buttontype="button"></button></form>3、select下拉菜单标签
select标签：下拉菜单的整体
option标签：下拉菜单的每⼀项
！！！注意：selected：下拉菜单的默认选中
<select><optionvalue=""selected>上海</option><optionvalue="">北京</option><optionvalue="">广东</option></select>4.文本域标签（textarea）
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
<textarearows="9"cols="54"></textarea>5.label标签
作用：常用于绑定内容与表单标签的关系
使用方法：
第一种：
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
第二种：
- 直接使用label标签把内容（如：文本）和表单标签⼀起包裹起来
- 需要把label标签的for属性删除即可
)
