| HTML | 地址 |
|---|---|
| HTML基础笔记 | HTML基础--超详细--零基础--简洁易懂_ddddddyu的博客-CSDN博客 |
| HTML5进阶笔记 | HTML5进阶笔记--超详细--简洁易懂_ddddddyu的博客-CSDN博客 |
1 HTML简介
网站：互联网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合
网页：网站中的一“页”，是构成网站的基本元素，通常是 HTML 格式的文件（.htm 或 .html）它要通过浏览器来阅读
HTML：超文本（超越了文本的限制，超级链接文本），超文本标记语言
1.1 常见浏览器及内核：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
| Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。 |
| chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Opera | blink | 现在跟随chrome用blink内核。 |
1.2 WEB标准
结构标准，表现标准和行为标准
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript |
Web标准的优点：易于维护、页面响应快、可访问性、设备兼容性
2 HTML语法规范
基本语法概述：
- 由尖括号包围关键词：<html>
- 一般成对出现（双标签）：<html> 和 </html>
- 极少数单标签：<br />
标签关系：包含、并列
3 HTML基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称之为：根标签 |
| <head><head> | 文档的头部 | 注意：在 head 标签中我们必须要设置的标签是 title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到 body 里面的 |
4 HTML自动生成骨架中的一些说明
4.1 文档类型声明标签：<!DOCTYPE>
文档类型声明，作用就是告诉浏览器使用哪种 HTML 版本来显示网页
<!DOCTYPE html>
这句代码的意思：当前页面采取的是 HTML5 版本来显示网页
注意：
- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前
- <!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签
4.2 lang语言种类
用来定义当前文档显示的语言
- en 定义语言为英语
- zh-CN 定义语言为中文
<html lang="en">4.3 字符集：
是多个字符的集合，以便计算机能够识别和储存各种文字
在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码
<meta charset="UTF-8" />charset 常用的值有：GB2312、BIG5、GBK、UTF-8，其中 UTF-8 也被称为：万国码，基本包含了全世界所有国家需要用到的字符
5 HTML常用标签
| 标签名 | 定义 | 特点 |
|---|---|---|
| <h1> - <h6> | 标题标签 | 1-6重要性递减，独占一行 |
| <p></p> | 段落标签 | 文本根据窗口大小自动换行，段落间保有间隙 |
| <br /> | 换行标签 | 单标签，简单开始新的一行，p标签有垂直间距，换行没有 |
| <hr /> | 水平线标签 | 一条线 |
| 文本格式化 | ||
| <strong> </strong> | 加粗 |
推荐使用前者 |
| <b> </b> | 加粗 | |
| <em> </em>或<i> </i> | 倾斜 | |
| <del> </del> 或 <s> </s> | 删除线 | |
| <ins> </ins> 者 <u> </u> | 下划线 | |
| <div> 和 <span> 标签 | 没有语义 | 用来布局，div一行一个，span一行多个（后期可用CSS修改） |
5.1 图像标签：<img src="图像URL" />
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt |
文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本，鼠标放到图片上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
路径：
| 相对路径 | 分类 | |
| 同一级路径： | <img src="baidu.gif" /> | |
| 下一级路径： / | <img src="image/baidu.gif" /> | |
| 上一级路径： ../ | <img src="../image/baidu.gif" /> | |
| 绝对路径 | 本地绝对路径 | "D:\web\img\logo.gif" |
| 完整网络地址 | "http://jerry-z-j-r.github.io" |
5.2 超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"></a>
target：
- _self：默认值
- _blank：在新窗口中打开的方式
链接类型：外部链接、内部链接、空连接、下载链接、锚点链接（搭配id使用 #two 目标位置id=“two”）
6 HTML中的注释与特殊字符
注释：<!--注释语句-->
特殊字符：
7 表格标签
<table>
<tr> <th>姓名</th> </tr>
<tr> <td>单元格内的文字</td> </tr>
</table>| <table></table> | 用于定义表格的标签 | |
| <tr> </tr> | 用于定义表格中的行 | 必须嵌套在 <table> </table> 标签中 |
| <td> </td> | 用于定义表格中的单元格 | 必须嵌套在 <tr> </tr> 标签中、单元格里面可以放任何的元素 |
| <th>姓名</th> | 表头标签 | 嵌套在 <tr> </tr> 标签中 |
7.1 表格属性：不常用，一般通过CSS设置
| 属性 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对位周围元素的对齐方式 |
| border | 1 或 "" | 边框 |
| cellpadding | 像素值 | 单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
7.2 表格结构标签：写在<table></table>中
| <thead> </thead> | 头部区域 | 内部必须拥有 <tr> 标签，一般是位于第一行 |
| <tbody> </tbody> | 主体区域 | 用于定义表格的主体，主要用于放数据本体 |
7.3 合并单元格：对单元格td操作！
合并方式：跨行（rowspan）、跨列（colspan）
合并三步曲：
- 先确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"> </td>
- 删除多余单元格
8 列表标签
列表用来布局，更加整齐有序
| 标签名 | 定义 | 说明 |
|---|---|---|
| <ul> </ul> | 无序标签 | 里面只能包含li，没有顺序。li里面可以包含任何标签 |
| <ol> </ol> | 有序标签 | 里面只能包含li，有顺序 |
| <dl> </dl> | 自定义标签 | 里面只能包含dt和dd，dt和dd里面可以放任何标签 |
9 表单标签
收集用户信息的作用
9.1 表单域：是一个包含表单元素的区域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form><form> 会把它范围内的表单元素信息提交给服务器
常用属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为 get 或 post |
| name | 表单域名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
9.2 表单元素：<input type="属性值" />
是个单标签，用于收集用户信息，根据type属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)
type属性：
| 属性值 | 说明 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本） |
| checkbox | 定义复选框，即：多选框，在一组复选框中，要求它们必须拥有相同的 name |
| file | 定义输入字段和 “浏览” 按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
除 type 属性外，<input />标签还有很多其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义 input 元素的名称 |
| value | 由用户自定义 | 规定 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
- name 是表单元素的名字，要求 单选框和复选框要有相同的name值
- checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素
<label> 标签：
- <label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
- <label> 标签的 for 属性应当与相关元素的 id 属性相同
<label for="nan">男</label>
<input type="radio" name="sex" id="man" />9.3 <select> 表单元素
- 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表
- <select> 中至少包含一对 <option>
- 在 <option> 中定义 selected="selected" 时，当前项即为默认选中项
<select>
<option>选项1</option>
<option>选项2</option>
...
</select>9.4 <textarea> 表单元素
- 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签
- 通过 <textarea> 标签可以轻松地创建多行文本输入框
- cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用 CSS 来改变大小
<textarea rows="3" cols="20">
文本内容
</textarea>9.5 表单小结
表单元素我们学了三大组
-
input 输入表单元素
-
select 下拉表单元素
-
textarea 文本域表单元素
这三组表单元素都应该包含在 form 表单域里面，并且有 name 属性
参考资料：
b站pink老师视频及材料