# HTML
## 1.浏览器相关知识
常用浏览器
按内核分 html css javascript 解析器 并显示到浏览器中
1 谷歌内核 chrome edge 测试和使用
2 Mozilla firefox 火狐浏览器
3 苹果公司 safari
4 IE内核 (已废弃)
国内浏览器 没有自己的内核
javascript ——》 TypeScript
## 2.html 超文本标记语言
超文本 展现形式更丰富 有 图片 声音 视频 链接等非文本内容
标记语言 html语法 以标记（标签）来书写
html标签语法 尖括号中套因为 浏览器会解析标签 不是标签的部分会显示出来 <英文>
“`html
hello html!!!!!
“`
## 3.开发工具vscode
安装软件 直接一直下一步到结束
偏向文本编辑型开发工具 小 运行快 插件需要手动安装
![Snipaste_2024-11-08_10-33-20](http://43.155.216.63:21080/wp-content/uploads/2025/12/Snipaste_2024-11-08_10-33-20.png
## 4.通过vscode编写html
![image-20241108104545805](http://43.155.216.63:21080/wp-content/uploads/2025/12/Snipaste_2024-11-08_09-58-25.png
![image-20241108104621252](http://43.155.216.63:21080/wp-content/uploads/2025/12/Snipaste_2024-11-08_10-33-20-1.png
“`html
hell htmle
“`
## 5.html语法规则
html中可以使用的语法结构：
#### 1.html标签
“`html
标签 <英文>
两种标签 单标签（自结束标签） <英文> 自己具有特殊的功能 中间不能嵌套文本
双标签 <英文>标签体 双标签有标签体 可以包裹其他的标签和文本
“`
#### 2.标签属性
“`html
属性 <英文 key=value > 每个标签有不同的属性 和属性值
网页字符编码
html默认语言
“`
#### 3.文本
“`html
文本 纯文本部分 html不会解析 直接显示到浏览器中
特殊文本 转义符
&英文;
小空格
中空格
大空格
< 小于号
> 大于号
© 公司符号
" 引号
“`
注意:
html中排版规则与普通文本不同:
“`html
1.不识别/r/n 需要br标签换行
2.对空格解析 多个空格识别为一个空格 需要使用转义符
3.html中如果出现错误标签/属性 不会报错 只是没有显示效果
例如: 1
“`
## 6排版标签
#### 1基本排版格式
“`html
块block 独占一行
行内inline 根据内容决定大小 从左到右排列
“`
示例:
“`html
标题标签
我是菜小鸡
我是菜小鸡 我是菜小鸡
我是菜小鸡 我是菜小鸡
“`
注意:
html中因为版本向下兼容 所有会有多个标签同一显示效果的现象
#### 2.列表标签
排列文字使用
“`html
ul 无序列表标签
属性type=”square” 该标记样式
li 列表项
- 尔滨装卸行李温柔得像放鸡蛋
- 郑钦文称不与选手交朋友 李娜回应
- 快递小哥在仓库遇到小猪包裹
- 王俊凯发文卡点为王源庆生
“`
“`html
ol 有序列表
- 尔滨装卸行李温柔得像放鸡蛋
- 郑钦文称不与选手交朋友 李娜回应
- 快递小哥在仓库遇到小猪包裹
- 王俊凯发文卡点为王源庆生
“`
“`html
dl 自定义列表
dt 列表标题
dd 列表内容
- 自定义标题
- 自定义内容
- 震惊80老翁 晚上劲做出这种事
- 晚上掉厕所里了
“`
## 7图片标签
img 网页中显示图片
“`html
img 图片标签 行内元素 单标签
width 宽
height 高
title 鼠标悬停时 会显示说明
alt 图片显示不出来时 显示说明
“`
“`html
“`
注意:图片时行内标签 可以与文字一起排列
## 8超链接标签
> 浏览器地址栏中填的是http协议链接
> http协议链接规则(*):
“`html
http:// 127.0.0.1 : 5500 /day1_html/6%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html
? key=value & key=value
协议 ip地址/域名 端口号 默认端口号可以不填 资源地址 请求参数
“`
> a标签 超链接(*)
>
> 做页面跳转 根据a标签中 href属性填入的值 替换浏览器的地址栏
“`html
href属性 链接地址
1和2 是在当前服务器下替换路径
1.相对路径 自己与目标文件之间经过的路径 (通用性强)
./ 当前目录 可以不写 ../ 退出一级目录
查看其他网页
2.相对根路径 直接填目标文件的路径 从/开始替换
查看其他网页
3.绝对路径 从协议开始 替换完整路径
通常用来访问外部资源
看拽哥
“`
“`html
target属性 链接打开方式
_self 默认值 在当前页面打开
_blank 在新页面打开
“`
a标签做锚点(在当前页面上下位置跳转)
“`html
a标签可以做锚点
在当前页面上下位置跳转
# 到顶部
### 不跳转 保留a标签样式使用
#id值 跳转到指定的元素为止
“`html
查看其他网页
查看其他网页
查看百度
看拽哥
小说
图片
## 9表格标签
table 画表格
1.显示数据表格
2.可以通过talbe对齐元素 做小页面布局
“`html
table 表格标签
border=”1″ 边框属性
tr 行
td 单元格
align=”right” 对齐方式 左中右 默认左
rowspan=”3″ 跨行
colspan=”3″ 跨列
th 单元格(加粗居中 一般做列头)
caption 表名
thead 头部区域
tbody 主体数据区域
tfoot 尾部区域
“`
表格实例 画表格
“`html
| 编号 | 姓名 | 住址 |
|---|---|---|
| 001 | 小李子 | 住在凤阳大街 |
| 002 | 小李子2 | |
| 003 | 小李子3 | |
| 联系电话:123321123321 | ||
“`
## 10表单标签
收集用户信息 并向服务端发送 这种元素称为表单
“`html
“`
表单注意点:
“`html
1.form标签
2.form标签中包含表单元素 输入框 选择框
3.form上设置参数
action=”/myserver” 提交的服务端地址
4.需要提交按钮 触发提交动作
5.表单元素上 需要配置name属性 才能发送参数 key=value 的键值对
“`
表单的属性设置:
“`html
action=”/myserver” 服务器的地址
“`
“`html
method=”get” 提交方式属性
http协议中定义的提交数据方式
(默认值)
get 发送数据时 出现url中
字符长度有限制 4k
字符形式 ascII字符
参数可以存进历史记录
可以存为书签
处理较快
post 发送数据时 不出现在url中 隐藏在请求体中
长度无限制
可以用字符 可以用字节
参数不能存进历史记录
不能存为书签
处理较慢
“`
“`html
enctype属性
application/x-www-form-urlencoded url编码格式 字符 (默认值)
multipart/form-data 分段文件 字节
“`
## 11常用表单元素
“`html
1输入类
输入框
密码框
2选择类
单选按钮
多选按钮
3扩展类
下拉列表
多行文本
“`
## 12使用html标签做注册页面
“`html
“`