HTML
网页与网站
网站——网页集合
网页——html文件
浏览器内核
- 渲染引擎，负责读取网页内容，整理讯息，计算网页显示方式并显示。
5大浏览器
| 浏览器 | 内核 |
|---|---|
| IE (edge) | Trident |
| firefox | Gecko |
| Opera | Blink |
| chrome | Blink |
| Safari | Webkit |
web标准
- 由==W3C组织（万维网联盟）==和其他标准化组织制定的==一系列标准的集合==
遵循web标准优点
- 页面标准统一
- 内容能被更广泛设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站易于维护
- 提高页面浏览速度
web标准构成
- web标准提出的最佳体验方案：==结构、表现、行为相分离==
| 标准 | 说明 |
|---|---|
| ==结构（Structure）== | 用于对==网页元素==进行整理和分类，现阶段主要是HTML |
| ==表现（Presentation）== | 用于设置网页元素的版式、颜色、大小等==外观样式==。主要指css |
| ==行为（Behavior）== | 网页模型的定义及==交互==的编写。现阶段主要是JavaScript |
HTML语法规范
- 基本语法概述
- HTML标签是==由尖括号包围的关键词==
- ==双标签==和==单标签==
- 标签关系
- 包含关系
- 并列关系
HTML基本结构标签==（骨架标签）==
<html>
<head>
<title>页面标题</title>
</head>
<body>
主体内容
</body>
</html>| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，称为==根标签== |
| <head></head> | 文档的头部 | ==head标签中必须设置title标签== |
| <title></title> | 文档的标题 | 页面自己所有的网页标题 |
| <body></body> | 文档的主体 | 包含文档的所有内容，页面内容 |
VsCode生成骨架标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>==文档类型声明标签==
- <!DOCTYPE>文档类型声明，告诉浏览器使用哪种HTML版本显示网页
- <!DOCTYPE>声明位于文档最前位置
- <!DOCTYPE>不是一个HTML标签，只是文档类型声明标签
==lang语言种类==
- 用来定义当前文档显示的语言
- en 英文 ；zh-CN 中文
- 用于提示浏览器
- 用来定义当前文档显示的语言
==字符集==
- 在<head>标签内，通过<meta>标签的charset属性规定HTML文档字符编码
- GB2312、BIG5、GBK、UTF-8
HTML常用标签
标签语义：使页面结构更清晰
标题标签 ==<h1>== - ==<h6>==
- ==标题==，6级标签重要性递减，独占一行，加粗，变字号
段落标签 ==<p>==
- ==用于定义段落==
- 文本在一个段落中会根据浏览器窗口大小自动换行
- 段落和段落间保有空隙
换行标签 ==<br/>==
- ==强制换行==
- 单标签
- 只是简单换行，换行间未插入垂直间距
文本格式化标签
突出重要性，为文字设置粗体、斜体或下划线等效果
语义 标签 推荐 加粗 <strong></strong>或<b></b> ==<strong>== 倾斜 <em></em>或<i></i> ==<em>== 删除线 <del></del>或<s></s> ==<del>== 下划线 <ins></ins>或<u></u> ==<ins>==
盒子标签 (==无语义==)
- ==<div>==
- division；分割、分区；大盒子
- ==独占一行==
- ==<span>==
- 跨度、跨区；小盒子
- ==非独占行==
- ==<div>==
图像标签 ==<img>==
用于定义HTML页面中的图像；单标签
属性 属性值 说明 src 图片路径 必须属性 alt 文本 替换文本，图片不能显示时文字 title 文本 提示文本，鼠标悬浮图像时文字 width 像素 宽度 height 像素 高度 border 像素 边框
超链接标签 ==<a>==
- anchor 用于超链接
<a href="跳转目标" target="窗口弹出方式">文本或图像</a>- 属性
- ==href== 必须属性
- ==target== _self 默认 当前页；_blank 新建页
- 链接分类
- 外部链接
- 内部链接
- 空链接 #
- 下载链接
- 网页元素链接
- 锚点链接 #名字 （id=名字）
注释
- <!– 注释 –>
特殊字符
| 特殊字符 | 描述 | 代码 |
|---|---|---|
| 空格符 | | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| m³ | 立方 | ³ |
表格标签
用于显示、展示数据
基本语法
<tabel> <tr> <th></tr> <td></td> </tr> </tabel>- <table></tabel> 用于定义表格
- <tr></tr> 定义行，必须嵌套在table标签内
- <td></td> 定义单元格,必须嵌套在tr标签内 table-data
- <th></th> 定义表头，加粗居中显示 table-head
表格原生属性
属性 属性值 说明 align left、right、center 对齐方式 border 1或”” 有无边框 cellpadding 像素值 边沿与内容间空白 cellspacing 像素值 单元格间空白 width 像素值或百分比 表格宽度 表格结构标签
- ==<thead>标签== 表格的头部区域 内部必须有
标签 - ==<tbody>标签== 表格的主体区域 用于放数据本体
合并单元格
合并方式 代码 目标单元格 跨行合并 rowspan=”n” 最上侧单元格 跨列合并 colspan=”n” 最左侧单元格 列表标签
用于布局，整齐有序
分类：无序列表、有序列表、自定义列表
==无序列表==
各列表项并列无序
<ul>中只能嵌套<li>
<li>容器可放任意元素
无序列表默认样式（小黑点）
```html
- 列表项1
- 列表项2
- 列表项3
- ==有序列表== - 各列表项有序 - \<ol>中只能嵌套\<li> - \<li>容器可放任意元素 - 无序列表默认样式（数字序号.） - ```html <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
==自定义列表==
用于对术语或名词进行解释和描述，列表项前无项目符号
<dl>中只能嵌套<dt>、<dd>
<dt><dd>无个数限制
<dt><dd>非包含关系,”围绕“(并列关系)
```html
- 名词
- 名词解释1
- 名词解释2
#### 表单标签 - 用于收集用户信息 - 一个完整的表单由==表单域、表单控件（表单元素）、提示信息==3个部分组成 - ==表单域== ==\<form>标签== - 定义表单元素区域，把范围内表单元素信息提交给服务器 ```html <form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
表单控件（表单元素）
==input输入表单元素==
单标签 <input />
<input type="属性值" />input常用属性
属性 属性值 描述 name 自定义 元素名称 value 自定义 元素值 checked checked 首次加载选中 maxlength 正整数 规定输入字符最大长度 type 类型 元素控件类型 type属性值
属性值 描述 button 可点击按钮 checkbox 复选框 file 输入字段和“浏览”按钮 供文件上传 hidden 隐藏输入字段 image 图像提交 password 密码字段 掩码字符 radio 单选按钮 reset 重置按钮 清楚表单中所有数据 submit 提交按钮 将表单数据发送到服务器 text 输入文本字段 默认宽度20个字符
==label标签==
为input元素定义标注；用于绑定表单元素，增加交互范围
当点击<label>文本内容，光标聚焦绑定元素。
==核心：<label>标签的for属性与相关元素的id属性相同==
示例
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
==select下拉表单元素==
用于下拉选择，节省页面空间
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select><select>中至少包含一对<option>
selected 默认选择
==textarea文本域==
定义多行文本输入
<textarea></textarea>
HTML文档
- ==<thead>标签== 表格的头部区域 内部必须有