一、什么是HTML
HTML：Hyper Text Markup Language（超文本标记语言）
二、作用
通过浏览器进行解释执行HTML标签内容，把最终结构给用户进行呈现
三、结构
<!DOCTYPE html> html5标识
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 是H5的一个声明部分
<meta charset="utf-8"> 指定网页的字符集的编码格式
四、网页开发工具
HBuilderX 、WebStrom、VScode
HBuilderX 下载官网：https://www.dcloud.io/
URL: http://127.0.0.1:8848/web-01/index.html (统一资源定位符：http协议+IP+端口号+项目名+项目资源)
http (https): 网络传输协议 超文本传输协议, https具有安全性能的超文本传输协议,CA证书
127.0.0.1 本机的IP地址
8848 端口号
web-01：项目名
index.html：网页资源文件
五、网页的基本标签
5.1 标题标签
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
5.2 段落标签
<p></p>
5.3 换行标签
单标签，叫做空元素
<br/>
5.4 水平线标签
<hr/>
5.5 字体样式标签
<strong></strong> 加粗显示
<em></em> 斜体
5.6 文本标签（扩展）
<span></span> 一般用于在容器中放置文本内容
<label></label> 一般用于在表单应用中的标题
5.7 注释和特殊符号
<!-- --> 网页的注释 ctrl+ / 添加和去除注释
空格符
> 大于
< 小于
" 双引号
© 版权符号
六、图片标签
SEO：搜索引擎优化
6.1 图片标签应用
<img src="b.jpg" width="500" height="200"/>
src：代表图片的资源路径
width：宽度
height: 高度
6.2 图片的类型
在web中常用的图片格式
.png 支持背景透明的
.gif 支持动画
.jpg/.jpeg 品质一般
.webp 针对web系统的图片格式，品质较优
.bmp 品质较优，体积大
http://192.168.8.134:8848/project_01/index02.html
6.3 图片的路径
./ 代表当前路径
…/ 代表返回上一级路径
七、超链接标签
7.1 页面间的链接
站内链接
<a href="./news.html">跳转到详情页</a>
站外链接
<a href="https://www.baidu.com/">百度</a>
7.2 锚链接
设置锚点
<a name="head">网页底部</a>
添加链接
<a href="index02.html#head">跳转到底部</a>
先设置锚点，定义一个锚点的名称，再添加链接的地址，注意要加#号，在href属性中添加链接的地址，如果在不同的页面间设置锚链接就添加网页的名称
7.3 功能性链接
打开QQ客服
<a href="http://wpa.qq.com/msgrd?v=3&uin=877218421&site=qq&menu=yes">打开QQ聊天框</a>
八、列表标签
学习资料：https://www.w3school.com.cn/
8.1 有序列表
<ol type="1">
<li>全国疫情形势呈逐渐企稳态势 但地区间交叉输入影响明显</li>
<li>官方：停留时间不超过4小时的货车司机，不允许赋码带星</li>
<li>全国疫情形势呈逐渐企稳态势 但地区间交叉输入影响明显</li>
<li>官方：停留时间不超过4小时的货车司机，不允许赋码带星</li>
<li>全国疫情形势呈逐渐企稳态势 但地区间交叉输入影响明显</li>
<li>官方：停留时间不超过4小时的货车司机，不允许赋码带星</li>
</ol>
8.2 无序列表
<ul type="square">
<li>全国疫情形势呈逐渐企稳态势 但地区间交叉输入影响明显</li>
<li>官方：停留时间不超过4小时的货车司机，不允许赋码带星</li>
<li>全国疫情形势呈逐渐企稳态势 但地区间交叉输入影响明显</li>
<li>官方：停留时间不超过4小时的货车司机，不允许赋码带星</li>
<li>全国疫情形势呈逐渐企稳态势 但地区间交叉输入影响明显</li>
<li>官方：停留时间不超过4小时的货车司机，不允许赋码带星</li>
</ul>
8.3 定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>西瓜</dd>
<dt>家电</dt>
<dd>电视</dd>
<dd>冰箱</dd>
<dd>空调</dd>
</dl>
九、表格
语义化：写标签的时候，最好写完整，这样利于搜索引擎优化。
广告：投放了广告，做了竞价排名。
<table border="1" cellpadding="0" cellspacing="0" width="1000">
<thead>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>张三1</td><td>20</td>
</tr>
<tr>
<td>2</td><td>张三2</td><td>20</td>
</tr>
<tr>
<td>3</td><td>张三3</td><td>20</td>
</tr>
</tbody>
</table>
属性说明：
border="1" 表格的边框
cellpadding="0" 内间距
cellspacing="0" 外边距
width="1000" 宽度
十、表单
作用：完成人机交互，收集信息等
<form action="#" method="post"> action：提交的路径 method:提交方式
<input type="hidden" name="id" value="100"/> hidden:隐藏域
<input type="text" name="uname" placeholder="邮箱/用户名/登录手机"/> text:文本框
<input type="password" name="pwd" /> password:密文
<input type="radio" name="gender" /> radio:单选按钮
<input type="checkbox" name="hobby"/> checkbox：复选框
<input type="file" name="avctor" /> file：文件域
<input type="date" name="birthday" /> date：日期
<select name="province">
<option>--请选择省份--</option>
<option value="10">山西省</option>
<option value="11">山东省</option>
<option value="12">河南省</option>
<option value="13">河北省</option>
</select>
select：下拉列表 option:列表项，列表项要添加value属性
<textarea name="info" rows="10" cols="60"></textarea> 多行文本框，rows：代表多少行 cols：代表能输入60个字符
</form>
提交方式有get post
readonly :只读
disabled:禁用
四种按钮：
<input type="button" value="提交"/> 普通按钮，一般会配合脚本来完成程序的实现
<input type="submit" value="提交1"/> 提交按钮
<input type="reset" value="重置" /> 重置按钮
<input type="image" src="./img/123.png" /> 图片按钮
十一、H5的新标签
div是一个放置标签内容的盒子容器
ul>li*5 按tab键就能快速生成
11.1、H5新增标签
header 头部
footer 底部
aside 侧边栏
article 独立的内容模块
11.2、Video
<video width="400" controls autoplay muted loop>
<source src="./video/123.mp4" type="video/mp4"></source>
您的浏览器不支持Video标签。
</video>
controls ：控制栏
muted:静音
autoplay: 自动播放 ，需要配合muted才能生效
loop：循环播放
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
