一、什么是HTML
HyperText Markup Language,即超文本标记语言
二、第一个HTML
<!doctpye 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
①不支持宽高(宽高根据内容大小自动撑开),自左向右排列
②受空格影响
③不独占一行
display:inline(转为行内元素)
inline-block(转为行内块元素)
block(转为块元素)
none(隐藏 不显示)
注意:当元素浮动(float)时会转化成行内块元素特点。
七、特殊字符(常用)
1⃣️< <
2⃣️> >
3⃣️ 空格
4⃣️能字符输入法打印识别的就直接使用
八、超链接
1. 跳转html页面
例: 去百度
2. 跳转图片,音频,视频等可识别文件类型,直接打开
例: 打开图片
3. 跳转未知类型的文件,根据浏览器情况,大部分浏览器下载
例子: xmind 文件
4. 移动端 可以实现 跳转 拨号界面
5. 跳转邮件应用方式
九、超链接的跳转方式
1⃣️target属性 跳转 _self 当前页面 , _blank 新页面
2⃣️步骤一: 设置锚点 为标签 添加 id 属性值
步骤二: 跳转锚点 #锚点名
十、框架iframe
1⃣️一个html页面嵌套展示多个html页面,实现分模块开发的方式,属于行内块类型
2⃣️
1. src 页面地址
2. frameborder 边框
3. scrolling 滑动条
4. width/height 宽高
5. name 框架名
3⃣️单页面框架跳转
步骤一: 设置导航 a 超链接的 target 指向对应页面iframe 的name值
步骤二: 主页面使用iframe嵌套其他页面,局部刷新iframe添加name属性和 导航a超链接 target 对应
十一、表格
1⃣️
1.width/height 一半高度由行设置, 单元格只设置宽度 2.align水平对齐 属性:left center right 3.valign垂直对齐 属性 top middle bottom 4.bgcolor 背景色 5.rowspan行合并 6.colspapn列合并 3⃣️表格布局 新手知道行和列的合并与嵌套表格 1.静态布局(固定宽高) 十二、表单 1⃣️什么是表单?作用? 用于收集用户输入的信息,发送给服务器 2⃣️表单组成 (1)表单标签 method 请求方式 get 将数据放入地址栏发送服务器,长度有限,不安全 post 将数据放入到请求体里,长度没有限制,可发送文件,相对安全 enctype 编码类型 (2)表单域 1. 单行文本 2. 单行密码 3. 多行文本 4. 下拉列表 select>option 5. 单选按钮 6. 多选按钮 7. 日期时间 8. 颜色 9. 邮箱 10. 数字 11. 数字区间 12. 文件 修改编码: multipart/form-data 请求凡是:post 13. 隐藏域 (3)表单按钮 1.提交按钮 2.重置按钮 3.普通按钮
|