一、什么是HTML
HyperText Markup Language，知名网站建设定制即超文本标记语言
二、第一个HTML
<！doctpye html>
<html>
<head></head>
<body></body>
<html>
三、知名网站建设定制常用的标签🀄️🀄️🀄️
1⃣️p 标签 ，段落标签，占整行
2⃣️img 图片标签：
①src 图片路径：绝对路径
相对路径：./x.jpg 同级
../x.jpg 上一级
知名网站建设定制本地硬盘物理路径，很少使用file:/// D:/abc/x/y.jpg
②alt 知名网站建设定制错误替换文本
③title 悬停提示
④width/height 知名网站建设定制图片的宽高
3⃣️h1~h6 标题标签，占整行， 包含 其他块 和
4⃣️br 换行标签
5⃣️ul>li ，块元素，占整行
6⃣️ol>li 有序列表，，占整行
7⃣️ dl>dt+dd 定义列表 ，块元素，占整行
8⃣️ b / strong 加粗
9⃣️i / em 倾斜
🔟font 字体 属性：颜色color 大小size
sub / sup 上下标
hr 水平线 属性： 宽度width 颜色 color
marquee 滚动文本 属性： 方向direction 运动方式behavior
四、网页图片
1. jpeg/jpg 有损压缩，知名网站建设定制不支持透明，颜色丰富
2. png 无损压缩，支持透明，颜色丰富
3. gif 支持动画，支持透明，颜色范围256色
4. webp 知名网站建设定制有损压缩与无损压缩的知名网站建设定制图片文件格式
五、颜色
RGB：red 0～255；green 0～255；blue 0～255
#FFFFFF 知名网站建设定制十六进制的等值转换
六、标签的显示类型
1⃣️块block
p h1-h6 hr ul ol li dl dd dt form
①支持宽高，自上而下排列
②不受空格影响
③一般用于其他标签的容器
④默认宽度为100%（独占一行）。
2⃣️行内块 inline-block
1、img，用于定义HTML页面中的图像；
2、textarea，用于定义一个多行的文本输入控件；
3、input，用于规定用户可以在其中输入数据的输入字段。
3⃣️行内inline
span i a b strong em sub sup u label br font
①不支持宽高（宽高根据内容大小自动撑开），自左向右排列
②受空格影响
③不独占一行
备注：标签元素之间的转换
display：inline（转为行内元素）
inline-block（转为行内块元素）
block（转为块元素）
none（隐藏 不显示）
注意：当元素浮动（float）时会转化成行内块元素特点。
七、特殊字符（常用）
1⃣️< <
2⃣️> >
3⃣️ 空格
4⃣️能字符输入法打印识别的就直接使用
八、超链接
1. 跳转html页面
例：<a href = ' http：//www.baidu.com '> 去百度</a >
<a href = ' '> 去task1</a >
2. 跳转图片，音频，视频等可识别文件类型，直接打开
例：<a href = ' '> 打开图片</a >
3. 跳转未知类型的文件，根据浏览器情况，大部分浏览器下载
例子：<a href = ' '> xmind 文件</a >
4. 移动端 可以实现 跳转 拨号界面
<a href = ' '> 去拨号</a >
5. 跳转邮件应用方式
<a href = ' '> 发邮件</a >
九、超链接的跳转方式
1⃣️target属性 跳转 _self 当前页面 , _blank 新页面
2⃣️步骤一： 设置锚点 为标签 添加 id 属性值
步骤二： 跳转锚点 <a href=" ">#锚点名</a >
十、框架iframe
1⃣️一个html页面嵌套展示多个html页面，实现分模块开发的方式，属于行内块类型
2⃣️<iframe>
1. src 页面地址
2. frameborder 边框
3. scrolling 滑动条
4. width/height 宽高
5. name 框架名
3⃣️单页面框架跳转
步骤一： 设置导航 a 超链接的 target 指向对应页面iframe 的name值
步骤二： 主页面使用iframe嵌套其他页面，局部刷新iframe添加name属性和 导航a超链接 target 对应
十一、表格
1⃣️<table>
1. border 表格四边宽度
2.frame 表格四边的显示
属性：above 上 below 下 rhs 右 lhs 左
vsides 左右 hsides 上下 void 不显示
border 默认显示四边
3.rules 表格间隔线设置
rows单线显示行
cols单线显示列
all单线显示行列
4.width/height 宽高
5.cellspacing 单元格外间距
6.cellpadding 单元格内填充
7.align 表格对齐方式
8. bordercolor 边框颜色
2⃣️<tr> <td>
1.width/height 一半高度由行设置， 单元格只设置宽度
2.align水平对齐
属性：left center right
3.valign垂直对齐
属性 top middle bottom
4.bgcolor 背景色
5.rowspan行合并
6.colspapn列合并
3⃣️表格布局
新手知道行和列的合并与嵌套表格
1.静态布局(固定宽高)
2.弹性布局(flex)————常用
3.圣杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量
B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量
C，flex-basis：表示该子元素的初始宽度
4.自适应布局(为不同的屏幕分辨率定义的布局 @media媒体查询技术)
5.流式布局：(宽高用百分比，按屏幕分辨率调整，布局不发生变化)
6.响应式布局(使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式)
7.栅格布局
1).栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。
使用栅格布局：bootstrap(12列)，element(24栏)，antDesign
2).栅格布局
container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙
3).栅格布局实现响应式布局
8.table布局(使用表格进行页面排版和样式设置)
1).用法
display:table
display:table-cell，相当于td元素
display:table-row，相当于tr元素
table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决 定；fixed ,固定表格布局。
十二、表单
1⃣️什么是表单？作用？
用于收集用户输入的信息，发送给服务器
2⃣️表单组成
（1）表单标签<form></form>
method 请求方式
get 将数据放入地址栏发送服务器，长度有限，不安全
post 将数据放入到请求体里，长度没有限制，可发送文件，相对安全
enctype 编码类型
（2）表单域
1. 单行文本 <input type='text' ....>
2. 单行密码 <input type='password' ....>
3. 多行文本 <textarea cols=10 rows=10 ...>
4. 下拉列表 select>option
5. 单选按钮 <input type='radio' ....>
6. 多选按钮 <input type='checkbox' ....>
7. 日期时间
<input type='date/datetime/datetime-local/week' ....>
8. 颜色 <input type='color' ....>
9. 邮箱 <input type='email' ....>
10. 数字 <input type='number' ....>
11. 数字区间 <input type='range' ....>
12. 文件 <input type='file' ....>
修改编码： multipart/form-data
请求凡是：post
13. 隐藏域 <input type='hidden' ....>
（3）表单按钮
1.提交按钮<input type='submit' ...>
2.重置按钮<input type='reset' ...>
3.普通按钮<input type='button' ...>
<button>...</button>