全栈攻防局
HTML笔记（非完整版）
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区一、HTML 简介与入门
1. 什么是 HTML？
全称：HyperText Markup Language（超文本标记语言）。
超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。
标 记：文本要变成超文本，就需要用到各种标记符号。
语 言：每一个标记的写法、读音、使用规则，组成了一个标记语言。
2. HTML 初体验
- 第一步：鼠标右键 => 新建 => 文本文档 => 输入以下内容，并保存。
- 第二步：修改后缀为 .html ，然后双击打开即可。
这里的后缀名，使用 .htm 也可以，但推荐使用更标准的 .html 。
程序员写的叫 源代码，要交给浏览器进行渲染。
借助浏览器看网页的 源代码，具体操作：
在网页空白处：鼠标右键 ==> 查看网页源代码
3. HTML 标签
标签 又称 元素，是HTML的基本组成单位。
标签分为：双标签 与 单标签 （绝大多数都是双标签）。
标签名不区分大小写，但推荐小写，因为小写更规范。
双标签：
示例代码：
- 单标签：
示例代码：
- 标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进：
4. HTML 标签属性
用于给标签提供 附加信息。
可以写在：起始标签 或 单标签中，形式如下：
例如：
- 有些特殊的属性，没有属性名，只有属性值，例如：
注意点：
不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细 总结）。
属性名、属性值不能乱写，都是W3C规定好的。
属性名、属性值，都不区分大小写，但推荐小写。
双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
标签中不要出现同名属性，否则后写的会失效，例如：
5. HTML 基本结构
在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择“检查”。
【检查】 和 【查看网页源代码】的区别：
【查看网页源代码】看到的是：程序员编写的源代码。
【检查】看到的是：经过浏览器 “处理” 后的源代码。
备注：日常开发中，【检查】用的最多。
网页的 基本结构 如下：
想要呈现在网页中的内容写在 body 标签中。
head 标签中的内容不会出现在网页中。
head 标签中的 title 标签可以指定网页的标题。
图示：
代码：
6. 安装 VSCode
- 安装中文语言包。
- 使用 VSCode打开文件夹的两种方式。
- 调整字体大小。
- 设置主题。
- 安装图标主题： vscode-icons 。
备注：详细安装步骤请参考视频。
7. 安装 Live Server 插件
- 可以更加方便的打开网页。
- 打开网页的方式更贴近项目上线。
- 代码出现改动后，可以自动刷新。
- 根据自己的情况，去配置一下 VSCode 的自动保存。
注意1：务必使用VSCode打开的是文件夹，否则 Live Server 插件无法正常工作！
注意2：打开的网页必须是标准的HTML结构，否则无法自动刷新！
8. HTML 注释
特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。
作用：对代码进行解释和说明。
写法：
- 注释不可以嵌套，以下这么写是错的（反例）。
9. HTML 文档声明
作用：告诉浏览器当前网页的版本。
写法：
旧写法：要依网页所用的HTML版本而定，写法有很多。
具体有哪些写法请参考 ： W3C官网-文档声明 （了解即可，千万别背！）
新写法：一切都变得简单了！W3C 推荐使用 HTML 5 的写法。
或 或
- 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
10. HTML 字符编码
- 计算机对数据的操作：
存储时，对数据进行：编码。 读取时，对数据进行：解码。
编码、解码，会遵循一定的规范 —— 字符集。
字符集有很多中，常见的有（了解）：
ASCII ：大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。
GB2312 ：继续扩充，收录了 6763 个常用汉字、682个字符。
GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文。
UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用。
使用原则是怎样的？
原则1：存储时，务必采用合适的字符编码 。
否则：无法存储，数据会丢失！
原则2：存储时采用哪种方式编码 ，读取时就采用哪种方式解码。
否则：数据错乱（乱码）！
例如下面文字中，包含有：中文、英文、泰文、缅甸文
我爱你 I love you! ฉันรักเธอนะ ကန်မကိ ချစ်တယ်။
若使用 ISO8859-1 编码存储，在存入的那一刻，就出问题了，因为 ISO8859-1 仅支持英 文！
为保证所有的输入，都能正常存储和读取，现在几乎全都采用： UFT-8 编码。
所以我们编写 html 文件时，也都统一用 UFT-8 编码。
- 总结：
平时编写代码时，统一采用 UTF-8 编码（最稳妥）。
为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指 定字符编码。
11. HTML 设置语言
- 主要作用：
让浏览器显示对应的翻译提示。
有利于搜索引擎优化。
- 具体写法：
扩展知识： lang 属性的编写规则（作为一个课外扩展知识，了解即可）。
第一种写法（ 语言-国家/地区 ），例如：
zh-CN ：中文-中国大陆（简体中文） zh-TW ：中文-中国台湾（繁体中文） zh ：中文 en-US ：英语-美国 en-GB ：英语-英国
- 第二种写法（ 语言—具体种类）已不推荐使用，例如：
zh-Hans ：中文—简体 zh-Hant ：中文—繁体
W3School 上的说明： 《语言代码参考手册》 、 《国家/地区代码参考手册》
W3C官网上的说明： 《Language tags in HTML》
12. HTML标准结构
HTML标准结构如下：
输入 ! ，随后回车即可快速生成标准结构。
生成的结构中，有两个meta标签，我们暂时用不到，可以先删掉。
配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制。
在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。
二、HTML 基础
1. 开发者文档
W3C官网： http://www.w3c.org/ W3School： http://www.w3school.com.cn/ MDN： developer.mozilla.org —— 平时用的最多。
2. 排版标签
标签名 标签含义 单 / 双 标签
h1 ~ h6 标题 双
p 段落 双
div 没有任何含义，用于整体布局（生活中的包装袋）。 双
- h1 最好写一个， h2~h6 能适当多写。
- h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
- p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。
3. 语义化标签
概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
优势：
代码结构清晰可读性强。 有利于 SEO（搜索引擎优化）。 方便设备解析（如屏幕阅读器、盲人阅读器等）。
4. 块级元素 与 行内元素
块级元素：独占一行（排版标签都是块级元素）。
行内元素：不独占一行（目前只学了： input ，稍后会学习更多）。
使用原则：
块级元素 中能写 行内元素 和 块级元素（简单记：块级元素中几乎什么都能写）。
行内元素 中能写 行内元素，但不能写 块级元素。
一些特殊的规则：
h1~h6 不能互相嵌套。 p 中不要写块级元素。
备注： marquee 元素设计的初衷是：让文字有动画效果，但如今我们可以通过 CSS 来实现 了，而且还可以实现的更加炫酷，所以 marquee 标签已经：过时了（废弃了），不推荐使 用。我们只是在开篇的时候，用他做了一个引子而已，在后续的学习过程中，这些已经废弃 的标签，我们直接跳过。
5.文本标签_常用的
用于包裹：词汇、短语等。
通常写在排版标签里面。
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
文本标签通常都是行内元素。
标签名 标签语义 单 / 双 标签
em 要着重阅读的内容 双
strong 十分重要的内容（语气比em要强） 双
span 没有语义，用于包裹短语的通用容器 双
生活中的例子： div 是大包装袋， span 是小包装袋。
6.文本标签_不常用的
单 / 双 标 标签名 标签语义 签
cite 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） 双
dfn 特殊术语 ，或专属名词 双
del 与 ins 删除的文本 【与】 插入的文本 双
sub 与 sup 下标文字 【与】 上标文字 双
code 一段代码 双
samp 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 双
键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关 kbd 双 的手册中
abbr 缩写，最好配合上 title 属性 双
更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、 bdo 双 rtl
var 标记变量，可以与 code 标签一起使用 双
small 附属细则，例如：包括版权、法律文本。—— 很少使用 双
b 摘要中的关键字、评论中的产品名称。—— 很少使用 双
本意是：人物的思想活动、所说的话等等。 i 双 现在多用于：呈现字体图标（后面要讲的内容）。
与正常内容有反差文本，例如：错的单词、不合适的描述等。—— u 双 很少使用
q 短引用 —— 很少使用 双
blockquote 长引用 —— 很少使用 双
address 地址信息 双
备注：
这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如：
small 、 b 、 u 、 q 、 blockquote
- HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6 、 p 、 div 、 em 、 strong 、 span
7. 图片标签
1. 基本使用
标签标签语单 / 双 标 常用属性 名义 签
src ：图片路径（又称：图片地址）—— 图片的具体位置 alt ：图片描述 img 图片width ：图片宽度，单位是像素，例如： 200px 或 200单 height ：图片高度， 单位是像素，例如： 200px 或
总结：
像素（ px ）是一种单位，学到 CSS 时，我们会详细讲解。
尽量不同时修改图片的宽和高，可能会造成比例失调。
暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道： 块、行内）。
alt 属性的作用：
搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。 盲人阅读器会朗读 alt 属性的值。
2. 路径的分类
1. 相对路径：以当前位置作为参考点，去建立路径。
已有结构 符号 含义 举例（在 测试.html 中）
./ 同级 引入【怪兽.jpg】： 
下一引入【喜羊羊.jpg】： 
上一 ../ 引入【奥特曼.jpg】： 
级
注意点：
相对路径中的 ./ 可以省略不写。 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
2. 绝对路径：以根位置作为参考点，去建立路径。
- 本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用）
- 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。
注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入 失败。
3. 常见图片格式
- jpg 格式：
概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节 丢弃了）。
主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网 页中很常见。
- png 格式：
概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配 图等。
- bmp 格式：
概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动 态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使 用）
- gif 格式：
概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
- webp 格式：
概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
base64 格式
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
原理：把图片进行 base64 编码，形成一串文本。
如何生成：靠一些工具或网站。
如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。
图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。
8. 超链接
主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定 应用。
标签名 标签语义 常用属性 单 / 双 标签
href ： 指定要跳转到的具体目标。 target ： 控制跳转时如何打开页面，常用值如下: _self ：在本窗口打开。 a 超链接双 _blank ：在新窗口打开。 id ： 元素的唯一 标识，可用于设置锚点。 name ： 元素的名字，写在 a 标签中，也能设置锚点。
1. 跳转到页面
去京东 去看排版标签注意点：
- 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
- 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！
想展示多个回车或空格，怎么办呢？ —— 后面会讲。
2. 跳转到文件
看自拍 看小电影 看小姐姐 点我一夜暴富 内部资源 下载电影注意1：若浏览器无法打开文件，则会引导用户下载。
注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。
3. 跳转到锚点
什么是锚点？—— 网页中的一个标记点。
具体使用方式：
第一步：设置锚点
我是一个位置
注意点：
- 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
- name 和 id 都是区分大小写的，且 id 最好别是数字开头。
第二步：跳转锚点
去test1锚点 回到顶部 去demo.html页面的test1锚点 刷新本页面 点我弹窗4. 唤起指定应用
通过 a 标签，可以唤起设备应用程序。
电话联系 邮件联系 短信联系9. 列表
1. 有序列表
概念：有顺序或侧重顺序的列表。
要把大象放冰箱总共分几步
- 把冰箱门打开
- 把大象放进去
- 把冰箱门关上
2. 无序列表
概念：无顺序或不侧重顺序的列表。
我想去的几个城市
- 成都
- 上海
- 西安
- 武汉
3. 列表嵌套
概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。
我想去的几个城市
- 成都
- 上海
- 外滩
- 杜莎夫人蜡像馆
- 东方明珠
- 迪士尼乐园
- 西安
- 武汉
注意： li 标签最好写在 ul 或 ol 中，不要单独使用。
4. 自定义列表
- 概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
- 一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多 个）。
如何高效的学习？
- 做好笔记
- 笔记是我们以后复习的一个抓手
- 笔记可以是电子版，也可以是纸质版 多加练习
- 只有敲出来的代码，才是自己的 别怕出错
- 错很正常，改正后并记住，就是经验
10. 表格
1. 基本结构
一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
表格涉及到的标签：
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）
- 具体编码：
| 姓名 | 性别 | 年龄 | 民族 | 政治面貌 |
|---|---|---|---|---|
| 张三 | 男 | 18 | 汉族 | 团员 |
| 李四 | 女 | 20 | 满族 | 群众 |
| 王五 | 男 | 20 | 回族 | 党员 |
| 赵六 | 女 | 21 | 壮族 | 团员 |
| 共计：4人 |
2. 常用属性
单 / 双 标 标签名 标签语义 常用属性 签
width ：设置表格宽度。 height ：设置表格最小高度，表格最终高度可能比设置 table 表格的值大。双 border ：设置表格边框宽度。 cellspacing ： 设置单元格之间的间距。
height ：设置表格头部高度。 align ： 设置单元格的水平对齐方式，可选值如下：
- left ：左对齐
- center ：中间对齐 thead 表格头部3. right ：右对齐双 valign ：设置单元格的垂直对齐方式，可选值如下：
- top ：顶部对齐
- middle ：中间对齐
- bottom ：底部对齐
tbody 表格主体 常用属性与 thead 相同。 双
tr 行 常用属性与 thead 相同。 双
tfoot 表格脚注 常用属性与 thead 相同。 双
width ：设置单元格的宽度，同列所有单元格全都受影 响。 heigth ：设置单元格的高度，同行所有单元格全都受影 普通单元响。 td 双 格align ：设置单元格的水平对齐方式。 valign ：设置单元格的垂直对齐方式。 rowspan ：指定要跨的行数。 colspan ：指定要跨的列数。
表头单元 th 常用属性与 td 相同。 双 格
注意点：
- 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格 边框的宽度，
只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。
默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。
3. 跨行跨列
- rowspan ：指定要跨的行数。
- colspan ：指定要跨的列数。
课程表效果：
编写思路：
11.常用标签补充
标签名 标签含义 单 / 双 标签
br 换行 单
hr 分隔 单
pre 按原文显示（一般用于在页面中嵌入大段代码） 双
注意点：
不要用
来增加文本之间的行间隔，应使用元素，或后面即将学到的 CSS margin 属性。
的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。
12. 表单
概念：一个包含交互的区域，用于收集用户提供的数据。
1. 基本结构
简单梳理：
标签单 / 双 标签名 常用属性 语义 标签
action ：用于指定表单的提交地址（需要与后端人员沟通后确 定）。 target ：用于控制表单提交后，如何打开页面，常用值如下： form 表单_self ：在本窗口打开。双 _blank ：在新窗口打开。 method ：用于控制表单的提交方式，暂时只需了解，在后面 Ajax 的课程中，会详细讲解。
type ：设置输入框的类型，目前用到的值是 text ，表示普通 输入文本。 input 单 框name ：用于指定提交数据的名字，（需要与后端人员沟通后确 定）。
button 按钮 本小节暂不涉及 双
在本小节，我们先记住表单的整体形式，稍后会对表单控件进行详细讲解。
示例代码：
去百度搜索2. 常用表单控件
① 文本输入框
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。
② 密码输入框
常用属性如下：
name 属性：数据的名称。
value 属性：输入框的默认输入值（一般不用，无意义）。
maxlength 属性：输入框最大可输入长度。
③ 单选框
女 男
常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。
④ 复选框
抽烟 喝酒 烫头
常用属性如下：：
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。
⑤ 隐藏域
用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。 name 属性：指定数据的名称。 value 属性：指定的是真正提交的数据。
⑥ 提交按钮
点我提交表单
注意：
- button 标签 type 属性的默认值是 submit 。
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
⑦ 重置按钮
点我重置
注意点：
- button 不要指定 name 属性
- input 标签编写的按钮，使用 value 属性指定按钮文字。
⑧ 普通按钮
普通按钮
注意点：普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。
⑨文本域
我是文本域常用属性如下：
- rows 属性：指定默认显示的行数，会影响文本域的高度。
- cols 属性：指定默认显示的列数，会影响文本域的宽度。
- 不能编写 type 属性，其他属性，与普通文本输入框一致。
⑩ 下拉框
黑龙江 辽宁 吉林 广东
常用属性及注意事项：
- name 属性：指定数据的名称。
- option 标签设置 value 属性， 如果没有 value 属性，提交的数据是 option 中间的文 字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
- option 标签设置了 selected 属性，表示默认选中。
3. 禁用表单控件
给表单控件的标签设置 disabled 既可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
4.label 标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下：
- 让 label 标签的 for 属性的值等于表单控件的 id 。
- 把表单控件套在 label 标签的里面。
5. fieldset 与 legend 的使用（了解）
fieldset 可以为表单控件分组、 legend 标签是分组的标题。
示例：
6. 表单总结
标标 签签 标签名标签名常用属性常用属性 语语 义义
action 属性： 表单要提交的地址。 表 form target 属性： 要跳转的新地址打开位置; 值: _self 、 _blank 单 method 属性： 请求方式，值： get 、 post
type 属性： 指定表单控件的类型。
多值：text、password、radio、checkbox、hidden、submit、res 种button 等。 形name 属性： 指定数据名称 式value 属性： input的对于输入框：指定默认输入的值； 表对于单选和复选框：实际提交的数据； 单对于按钮：显示按钮文字。 控disabled 属性： 设置表单控件不可用。 件maxlength属性：用于输入框，设置最大可输入长度。
checked 属性： 用于单选按钮和复选框，默认选中
name 属性： 指定数据名称 文 rows 属性： 指定默认显示的行数，影响文本域的高度。 textarea本 cols 属性： 指定默认显示的列数，影响文本域的宽度。 域 disabled 属性： 设置表单控件不可用。
下 name 属性： 指定数据名称 select拉 disabled 属性： 设置整个下拉框不可用。 框
下 拉disabled 属性： 设置拉下选项不可用。 框value 属性： 该选项事件提交的数据 option 的（不指定value，会把标签中的内容作为提交数据） 选selected 属性： 默认选中。 项
按disabled 属性： 设置按钮不可用。 button 钮type 属性： 设置按钮的类型，值： submit （默认）、 reset 、 button
与 表 单 控 labelfor 属性： 值与要关联的表单控件的ID值相同。 件 做 关 联
表 单 fieldset 边 框
13.框架标签
单 / 双标 标签名 功能和语义 属性 签
name ：框架名字，可以与 target 属 性配合。 框架（在网页中嵌入其他width ： 框架的宽。 iframe 双 文件）height ： 框架的高度。 frameborder ：是否显示边框，值：0 或者1。
iframe 标签的实际应用：
- 在网页中嵌入广告。
- 与超链接或表单的 target 配合，展示不同的内容。
14.HTML实体
在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实 体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须 在 HTML 源码中插入字符实体。
字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一 个分号 ; 。
常见字符实体总结：
描述 实体名称 实体编号
空格
< 小于号 < <
大于号 > >
& 和号 & &
" 引号 " "
´ 反引号 ´ ´
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
完整实体列表，请参考： HTML Standard (whatwg.org)
15.HTML全局属性
常用的全局属性：
属性名 含义
给标签指定唯一标识，注意： id 是不能重复的。 id作用：可以让 label 标签与表单控件相关联；也可以与 CSS 、 JavaScript 配合使 用，。
class 给标签指定类名，随后通过 CSS 就可以给标签设置样式。
style 给标签设置 CSS 样式。
dir 内容的方向，值: ltr 、 rtl
title 给标签设置一个文字提示，一般超链接和图片用得比较多。
lang 给标签指定语言，具体规范和可选值请参考【10. HTML 设置语言】。
完整的全局属性，请参考： 全局属性 - HTML（超文本标记语言） | MDN (mozilla.org)
16.meta 元信息
- 配置字符编码
- 针对 IE 浏览器的兼容性配置。
- 针对移动端的配置（移动端课程中会详细讲解）
- 配置网页关键字
- 配置网页描述信息
- 针对搜索引擎爬虫配置：
值 描述
index 允许搜索爬虫索引此页面。
noindex 要求搜索爬虫不索引此页面。
follow 允许搜索爬虫跟随此页面上的链接。
nofollow 要求搜索爬虫不跟随此页面上的链接。
all 与 index, follow 等价
none 与 noindex, nofollow 等价
noarchive 要求搜索引擎不缓存页面内容。
nocache noarchive 的替代名称。
- 配置网页作者：
- 配置网页生成工具
- 配置定义网页版权信息：
- 配置网页自动刷新
完整的网页元信息，请参考： 文档级元数据元素 | MDN
相关推荐
云笔记项目完整版源码
这个是一件编写完成的云笔记项目,有兴趣的可以参考x下,如果需要下载未编写的资料我也有上传
html+css+javascript笔记完整版
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
韩顺平html+css+javascript笔记完整版
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
商城静态HTML完整版
商城静态页面模板电脑版本，页面完整可使用商业，页面美观整洁。
html入门到放弃笔记
HTML + JavaScript + Ajax + CSS 赵旭 zhaoxu@tedu.cn HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点：必须通过指定的客户端软件才能访问服务器端的一种程序 ：如 ：桌面版QQ，... ... 2、B / S 结构 Browser / Server Browser ：浏览器 特点：通过 浏览器 就能访问服务器端的一种程序 如 ：网页版百度，网页版 QQ，网页版 京东，... ... 3、WEB 1、什么是WEB WEB，是基于Internet上的一种应用程序(网页应用程序) WEB页面，简称WEB页(网页)，就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 ：也是文本，但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 ：超文本的表现形式 普通文本 a : a 超文本 a : 语言 ：具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ，以 .html 或 .htm 进行结尾的文件 开发 & 运行网页的工具： 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML中用于描述功能的符号称为"标记" 标记在使用时，用尖括号 "",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法：内容 Demo ： 1、创建 p 标记 --... 2、创建 div 标记 -- 3、创建 header 标记 -- <header></header> 2、非封闭类型的标记 也称为 "单标记" 语法： 或 Demo ： 1、创建 br 标记 -- 2、创建 hr 标记 -- 3、创建 img 标记 -- 4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套 在一对标记中，允许出现另外一对(一个)标记 注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记，在body标记中，嵌套一对 div标记，在 div 标记中 ，嵌套一对 a 标记，在 a标记中，嵌套一对 b 标记，b标记中，随意编写一些文本 <body> 这是一段测试文本 </body> 3、标记的属性 1、什么是属性 用来修饰标记的效果的内容，就是属性 2、语法 1、属性必须声明在开始标记中 2、属性与标记名称之间，用 空格 隔开 3、属性的值 与 属性之间 使用 "=" 连接 4、一个元素允许有多属性，多属性间，排名不分先后，中间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div 四大标准属性： 1、id ：定义元素在页面中独一无二的名称 2、title ：鼠标悬停在元素上时，体现的文字 3、class ：引用 类选择器时使用(CSS中) 4、style ：定义 内联方式方式使用(CSS中) 4、注释 语法：<!-- --> 注意： 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C ：Word Wide Web Consortium (万维网联盟) 1、HTML文档的组成 1、文档类型声明 告知浏览器当前的HTML文档用的是哪个版本 在网页的最顶端 2、由一对 html 根标记，来表示页面的开始与结束 Demo : 1、在 htdoc 中，创建一个网页 01-first.html 文件 创建一个 记事本，将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、<html> 标记 包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示中文 2、<body></body> 属性： 1、text ，取值是一个颜色值(red,green,blue...) 2、bgcolor ，取值也是一个颜色值 Demo : 在刚才的 Demo 基础上 1、在 <html>中 增加 <head> 和 <body> 2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 中 输出一句话 "我的第一HTML页面" 5、设置 body text为red，bgcolor为yellow 3、文本 1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、 表示一个空格 2、< 表示 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面中 输出以下内容 The element. ©2017 By Tarena The <p> element. © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo ： 这是一段包含 ，粗体，斜体，下划线，删除线，上标，下标的文本内容 将以上文本内，对应文字的特殊效果，用标记体现出来 3、标题元素 以 醒目 的方式表现出文本 语法： 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性： 1、align 文本的水平对齐方式 取值：left / center / right 4、段落元素 语法： 属性：align : left / center / right Demo : 1、在 02-text.html 中，增加以下内容 1、用 段落标记表示 :The first paragraph 2、用 段落标记表示 :The second paragraph ，文本表现为 右对齐 5、换行元素 6、分割线元素 作用：在页面中表现为一条直线 语法： 属性： 1、size 尺寸，以 px 为单位的数值 2、width 宽度，以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo ： 02-text.html 中 增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化 作用：保留源文档中的回车 和 空格 的作用 8、分区元素 1、块分区元素 语法： 作用：布局 2、行内分区元素 语法： 作用：设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类，分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：包裹文本，并处理文本的表现形式 2、块级元素 每个元素独占一行显示的，称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用：布局 注意： 1、p标记不能嵌套其它的块级元素 2、行内元素中 最好 不要嵌套块级元素 4、图像 和 链接 1、URL 目录结构 ： 目录 ，保存文件的文件夹名称 多个文件夹之间的关系，就是目录结构 1、什么是 URL URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 中的表现形式 共三种表现形式： 1、绝对路径 特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径 使用场合：当想访问互联网上的资源时，只能用绝对路径 完整的绝对路径分四部分： 1、协议名 http 2、域名(主机名，IP地址) www.codeboy.com 3、目录路径 img/header 4、文件名 logo.png http://www.codeboy.com/img/header/logo.png img/header/logo.png 2、相对路径(重点) 场合：使用本机文件时使用 什么是相对路径： 从当前文件位置处开始查找资源文件所经过的路径，就是相对路径 1、同目录，直接用 2、子目录，先进入 3、父目录，先返回 3、根相对路径 路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB中支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法 标记： 属性： 1、src ：指定要显示图像的 URL 2、width ：图像的宽度 3、height ：图像的高度 4、title ：鼠标悬停时，要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 标记：内容 属性： 1、href : 要链接的HTML页面URL 2、target : 目标，指定新网页的打开形式 取值： 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接，内容为 ：学子商城，点击时，在自身标签页中 打开 http://www.codeboy.com 2、创建一个超链接，内容为 ：学子商城的LOGO，点击时，在新标签页中打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时，完成资源下载的操作 链接的资源为 zip / rar 时则为下载操作 下载 2、电子邮件链接 联系我们 前提 ： 必须在计算机中安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接 返回顶部 4、执行Javascript代码片段 执行JS 3、锚点 1、作用 锚点用于在网页中的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点 链接到锚点 链接到锚点 5、表格 1、表格 1、表格的作用 按照一定的格式来显示数据的 表格是由 单元格(列)，行 来组成的 2、表格的语法 1、标记 1、 : 表示一个表格 2、 : 表示表格中的一行 3、 : 表行中的一列(单元格) : 行/列 标题 (加粗，水平居中) 4、 : 表格的标题 该元素必须添加在 之下，所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式 ， left / center / right 4、border 边框宽度，取值以 px 为单位的数值 5、bgcolor 6、cellspacing ：单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan ：跨列 6、rowspan ：跨行 Demo : 在 刚才的表格基础上，增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行 增加属性 ，内容水平居中对齐 3、表格的复杂应用 1、行分组 允许将若干行划分到一个组中，以便实现统一管理 1、表头行分组 允许将第一行的内容单独分到表头行分组中 2、表尾行分组 允许将最后一行的内容单独分到表尾行分组中 3、表主体行分组 2、不规则表格创建 通过 td 的跨行 和 跨列来实现不规则的表格 1、跨列 从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 2、跨行 从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除 3、表格的嵌套 被嵌套的所有的内容，只能放在 td 中 2、列表 1、作用 按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成 由列表类型 以及 列表项 来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项： --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项： 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从 几 开始显示 2、ul 1、type 1、disc，实心圆,默认值 2、circle，空心圆 3、square，实心矩形 4、none 3、列表的嵌套 被嵌套的内容只能放在 li 中 Demo : 1、声明一个列表在 html 中(有序)，包含两个列表项，显示 两部小说的名字 2、在两个列表项中，再各嵌套一个无序列表，各写3-4个小说中的主角 3、定义列表 1、作用 以一种特殊的结构来排列数据 通常用语对一类事物/名词 的解释上面 2、语法 ：声明一个定义列表 ：声明要解释的事物名称 或 名词 ：对上述名词或事物解释的内容 3、常用场合 图文混排 3、结构标记 1、结构标记的作用 搭建网页的结构(布局),用于替代 div，最大的优点是提升了标记的"语义性" 2、结构标记详解 1、<header></header> 作用：表示网页 或 某块内容的头部 2、 作用：表示网页中的 导航内容 3、 作用：表示网页主体内容中的某一部分 4、 作用：出现在文字描述性比较强的场合:一则新闻，论坛中的帖子，微博信息，博客的信息 5、 作用：表示网页中，或某部分内容的 边栏信息 6、 作用：表示网页中尾部的信息 4、表单(难点) 1、表单的作用 用于收集用户的信息并提交给服务器 表单主体是由两部分组成的 1、表单元素 收集信息，并提交给服务器 2、表单控件 用于与用户交互的一些元素：文本框，密码框 2、表单元素(难点) 标记：<form></form> 注意：只有放在 <form></form> 里面的表单控件的值，才能提交给服务器 属性： 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式，以什么样的方式把数据交给服务器 1、get 特点： 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点： 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用：指定表单数据进行编码的方式 取值： 1、application/x-www-form-urlencoded 默认值，允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get，编码方式为默认 3、表单控件 表单元素分类： 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素 详解 ： 1、input元素 里面会包含若干个不同的表单控件 标记 ：<input> 属性 ： 1、type 根据不同的type属性值，可以创建不同的input元素 2、name 定义表单控件的名称，主要提交给服务器使用的 注意：如果不声明name属性的话，元素则无法提交给服务器 3、value 定义当前控件的值，主要提交给服务器使用的 4、disabled 禁用控件，无值的属性 <input disabled> 2、文本框 与 密码框 文本框：<input type="text"> 密码框：<input type="password"> 具备除以上四个属性外，还具备以下几个独立属性： 1、maxlength 限制输入的字符数，取值为数字 2、readonly 只读，无值属性 Q : readonly 和 disabled 的区别 1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已 2、disabled ， 是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器 3、placeholder 占位符，即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮 作用：将表单提交给服务器 标记：<input type="submit" value="显示的文本"> 2、重置按钮 作用：将表单恢复到初始化的状态 标记：<input type="reset" value="显示的文本"> 3、普通按钮 作用：通过 JS 自定义功能 标记：<input type="button" value="显示的文本"> 4、显示的内容 属性： 1、type ：submit / reset / button 4、单选按钮 和 复选框 单选按钮：<input type="radio"> 复选框：<input type="checkbox"> 属性： 1、name 设置名称，并用于分组，一组单选按钮 或 复选框的名称必须相同 2、value 必须设置 3、checked 默认被选中，无值属性 5、隐藏域 和 文件选择框 1、隐藏域 <input type="hidden" name="" value=""> 想提交给服务器，但不想给用户看的数据，可以放在隐藏域中 2、文件选择框 <input type="file" name=""> 注意： 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3 http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789 1、表单 1、form ... 2、input ... 3、textarea 控件 标记：<textarea></textarea> 属性： 1、name 定义名称，提交给服务器使用 2、cols 指定文本域的列数，变相指定宽 3、rows 指定文本域的行数，变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件 创建一个 多行文本域，列数为 50，行数为 5，名称为 intro 4、选项框 1、标记 表示 下拉列表 或 滚动列表 列表中的内容，允许出现多个 2、属性 1、 1、name ：控件的名称 2、size ：默认显示选项的数量，默认为1，为下拉列表，如果取值>1的话，则为滚动列表 3、multiple 设置多选，无值的属性 2、 1、value ：选项的值，提交给服务器用 2、selected ：默认被选中 5、其它标记 1、label 元素 作用：关联文本与表单控件的，点击文本时就如同点击表单控件一样 标记：文本 属性： 1、for 指定要关联的表单控件的ID值 2、为控件分组 分组标题 分组中的内容 3、浮动框架 1、作用 将其他页面导入到当前页面中来 2、语法 标记：<iframe></iframe> 属性： 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框，默认为1，则显示边框 不需要边框则设置为 0 3、width 4、height 练习： 创建一个 02-iframe 的网页，将 01-form.html 页面引入进来 ，适当调整宽度，高度，边框 6、新input元素 (HTML5) 1、电子邮件类型 作用：提交时会验证数据是否符合Email的规范 标记：<input type="email"> 2、搜索类型 作用：在文本框的基础上，提供了快速清除操作 标记：<input type="search"> 3、URL类型 作用：提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记：<input type="url"> 4、电话号码类型 作用：在移动端设备中，能展开 拨号键盘，在PC中无效 标记：<input type="tel"> 5、数字类型 作用：只能让用户输入 或 选择数字 标记：<input type="number"> 属性： 1、min ：当前控件接受的最小值 2、max ：当前控件接受的最大值 3、step ：微调数字时每次变化的长度,默认为1 6、范围类型 作用：提供一个滑块，让用户选择数字 标记：<input type="range"> 属性： 1、min ：当前控件的最小值 2、max ：当前控件的最大值 3、value ：设定初始值 7、颜色类型 作用：提供一个颜色拾取控件 语法：<input type="color"> 8、日期类型 作用：提供一个日期输入控件 标记：<input type="date"> 9、周类型 作用：提供一个日期控件，用于选取周 标记：<input type="week"> 10、月份类型 作用：选取月份控件 标记：<input type="month"> =============================
