一、什么是HTML
HyperText Markup Language,即超文本标记语言
二、第一个HTML
<!doctpye html>
<html>
<head></head>
<body></body>
<html>
三、常用的标签🀄️🀄️🀄️
1⃣️p 标签 ,段落标签,占整行
2⃣️img 图片标签:
①src 图片路径:绝对路径http://xxx.xx/xx/x.jpg
相对路径:./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>