HTML
web标准
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 |
| 行为 | JavaScript | 网页模型的定义于页面交互 |
HTML骨架结构
html网页整体
hand网页头部
body网页身体
title网页标题
HTML认知
1.注释
vs Code快捷键 Ctrl+/
xxxxxxxxxx<!-- -->2.标签组成和关系
xxxxxxxxxx<strong>文本要变粗</strong>开始标签 包含的内容 结束标签（对应上面的代码）
1 .标签由＜、＞、/、英文单词或字母组成。并且把标签中 ＜＞包括起来的英文单词或字母称为标签名
2 .常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
3 .少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容
HTML标签与标签之间的关系可分为:
＞父子关系（嵌套关系）
＞兄弟关系（并列关系）
3.标题和段落
标题标签
01
xxxxxxxxxx<h2>02</h2><h3>03</h3><h4>04</h4><h5>05</h5><h6>06</h6>
xxxxxxxxxx <h1>01</h1> <h2>02</h2> <h3>03</h3> <h4>04</h4> <h5>05</h5> <h6>06</h6>从上到家逐渐减小
独占一行
段落标签
xxxxxxxxxx<p>我是一段文字</p>换行标签
我是一段文字
我是一段文字
xxxxxxxxxx<p>我是一段文字<br>我是一段文字</p>
水平分割线
xxxxxxxxxx<hr>4.文本格式化标签
| 标签 | 说明 | 标签（增强语义） | 说明 |
|---|---|---|---|
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
加粗
下划线
倾斜
删除线
xxxxxxxxxx <b>加粗</b> <br> <u>下划线</u> <br> <i>倾斜</i> <br> <s>下划线</s> 加粗
下划线
倾斜
删除线
xxxxxxxxxx <strong>加粗</strong> <ins>下划线</ins> <em>倾斜</em> <del>删除线</del>5.图片
图片标签
src="" alt="" 均为标签属性
src属性名
“ ” 属性值
src 目标图片路径
xxxxxxxxxx<img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1662310800&t=3e48446f3f75308b6fb5b40551914825">xxxxxxxxxx<img src="./1.jpg">
alt替换文本
·当图片加载失败时，才会显示alt中的文本
·当图片加载成功时不会显示alt的文本
title 提示文本
当时表悬停时才显示的文本
width和heigth宽度和高度
如果只设置了其中的一个，另一个会自动等比例缩放（图片不会变形）
如果同时设置了两个，如果设置不当图片可能会变形
xxxxxxxxxx<img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1662310800&t=3e48446f3f75308b6fb5b40551914825" alt="加载失败" title="这是一张图片" width="400">xxxxxxxxxx<img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1662310800&t=3e48446f3f75308b6fb5b40551914825" alt="加载失败" title="这是一张图片" height="200">border
设置图像边框粗细
路径
绝对路径：是指目录下的绝对位置（从盘符出发的路径
例：
盘符开头：D:\Web_study\study_1\1.jpg
完整的网络地址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
相对路径（常用）：从当前文件开始寻找目标文件的过程
相对路径的分类：
·同级目录：
方法一：
xxxxxxxxxx<img src="1.jpg">方法二：
xxxxxxxxxx<img src="./1.jpg">·下级目录：目录文件在下级目录中
xxxxxxxxxx<img src="image/2.jpg">文件夹名 / 目标文件名
·上级目录：
../ 返回一级目录，要返回几级就写几个../
xxxxxxxxxx<img src="../3.jpg">如果要再进入别的文件目录，在../后面加上文件夹名即可
6.音频标签
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持 |
| loop | 循环播放 |
7.视频标签
< video > 标签
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放 |
| loop | 循环播放 |
自动播放示例：
xxxxxxxxxx<video src="https://tbm-auth.alicdn.com/0b26fbd0905df861/1647246967182/67d6194e39875849_mp4_351253869718_mp4_264_hd_taobao.mp4?auth_key=1662218819-0-0-0d0b53afee106be67aa6c5bfe001d1ab&t=212bc82c16622161196801206ec649&b=video_plus&p=cloudvideo_http_seller_sucai_vod_publish" controls autoplay muted></video>8.链接
超链接
xxxxxxxxxx<a href="https://www.baidu.com/">百度</a>在开发初期，不知道跳转到那里去，就把href的值写个#，代表空链接
href：跳转地址
写#可以跳转到首页
下载链接：如果href内连接是一个压缩包或者文件，网页则会下载它
可以加入网页元素
锚点链接
target属性，目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
HTML基础
1.列表
无序列表：每一项无顺序之分
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
·列表的每一项前，默认显示圆点标识
ul只允许包含li标签
li可以包含任何内容
xxxxxxxxxx <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
xxxxxxxxxx<ul><li>1</li><li>2</li><li>3</li></ul>
有序列表：每一项又顺序之分
| 标签名 | 说明 |
|---|---|
| ol | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
·列表的每一项之前默认显示序号标识
ol只允许包含li标签
li可以包含任何内容
xxxxxxxxxx <ol> <li>第一名</li> <li>第二名</li> <li>第三名</li> </ol>xxxxxxxxxx<ol><li>第一名</li><li>第二名</li><li>第三名</li></ol>
自定义列表：
在网页底部导航栏常用自定义列表实现
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表针对主题的每一项内容 |
dd会默认显示缩进效果
dl标签中只允许包含dd/dt标签
dd/dt可以包含任何内容
xxxxxxxxxx <dd> <dt>线下门店</dt> <dl><a href="https://www.mi.com/service/mihome/list" target="_black">小米之家</a></dl> <dl><a href="https://www.mi.com/service/sitelist" target="_blank">服务网点</a></dl> <dl><a href="https://www.mi.com/service/family-location" target="_blank">授权体验店/专区</a></dl> </dd>
2.表格
| 标签名 | 说明 |
|---|---|
| table | 表格整体用于包裹多个tr |
| tr | 表格每行用于包裹td |
| td | 表格单元格可用于包裹内容 |
xxxxxxxxxx <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> </table>xxxxxxxxxx<table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>11</td><td>22</td><td>33</td></tr><tr><td>111</td><td>222</td><td>333</td></tr></table>
相关属性设置
常见相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| hejght | 数字 | 表格高度 |
实际开发时推荐使用css设置
表格标题和标题单元格
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格顶部居中位置显示 |
| th | 表头单元格 | 表示一小列标题，通常用于表格第一行，默认内部文字加粗，并居中显示 |
capion在table内部
th在tr标签内部（用于替换td标签）
表格结构标签
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
·表格结构标签内部用于包裹tr标签
·表格结构标签可以省略
合并单元格
将水平或垂直多个单元格合并成一个单元格
·跨行合并
·跨列合并
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元和竖直合并 |
合并单元格的步骤
确定要合并哪几个单元格
通过左上原则确定保留谁删除谁
上下合并只保留最上的删除其他的
左右合并只保留最左的删除其他的
给保留的单元格设施跨行合并或者跨列合并
注意：同一个结构中的单元格才能合并，跨结构不能合并，删除单元格并非系统自动删除需要手动删除需要删除的单元格
border:表格边框宽度
3.表单标签
inpute
单标签
inpute可以通过type的属性不同，展示不同效果
type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| inpute | text | 文本框，用于输入单行文本 |
| inpute | password | 密码框，用书输入密码 |
| inpute | radio | 单选框，用于多选一 |
| inpute | checkbook | 多选框，用于多选多 |
| inpute | file | 文件选择，用于之后上传文件 |
| inpute | submit | 提交按钮，用于提交 |
| inpute | reset | 重置按钮，用于重置 |
| inpute | button | 普通按钮，默认无功能，之后配合js添加功能 |
value：按钮里面显示的字符
type—text属性
| 属性名 | 说明 |
|---|---|
| placeholder | 占位符，提示用户输入内容的文本 |
type-radio属性
| 属性名 | 说明 |
|---|---|
| name | 分组，有相同name属性值的单选框为一组，一组中只能有一个被选中 |
| checked | 默认选中 |
type-file属性
| 属性名 | 说明 |
|---|---|
| multiple | 多个文件选择 |
type-按钮
| 标签名 | type属性值 | 说明 |
|---|---|---|
| inpute | submit | 提交按钮，用于提交 |
| inpute | reset | 重置按钮，用于重置 |
| inpute | button | 普通按钮，默认无功能，之后配合js添加功能 |
如需实现以上按钮功能，需要配合form标签
form使用方法：用form标签把表单标签包裹起来即可
button
button按钮标签
type属性值（同input的按钮系列）
| 标签民 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
谷歌浏览器中button默认是提交按钮
button是双标签，更便于包裹其他内容：文字，图片等
select
select代表下拉菜单的整体
option标签：下拉菜单的每一项
selected默认选中
textarea
在网页中提供输入多行文本的表单控件
常见属性
cols：规定了文本域内的可见宽度
rows：规定了文本域中的可见行数
label
常用于绑定内容和表单之间的关系
使用方法①
·用label标签把内容包裹起来
·在表单标签上添加id属性
·在label标签的for属性中设置对应的id属性
使用方法②
·直接用label标签把表单内容和表单标签包裹起来
·删除for属性
女
4.语义化标签
没有任何语义的布局标签（div，span）
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
有语义的标签布局
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
5.字符实体
1.html空格合并现象
2.常见字符实体
(实体名称单击可看)
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| '' | 引号 | " |
| ' | 憋号 | '(IE不支持) |
| ￠ | 分（cent） | ¢ |
| £ | 镑（pound） | £ |
| ￥ | 元（yen） | ¥ |
| € | 欧元（euro） | € |
| § | 小节 | § |
| © | 版权（copyright） | © |