html
概念：超文本标记语言 英语：HyperText Markup Language，简称：HTML
是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。
注意：对于中文网页需要使用 声明编码，否则会出现乱码。
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。
HTML文档的后缀名 ：.html .htm
主要标签含义：
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
注意：只有区域部分才会在浏览器中显示
HTML版本：
HTML(1991) ---> HTML+(1993) ----> HTML2.0(1995) ===>HTML3.2(1997) ===>HTML4.01(1999) ===> XHTML1.0(2000) ===>HTML5(2012) ===>XHTML5(2013)
<!DOCTYPE>声明
有助于浏览器中正确显示网页
网上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确的显示网页内容
注意：doctype声明不区分大小写 <!doctype html><!Doctype Html> 这几种方式都可以
通用声明：
HTML5：
HTML4.01:
XHTML1.0:
中文编码：
目前在大部分浏览器中，直接输出中文===中文乱码
解决：在头部将字符声明为UTF-8或者GBK
笔记：
1. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
HTML5 不是基于 SGML，因此不要求引用 DTD。
2. 对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
HTML编辑器：
VS Code：https://code.visualstudio.com/
Sublime Text：http://www.sublimetext.com/
VS Code:
Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统
且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。
HTML基础
HTML标题
HTML标题（heading）是通过
特点：标签的字号最大
HTML段落
HTML段落是通过标签来定义的
HTML链接
通过标签来定义 这是一个链接
在href属性中指定链接的地址
HTML图像
通过标签
注意：图像的名称和尺寸是以属性的形式提供的
HTML元素
HTML文档由HTML元素定义
HTML元素
开始标签（起始标签 opening tag) 元素内容 结束标签(闭合标签 closing tag)
这是一个段落
这是一个链接
换行
HTML元素语法
HTML元素以开始标签起始以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数HTML元素可拥有属性
嵌套的HTML元素
大多数HTML元素可以嵌套（HTML元素可以包含其他HTML元素）
HTML文档由相互嵌套的HTML元素构成
HTML文档实例（实例中包含了三个HTML元素）
段落一
实例解析：
元素：
以及一个结束标签
元素：
这是第一个段落
元素定义了HTML文档的主体
这个元素拥有一个开始标签以及一个结束标签
元素内容是另一个HTML元素（p元素）
元素：
段落一
元素定义了整个HTML文档
这个元素拥有一个开始标签以及一个结束标签
元素内容是另一个HTML元素（body元素）
注意：别忘记结束标签（虽然有时不写大多数浏览器也会正确的显示HTML）
HTML空元素
空元素：没有内容的元素
空元素是在开始标签中关闭的
如
换行标签
（
是没有关闭标签的空元素
在开始标签中添加斜杠 关闭空元素的正确方法
HTML提示：
使用小写标签
HTML 标签对大小写不敏感：
等同于
。许多网站都使用大写的 HTML 标签
菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
HTML属性
属性：是HTML元素提供的附加信息
HTML属性：
1.HTML元素可以设置属性
2.属性可以在元素中添加附件信息
3.属性一般描述于开始标签
4.属性总是以名称/值对的形式出现，比如：name='value'
属性实例：
1.HTML链接由标签定义
2.链接的地址在href属性中指定
这是一个链接
HTML属性常用引用属性值
1.属性值应该始终被包括在引号内
2.引号：单/双 如果属性值本身就含有双引号 则必须用单引号 name='John "ss"'
HTML提示：使用小写属性
属性和属性值对大小写不敏感不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML
要求使用小写属性
详见HTML 标签参考手册 更多标准属性说明： HTML 标准属性参考手册.
HTML 属性参考手册
适用于大多数HTML元素的属性
属性 描述
class 为HTML元素定义一个或多个类名（classname）（类名从样式文件引入）
id 定义元素的唯一id
style 规定元素的行内样式（inline style)
title 描述了元素的额外信息（作为工具条使用）
注意：1.class 属性可以多用 class=" " （引号里面可以填入多个class属性）
2.id 属性只能单独设置 id=" "（只能填写一个，多个无效）
HTML标题
HTML标题（在HTML文档中 标题很重要）
标题（Heading）是通过
总结：1.定义最大的标题 定义最小的标题
2.浏览器会自动地在标题的前后添加空行
3.搜索引擎使用标题为网页的结构和内容编制索引
因为用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构很重要
4.不要滥用标题标签，确保将HTML标题标签只用于标题，不要仅仅是为了生成
粗体或大号的文本而使用标题
5.用法：应该将用做主标题（最重要的）
其后是(次重要的)
再其次是
HTML水平线
标签在HTML页面中创建水平线
用途：可用于分隔内容
HTML注释
作用：可以将注释插入HTML代码中 提高其可读性 使代码更易被人理解
浏览器会忽略注释 页面不显示 检查可见
写法：开始括号之后（左边的括号）需要紧跟一个叹号，
结束括号之前（右边的括号）不需要
格式：
HTML段落
HTML段落
作用：将文档分割为若干段落
写法：段落通过
注意：1.浏览器会自动地在段落的前后添加空行（是块级元素)
2.不要忘记结束标签
HTML折行
作用：在不产生一个新段落的情况下换行（新行） 使用
标签
元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML输出-使用提醒
注意：我们无法确定HTML被显示的确切效果（屏幕的大小以及对窗口的调整都可能导致不同的结果）
对于HTML，无法通过在HTML代码中添加额外的空格或换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行
所有连续的空格或空行都会被算作一个空格
注意：HTML代码中的所有连续的空行（换行）也被显示为一个空格
区分：
是HTML写法 是 XHTML1.1 的写法, 也是 XML 写法
是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
早期发布的 HTML 规范当中，
与 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，
于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，
在逻辑上来讲等同于
....
（但是没有
这种写法），这样一来保证了较少的代码量，
二来保证了规范的严谨。
HTML文本格式化
HTML文本格式化
HTML格式化标签
粗体： bold
斜体： italic
通常标签 替换加粗标签 来使用, 替换 标签使用 但是含义不同
含义区别：
与 定义粗体或斜体文本
或者 意味着你要呈现的文本是重要的，所以要突出显示。
HTML 文本格式化标签
标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字
HTML "计算机输出" 标签
标签 描述
定义计算机代码
定义键盘码
定义计算机代码样本
定义变量
定义预格式文本
HTML 引文, 引用, 及标签定义
标签 描述
定义缩写
定义地址
定义文字方向
定义长的引用
定义短的引用语
定义引用、引证
定义一个定义项目。
HTML链接
HTML链接
HTML 使用超级链接与网络上的另一个文档相连
几乎可以在所有的网页中找到链接
点击链接可以从一张页面跳转到另一张页面
HTML超链接（链接）
1.HTML使用标签来设置超文本链接
2.超链接可以是一个字，一个词，或者一组词，或者一个img
3.可以点击该内容跳转到新的文档或者当前文档中的某个部分
4.当把鼠标指针移动到网页中的某个链接上时，箭头就会变成一只小手
5.在标签中使用href属性来描述链接的地址
6.默认情况下，链接将以以下形式出现在浏览器中
链接的默认样式如下：
1）未访问过 蓝色有下划线
2）访问过 紫色有下划线
3）点击时 红色有下划线
但是如果给它设置了css样式，展示样式会根据css的设定而显示
HTML链接语法
代码：链接文本 href属性描述了链接的地址 ‘链接文本’不一定是文本，
图片或其他HTML元素也可以成为链接
HTML链接的target属性
用处可以定义被链接的文档在何处显示
target :
_blank 在新窗口打开
HTML链接的id属性
id属性可用于创建在一个HTML文档书签标记
///////书签是不以任何特殊的方式显示 在HTML文档中是不显示的 对读者不可见
实例
1.在HTML文档中插入ID ：有用的提示部分
2.在HTML文档中创建一个链接到‘有用的提示部分’（id='tips'):访问有用的提示部分
3.或者从另一个页面创建一个链接到‘有用的提示部分’（id='tips')：访问有用的提示部分
基本的注意事项（有用的提示）
注意：始终将正斜杠添加到子文件夹
假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
一、图片链接
创建图片链接:
注意用把a和img用p包起来 给图片定义宽高 把a标签撑大
无边框的图片链接:
二、锚点链接（书签） 利用链接的id属性 在当前页面跳转到指定位置
跳 点这里跳
2pp
跳到 这里 id='pp'的这里
////////// 查看章节 4
章节 1
这边显示该章节的内容……
章节 2
这边显示该章节的内容……
章节 3
这边显示该章节的内容……
////////
章节 4
这边显示该章节的内容……
三、跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。
点击这里!
点击之后 当前页面被替换为https://www.runoob.com/网址对应页面
没有打开新窗口
点左箭头可以回退历史记录 到之前的页面
四、创建电子邮箱链接
eg1 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
这是另一个电子邮件链接：
发送邮件!
注意: 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
eg2:
这是一个电子邮件链接：
发送邮件
注意: 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
HTML头部
HTML
:定义了所有链接的URL 默认的url部分（链接目标地址） 默认的target
:提供了HTML文档的meta标记 （使用meta元素来描述HTML文档的描述、关键词、作者、字符集等
菜鸟教程(runoob.com)
HTML元素
1.元素包含了所有的头部标签元素
2.在head元素中你可以插入脚本（scripts），样式文件（css）,及各种meta信息
3.可以添加在头部区域的元素标签为：
？
HTML
1.
2.
3.
定义了浏览器工具栏的标题
当网页添加到收藏时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
实例：
<!DOCTYPE>
<
文档标题
文档内容。。。。。。。
HTML元素
:描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签
的默认链接（href="http://www.runoob.com/images/"） 网页打开方式：新窗口
HTML元素
1.定义了文档与外部资源之间的关系
2.通常用于链接到样式表
HTML元素
style 标签定义了HTML文档的样式文件引用地址
在style 元素中你也可以直接添加样式来渲染HTML文档
HTML元素
meta标签描述了一些基本数据
///////meta标签提供了元数据 也不显示在页面上 但会被浏览器解析
通常用于指定网页的描述 关键词 文件的最后修改时间 作者和其他元数据
元数据可以使用于浏览器（如何显示内容或重新加载页面）
搜索引擎(关键词)
或其他web服务
标签（使用实例）
1.为搜索引擎定义关键词
2.为网页定义描述内容
3.定义网页作者：
4.每30秒钟刷新当前页面：
HTML 元素
1.用于加载脚本文件 如:js
2.元素在以后的章节中会详细描述
HTML head 元素
标签 描述
head 定义了文档的信息
title 定义了文档的标题
base 定义了页面链接标签的默认链接地址
link 定义了一个文档和外部资源之间的关系
meta 定义了HTML文档中的元数据
script 定义了客户端的脚本文件
style 定义了HTML文档的样式文件
在head头部里加 就有了小icon 左侧的logo图标
head 标签和 header 标签的不同：
head用于定义文档头部，是所有头部元素的容器
head中的元素可以引用脚本，指示浏览器在哪里找到样式表、提供元信息等
header 标签用于定义文档的页眉（介绍信息）
HTML样式-CSS
HTML样式-CSS
css(Cascading Style Sheets)用于渲染HTML元素标签的样式
如何使用CSS
CSS是HTML4开始使用的是为了更好的渲染HTML元素而引入的
CSS可以通过以下方式添加到HTML中
1.内联样式：在HTML元素中使用‘style’属性
2.内部样式表：在HTML文档头部head区域使用元素来包含CSS
3.外部引用：使用外部CSS文件
最好的方式是通过外部引用CSS文件
内联样式
场景：当特殊的样式需要应用到个别元素时，就可以使用内联样式
使用方法：在相关的标签中使用样式属性
样式属性可以包含任何CSS属性
段落
HTML样式实例（背景颜色）
背景色属性（background-color)定义一个元素的背景颜色
早期：使用bgcolor:
现在：使用background-color:
早期背景色属性（background-color）是使用 bgcolor 属性定义。
HTML样式实例[字体(font-family)、字体颜色(color)、字体大小(font-size)]
一个标题
一个段落。
现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，
而不是使用标签。
HTML样式实例（文本对齐方式）
文字对齐属性（text-align）：指定文本的水平与垂直对齐方式
现在的：用text-align:center
居中对齐的标题
早期的：用center标签 这是一个标题
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表
可以在head部分通过标签定义内部样式表
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
使用外部样式表，你就可以通过更改一个文件来改变 整个站点的外观
HTML样式标签
style 定义文本样式
link 定义资源引用地址
已弃用的标签和属性
不建议使用的标签有: ,
,
不建议使用的属性: color 和 bgcolor.CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。
对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
实例：
只能使用"内联"方式
只能使用"内联"方式
把href的值换成一张图片的地址，就可以实现 点击文字跳转到图片
1.在a标签里加style属性在里面改颜色 可以改a标签字体颜色
2.在head头部的style里写也可以实现
HTML图像
1.插入图像 （在网页中显示图像）
2.从不同的位置插入图片 （本例演示如何将其他文件夹或服务器的图片显示到网页中
一个来自菜鸟教程的图像:
HTML图像 图像标签![]()
和源属性（src)
在HTML中 图像由![]()
标签定义
1.img 是空标签 它只包含属性，且没有闭合标签
2.在页面上显示图像，你需要使用源属性（src:source 值是图像的URL地址）
定义图像的语法是：
url:图片的存储位置
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段
1
2
效果就是：图片夹在两个段落之间
HTML图像 Alt属性
alt属性：用来为图像定义一串预备的可替换的文本
值： 替换文本属性的值是用户定义的 
场景： 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
此时 浏览器将显示这个替代性的文本而不是图像
为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息
并且对于那些使用纯文本浏览器的人来说是非常有用的
HTML图像 设置图像的高宽
height与width 用于设置图像的高宽
属性值默认单位是像素
注意：指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，
页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有
可能会破坏HTML页面的整体布局。
注意：慎用图片+路径不要错
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片
HTML 图像标签
![]()
定义图像
实例：
1.排列图片 在文字中排列图像
在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
这是一些文本。 这是一些文本。
align="middle"/"bottom"/"top"
CSS中对应的属性是：
2.浮动图像 使图片浮动至段落的左边或右边
在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
一个带图片的段落，图片浮动在这个文本的左边。
CSS中对应的属性是：
3.设置图像链接 将图片作为一个链接使用 就是把img标签用a包起来
创建图片链接:
无边框的图片链接: border="0"
4.、、、、、、、、创建图像映射 创建带有可点击区域的图像地图，其中每个区域都是一个超级链接
https://www.runoob.com/try/try.php?filename=tryhtml_areamap
HTML表格
HTML表格
HTML表格实例：
创建表格：
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
表格由
标签来定义。每个表格均有若干行（由 标签定义），
每行被分割为若干单元格（由
2.大多数浏览器的表头文本： 粗体居中
HTML表格标签
table 定义表格（表格根元素）
th 定义表格的表头（表头单元格）
tr 定义表格的行（表格行）
td 定义表格单元（表体单元格）
定义表格标题
定义表格列的组
col 定义用于表格列的属性
定义表格的页眉（表格头）
定义表格的主体（表格体）
定义表格的页脚（表格尾，一般可忽略该结构）表格结构语义标签：
1.
标签定义）。字母 td 指表格数据（table data），
即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格和边框属性
1.如果不定义边框属性，表格将不显示边框
2.使用边框属性来显示一个带有边框的表格
Row 1, cell 1
Row 1, cell 2
HTML表格表头
1.表格的表头：
：表格根元素。
2.：表格头。
3.：表格体。
4.：表格尾，一般可忽略该结构。
5.：表格行。
表格内容标签：
1. 这个标签就是放在三间房子里面的东西，每一个 就是表格一行。表格的每一行被分为一个个单元格。
每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。
用
表示数据的名称(标题) ,表示真正的数据内容。
表格三要素 table、tr、td 缺一不可。
：表头单元格。
2. ：表体单元格。
跨列：colspan
跨行：rowspan
单元格内边距：cellpadding
单元格外边距：cellspacing
col 和 colgroup 用于便捷定义表格指定列的样式。
tr 是行数，td 是单元格数，th 是标题性质的 td
确定 tr 和 td（th 同 td）的方法:
1、从上到下，最细分到几行便是几个 tr
2、如上是三种基本单元格形式。A 是基本单元格，其余的变种都是基本单元格合并而成。B 是合并上下单元格组合而成，
C 是合并左右单元格。合并后的 B 种单元格算到第二行第一个单元格中，C 种单元格算到第四行第一个单元格中（按上表
从上到下从左到右算），所以第一行 6 个 td，第二行 6 个 td，第三行 5 个 td，第四行 1 个，第五行 6 个 td，第六行 5 个 td。
合并后用 colspan 和 rowspan 来标示 B 和 C 变种单元格是横向还是纵向吃了几个单元格(算他自己）
3、第四种变种单元格是又横向又纵向合并，这个时候同时标示 rowspan 和 colspan（空格隔开）
合并后的单元格归属原则都是左上原则，即下归上，右归左，越往左上角越优先
HTML中的table可以大致分为三个部分：
thead ---------表格的页眉
tbody ---------表格的主体
tfoot ---------定义表格的页脚
thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。
标签常用属性：border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色
标签的常用属性:bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
标签的常用属性
bgcolor='#fff' 行的颜色
? align='right' 行内文字的水平对齐方式（left center right)
? valign='top' 行内文字的垂直对齐方式（top middle bottom)标签的常用属性
width='500' 单元格的宽度 设置后对当前一列的单元格都有影响
height='100' 单元格的高度 设置后对当前一行的单元格都有影响
bgcolor='fff' 单元格的背景色
align='right' 单元格文字的水平对齐方式（left center top)
rowspan='3' 合并垂直水平方向的单元格
colspan='3' 合并水平方向单元格
valign='top' 单元格文字的垂直对齐方式（middle bottom top)表格实例
1.无边框的表格 不写border属性 否则只要写就会有边框 就算border属性为空 也会默认有边框
只写
、 标签的常用属性:
width="500" 单元格的宽度，设置后对当前一列的单元格都有影响
height="100" 单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff" 单元格的背景色
align="right" 单元格文字的水平对齐方式 (参数left、center、right)
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top)
引号里的数字和颜色代码均可以更改。
表格三要素 table tr td
table标签常用属性
border=“1” 表格边框的宽度
bodercolor="#fff" 表格边框的颜色
cellspacing='5' 单元格之间的间距
width='500' 表格的总宽度
height="100" 表格的总高度
align bgcolor 这俩属性可能没了？、？、、、、、、、？
align='right' 表格整体对齐方式（参数有 left center right)
bgcolor ='#fff' 表格整体的背景色
Header Data
2.表格中的表头
水平标题（就是th独占一个tr） 垂直标题（就是每个tr里都有th td）
HeaderHeader
DataData
1
11
2
22
3.带标题的表格 标题：caption
加上这句代码Monthly savings 在table里tr外 写tr之前加
4.跨行（rowspan 跨行是合并行）或者跨列（colspan 跨列是合并列）
注意：跨行的话 相对应的下一行的位置的单元格td 要省去
跨列的话 就是合并列 同行 后面的列单元格省去 合并几列 colspan的值就是几 后面就省去n-1 个
单元格跨列
Header
Header
Data
Data
Data
单元格跨行
Header
Header
Header
Data
Data
Data
Data
Data
5.表格里的标签
就是td里面嵌套
ul 等标签
6.单元格边距(cellpadding) 格子里的内容到格子线的距离
cellpadding="10"
单元格边距
Header Header Data Data
7.单元格间距(cellspacing) 小格子之间的距离
cellspacing="10"
Header Header Data Data
HTML列表
HTML列表
1.有序列表 ol li 也是一列项目，列表项目使用数字进行标记。 有序列表始于 标签。每个列表项始于 - 标签。
2.无序列表 ul li 是一个项目的列表 此列项目使用粗体圆点（典型的小黑圆圈）进行标记
3.自定义列表 dl dt dd 不仅仅是一列项目 是项目及其注释的组合 自定义个列表一dl开始 每个自定义列表项以dt开始 每个自定义列表项的定义以dd开始
1.有序列表
- 1
- 1
- 1
2.无序列表
- 1
- 2
- 3
3.自定义列表
- 动物
- tuzi
- gouzi
- 水果
- li
- juzi
动物
tuzi
gouzi
水果
li
juzi
注意：列表项内部可以使用段落 换行符 图片 链接以及其他列表等等
HTML列表标签
ol 定义有序列表
ul 定义无序列表
li 定义列表项
dl 定义列表（自定义列表）
dt 自定义列表项目
dd 定义自定义列表项的描述
实例
1.不同类型的有序列表 type：A/a/I/i
ol有序数字编号列表 默认从1开始
给ol 加 type属性 可以定义有序列表的类型 但是type的属性值只有 type="" A a I i 不写type时 默认有序
1.编号列表 不加type
2.大写字母列表 type=“A”
3.小写字母列表 type="a"
4.罗马数字列表 type="I"
5.小写罗马数字列表 type="i"
编号列表
- eeee
- eeeerrr
- efffff
大写字母列表
- eeee
- eeeerrr
- efffff
小写字母列表
- eeee
- eeeerrr
- efffff
罗马数字列表
- eeee
- eeeerrr
- efffff
小写罗马数字列表
- eeee
- eeeerrr
- efffff
2.不同类型的无序列表 list-style-type: disc(实心圆点 不写这个属性也可以)/circle(圆圈)/square(实心正方形)
圆点列表
圆圈列表
正方形列表
1.圆点列表
默认圆点 或者加 style='list-style-type: disc;'
- 1
- 2
- 3
- 1
- 22
- 3
2.圆圈列表
- 1
- 22
- 3
3.实心正方形
- 1
- 22
- 3
3.嵌套列表 在li里再次嵌套ul li
- 1
- rr
- rr
- 3
4. 嵌套列表2 多层
5.自定义列表
- aa
- -aa
- aa
- -aa
aa
-aa
aa
-aa
6.my列表 综合
- food
- a
- b
- c
- d
- fruits
HTML区块
HTML 和
HTML可以通过div和span 将元素组合起来
HTML区块元素
大多数HTML元素被定义为块级元素或内联元素
块级元素在浏览器显示时 通常会以新行来开始（和结束）
实例：h1 p ul table
HTML内联元素
内联元素在显示时通常不会以新行开始
实例 b td a img
HTML
元素
1.1HTML 是块级元素 它可以用于 组合后其他HTML元素的容器
2.div 元素没有特定的含义 除此之外 由于它属于块级元素 浏览器会在其前后显示折行
3.如果与css一同使用 div元素可用于对大的内容块设置样式属性
4.div 元素的另一个常见的用途是文档布局
它取代了使用表格定义布局的老方法
用table元素进行文档布局不是表格的正确用法
table元素的作用是显示表格化的数据
HTMLspan 元素
span是内联元素 可以用作文本的容器
span元素也没有特定的含义
当与css一同使用时，span元素可用于为部分文本设置样式属性
HTML分组标签
div 定义了文档的区域 块级（block-level)
span 用来组合文档中的行内元素 内联元素（inline)
HTML布局
HTML布局
网页布局对改善网站的外观非常重要
网站布局
多数网站会把内容按排到多个列中（就像杂志或报纸那样）
多数网站可以使用 div 或 table 元素来创建多列
css用于对元素进行定位 或者为页面创建背景以及色彩丰富的外观
虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具
HTML布局 使用div元素
div元素是用于分组HTML元素的块级元素
HTML布局 使用表格
三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
主要的网页标题
Data
菜单
HTML
CSS
Javascript
html
内容
版权 © runoob.com
HTML布局 有用的提示
1.使用css最大的好处是，如果把css代码存放到外部样式表中，那么站点会更易于维护
通过编辑单一的文件，就可以改变所有页面的布局。
2.由于创建高级的布局非常耗时，使用模板是一个快速的选项
通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）
HTML布局标签
div 定义文档区块 块级（block-level)
span 定义span 用来组合文档中的行内元素
biaoti
zuo
zon
you
banquan
HTML表单
HTML表单用于收集不同类型的用户输入
HTML表单
1.表单是一个包含表单元素的区域
2.表单元素是允许用户在表单中输入内容
内容：
文本域（textarea)
下拉列表
单选框（radio-buttons)
复选框（checkboxes)
3.表单使用表单标签
来设置
HTML表单 输入元素
1.多数情况下被用到的表单标签是输入标签 input
2.输入类型由类型属性（type)定义的 大多数经常被用到的输入类型如下
1）文本域 text fields 当用户要在表单中键入字母、数字等内容时 就会用到文本域
总结：就是把type的值设为text number等
表单本身并不可见，在大多数浏览器中 文本域的默认宽度就是20个字符
2）密码字段 type值是password
密码字段字符不会明文显示，而是以星号或圆点替代
总结：看起来没啥区别 只是输入内容后 显示的是圆点
3）单选按钮 radio buttons type值是radio
这样只写type是不行的 选中再点 不可取消 而且 无法实现单选 都能选
解决：
方式：需要给两个input加同一个 name="result"的属性和值 加一个name属性 且属性值是相同的
场景：实现点字也可以选中，扩大用户点击范围
方式：用label把每个input 包一下
4）复选框 checkbox type值：checkbox 用户要从若干个给定的选择中选取一个或多个选项
5)提交按钮 submit button type值：submit
场景：当用户点击确认按钮时 表单的内容会被传送到另一个文件
表单的动作属性定义了目的文件的文件名
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
报错：
Refused to execute inline script because it violates the following Content Security Policy directive:
"default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-kPY6ovEPaw5y+RgWpejDaoJa2JT9tURMxvKvnhgv1XM='),
or a nonce ('nonce-...') is required to enable inline execution.
Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to execute inline script because it ...解决方法
这个错误提示主要是告诉我们，现在不可以用内联的script写法，也就是说，
js逻辑不可直接写在html页面的script标签中，而必须通过 引入的方式 才不报错，如
异常的原因：
Content-Security-Policy的默认配置是default-src 'self'。
解决方案：
添加script-src * 'unsafe-inline'，对于页面内部标签不进行安全验证。
开发Chrome扩展时，页面的popup.html中需要js的时候，直接将JS写在动态绑定JS事件会提示错误
解决办法：
在popup.html中引用外部的js文件动态绑定JS事件，例如：
复制代码代码如下:
test.js中：
复制代码代码如下:
var listbox = document.getElementById("showlist");
listbox.onclick=function(){
document.getElementById("player_sidebar").style.width = 100;
}
实例
1.创建文本字段（在HTML页面创建文本域 用户可以在文本域中写入文本）
2.创建密码字段（创建HTML的密码域）
HTML表单标签
form 定义用户输入的表单
input 定义输入域
textarea 定义了文本域（一个多行的输入控件）
定义了input元素的标签 一般为输入标题
fieldset 定义了一组相关的表单元素并使用外框包含起来
定义了fieldset 元素的标题
定义了下拉选项列表
定义选项组
定义下拉列表中的选项
button 定义一个点击按钮
datalist 指定一个预先定义的输入控件选项列表
keygen 定义了表单的密钥对生成器字段
output 定义一个计算结果
实例：
1.单选 加name value type值是radio
2.多选 加name value type值是checkbox
3.下拉列表 select 里 包着option select有name 属性 option 有value属性 给option加selected可设置默认选中该项 selected/selected=''/selected='selected'
4.预先下拉列表 就是加了selected
5.文本域 textarea 多行文本输入控件 默认可写入的字符数不受限制 maxlength
6.创建按钮 只写type值 就是一个小块 button按钮上的字 是value="提交" 定义的
7.带边框的表单（在数据周围绘制一个带标题的框）
用
8.带输入框和确认按钮的表单 向页面添加表单 包含两个输入框和一个确认按钮
9.带复选框的表单
10.带单选按钮的表单
11.从表单发送电子邮件
发送邮件到 someone@example.com:
重置按钮
定义重置按钮
点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值
表单中的单选按钮可以设置以下几个属性：value、name、checked
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。
如何使用隐藏在下拉列表中的默认空白值实现SELECT标记
只需使用禁用和/或隐藏属性：
selected：使此选项成为默认选项。
disabled：使此选项无法点击。
style="display:none"：使此选项不在旧版浏览器中显示。
hidden：使此选项不显示在下拉列表中。
HTML框架
HTML框架
通过使用框架 可以在同一个浏览器窗口中显示不止一个页面
iframe 设置高度与宽度
1.单位默认像素 可以省略单位直接写数字 也可以用百分比
2.显示的区域 即使宽为100% 仍带有滚动条
3.注意 src 的地址不要找不到
height和width属性用来定义iframe标签的高度与宽度
属性默认以像素为单位（但是你可以按其指定比例显示 如80%）
一些旧的浏览器不支持 iframe。如果浏览器不支持 iframes 则不会显示。
//把html文件放上去 显示的是渲染后的页面
//把图片的路径放上去 区域就显示对应图片
iframe移除边框 frameborder:0/其他 frameborder="0"时移除iframe的边框 默认是有滚动条的那种 如果换成1 则是线边框
使用iframe显示目标链接页面
1.iframe可以显示一个目标链接的页面
2.目标链接的属性必须使用iframe的属性
注意： 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。
如果这样写 会在一个新窗口打开 href="链接例子.html"这个文件渲染的内容
如果给加上name="iframe_a" 就会把原来区域的内容替换成目标链接里的内容
注意：以上a标签的target属性名的值都是名为 iframe_a 的 iframe 框架
同时iframe加name标签 name="iframe_a"
这样在点击链接时页面才会显示在 iframe框架中。
HTML iframe标签
iframe 定义一个内联的iframe
HTML颜色
HTML颜色
HTML颜色由红绿蓝混合
颜色值
1.十六进制符合定义 红绿蓝（RGB）
2.值： 0（#00） - 255（#FF）
3. 黑 #000000 rgb(0,0,0)
红 #FF0000 rgb(255,0,0)
绿 #00FF00 rgb(0,255,0)
蓝 #0000FF rgb(0,0,255)
RGBA:（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。
background:rgba(255,0,0,0.5)
1.相对于rgb 使用rgba可以实现设置颜色透明度的功能 0.5表示透明度 范围0-1 0表示全透明
通常省略为 .5 ====>background:rgba(255,0,0,.5)
2.小数值越大 越不透明
3.在标签内 用 background-color
HTML颜色名
目前所有浏览器都支持以下颜色名。
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）
17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色
HTML 颜色值
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
HTML 脚本
HTML 脚本
js使HTML页面具有更强的动态和交互性
HTML标签
标签用于定义客户端脚本 比如js
元素既可以包含脚本语句 也可以通过src属性指向外部脚本文件
js最常用于图片操作 表单验证以及内容动态更新
HTML脚本标签
script 定义了客户端脚本
浙公网安备 33010602011771号