html
概念：超文本标记语言 英语：HyperText Markup Language，简称：HTML
是一种用于创建网页的标准标记语言。HTML 运行在浏览器上，由浏览器来解析。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
HTML文档的后缀名 ：.html .htm
主要标签含义：
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML标签：
HTML标记标签通常被称为HTML标签 HTML tag
1.由尖括号包围的关键词 如<html>
2.成对出现 如<b></b>
3.标签对中的第一个标签 ---开始标签（开放标签）
第二个标签 ---结束标签（闭合标签）
4.开始和结束标签也被称为开放标签和闭合标签
格式：<标签>内容</标签>
HTML元素：
通常 ‘HTML标签’和‘HTML元素’描述同样的意思
但是严格来讲-------一个HTML元素包含了开始标签与结束标签
HTML元素：
<p>这是一个段落</p>
Web浏览器：
Web浏览器（如谷歌浏览器，Internet Explorer,Firefox,Safari)
用于读取HTML文件 并将其作为网友显示
注意：浏览器并不是直接显示的HTML标签
但是可以使用标签来决定如何展示HTML页面的内容给用户
HTML网页结构
如下可视化的HTML页面结构
<HTML>
<<head>
<meta charset="utf-8"/>
<title>页面标题</title>
</head>
<!-- 页面可视区域开始-->
<body>
<h1></h1>
<p></p>
</body>
<!-- 页面可视区域结束-->
</HTML>
注意：只有<body>区域部分才会在浏览器中显示
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><!doctype html><!Doctype Html> 这几种方式都可以
通用声明：
HTML5： <!DOCTYPE html>
HTML4.01:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
XHTML1.0:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
中文编码：
目前在大部分浏览器中，直接输出中文===中文乱码
解决：在头部将字符声明为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. 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="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）是通过<h1></h1> - <h6></h6> 标签来定义的
特点：<h1></h1>标签的字号最大
HTML段落
HTML段落是通过标签<p></p>来定义的
HTML链接
通过标签<a></a>来定义 <a href="https://www.runoob.com">这是一个链接</a>
在href属性中指定链接的地址
HTML图像
通过标签<img>来定义的 <img loading='lazy' src='/images/logo.png' width='258' height='39' />
注意：图像的名称和尺寸是以属性的形式提供的
HTML元素
HTML文档由HTML元素定义
HTML元素
开始标签（起始标签 opening tag) 元素内容 结束标签(闭合标签 closing tag)
<p> 这是一个段落 </p>
<a href='default.htm'> 这是一个链接 </a>
<br> 换行
HTML元素语法
HTML元素以开始标签起始以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数HTML元素可拥有属性
嵌套的HTML元素
大多数HTML元素可以嵌套（HTML元素可以包含其他HTML元素）
HTML文档由相互嵌套的HTML元素构成
HTML文档实例（实例中包含了三个HTML元素）
<!DOCTYPE html>
<HTML>
<body>
<p>段落一</p>
</body>
</HTML>
实例解析：
<p>元素：
<p></p>元素定义了HTML文档中的一个段落，该元素拥有一个开始标签<p>
以及一个结束标签</p> 元素内容是：这是第一个段落
<body>元素：
<body>
<p>这是第一个段落</p>
</body>
<body>元素定义了HTML文档的主体
这个元素拥有一个开始标签<body>以及一个结束标签</body>
元素内容是另一个HTML元素（p元素）
<html>元素：
<HTML>
<body>
<p>段落一</p>
</body>
</HTML>
<html>元素定义了整个HTML文档
这个元素拥有一个开始标签<HTML>以及一个结束标签</HTML>
元素内容是另一个HTML元素（body元素）
注意：别忘记结束标签（虽然有时不写大多数浏览器也会正确的显示HTML）
HTML空元素
空元素：没有内容的元素
空元素是在开始标签中关闭的
如<br /> 换行标签
（<br>是没有关闭标签的空元素
<br /> 在开始标签中添加斜杠 关闭空元素的正确方法
HTML提示：
使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签
菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
HTML属性
属性：是HTML元素提供的附加信息
HTML属性：
1.HTML元素可以设置属性
2.属性可以在元素中添加附件信息
3.属性一般描述于开始标签
4.属性总是以名称/值对的形式出现，比如：name='value'
属性实例：
1.HTML链接由<a>标签定义
2.链接的地址在href属性中指定
<a href='http://www.runoob.com'>这是一个链接</a>
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）是通过<h1></h1>-<h6></h6>标签进行定义的
总结：1.<h1></h1>定义最大的标题 <h6></h6>定义最小的标题
2.浏览器会自动地在标题的前后添加空行
3.搜索引擎使用标题为网页的结构和内容编制索引
因为用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构很重要
4.不要滥用标题标签，确保将HTML标题标签只用于标题，不要仅仅是为了生成
粗体或大号的文本而使用标题
5.用法：应该将<h1></h1>用做主标题（最重要的）
其后是<h2></h2>(次重要的)
再其次是<h3></h3>
HTML水平线
<hr >标签在HTML页面中创建水平线
用途：可用于分隔内容
HTML注释
作用：可以将注释插入HTML代码中 提高其可读性 使代码更易被人理解
浏览器会忽略注释 页面不显示 检查可见
写法：开始括号之后（左边的括号）需要紧跟一个叹号，
结束括号之前（右边的括号）不需要
格式：<!-- 这是一个注释 -->
HTML段落
HTML段落
作用：将文档分割为若干段落
写法：段落通过<p></p>标签定义
注意：1.浏览器会自动地在段落的前后添加空行（</p>是块级元素)
2.不要忘记结束标签
HTML折行
作用：在不产生一个新段落的情况下换行（新行） 使用<br />标签
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
HTML输出-使用提醒
注意：我们无法确定HTML被显示的确切效果（屏幕的大小以及对窗口的调整都可能导致不同的结果）
对于HTML，无法通过在HTML代码中添加额外的空格或换行来改变输出的效果
当显示页面时，浏览器会移除源代码中多余的空格和空行
所有连续的空格或空行都会被算作一个空格
注意：HTML代码中的所有连续的空行（换行）也被显示为一个空格
区分：<br> <br/> <br />
<br>是HTML写法 是 XHTML1.1 的写法, 也是 XML 写法
<br/> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。HTML5 因为兼容 XHTML，所以三种写法都可以使用。
早期发布的 HTML 规范当中，<br> 与 <img> 等元素是不用封闭自身的，但是这种元素造成了 HTML 规范的不严谨，
于是在之后发布的 XHTML 语言中，参考了更为严谨的 XML 规范，在这些不用自身封闭的元素后加 / 来表示自行封闭，
在逻辑上来讲等同于<br>....</br>（但是没有 </br> 这种写法），这样一来保证了较少的代码量，
二来保证了规范的严谨。
HTML文本格式化
HTML文本格式化
HTML格式化标签
粗体：<b></b> bold
斜体：<i></i> italic
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用 但是含义不同
含义区别：
<b> 与<i> 定义粗体或斜体文本
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。
HTML 文本格式化标签
标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
HTML "计算机输出" 标签
标签 描述
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
HTML 引文, 引用, 及标签定义
标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。
HTML链接
HTML链接
HTML 使用超级链接与网络上的另一个文档相连
几乎可以在所有的网页中找到链接
点击链接可以从一张页面跳转到另一张页面
HTML超链接（链接）
1.HTML使用标签<a></a>来设置超文本链接
2.超链接可以是一个字，一个词，或者一组词，或者一个img
3.可以点击该内容跳转到新的文档或者当前文档中的某个部分
4.当把鼠标指针移动到网页中的某个链接上时，箭头就会变成一只小手
5.在标签<a></a>中使用href属性来描述链接的地址
6.默认情况下，链接将以以下形式出现在浏览器中
链接的默认样式如下：
1）未访问过 蓝色有下划线
2）访问过 紫色有下划线
3）点击时 红色有下划线
但是如果给它设置了css样式，展示样式会根据css的设定而显示
HTML链接语法
代码：<a href='url'>链接文本</a> href属性描述了链接的地址 ‘链接文本’不一定是文本，
图片或其他HTML元素也可以成为链接
HTML链接的target属性
用处可以定义被链接的文档在何处显示
target :
_blank 在新窗口打开
HTML链接的id属性
id属性可用于创建在一个HTML文档书签标记
///////书签是不以任何特殊的方式显示 在HTML文档中是不显示的 对读者不可见
实例
1.在HTML文档中插入ID ：<a id= 'tips'>有用的提示部分</a>
2.在HTML文档中创建一个链接到‘有用的提示部分’（id='tips'):<a href='#tips'>访问有用的提示部分</a>
3.或者从另一个页面创建一个链接到‘有用的提示部分’（id='tips')：<a href='https://www.runoob.com/html-links.html#tips'>访问有用的提示部分</a>
基本的注意事项（有用的提示）
注意：始终将正斜杠添加到子文件夹
假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
一、图片链接
<p>创建图片链接:
注意用把a和img用p包起来 给图片定义宽高 把a标签撑大
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
二、锚点链接（书签） 利用链接的id属性 在当前页面跳转到指定位置
<a href="#pp">跳</a> 点这里跳
<p id="pp">2pp</p> 跳到 这里 id='pp'的这里
<p>
////////// <a href="#C4">查看章节 4</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
////////<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
三、跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。
<a href="//www.runoob.com/" target="_top">点击这里!</a>
点击之后 当前页面被替换为https://www.runoob.com/网址对应页面
没有打开新窗口
点左箭头可以回退历史记录 到之前的页面
四、创建电子邮箱链接
eg1 本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<p>
<b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>
eg2:<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>
<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>
HTML头部
HTML<head>
<title></title> :定义了HTML文档的标题
<base> :定义了所有链接的URL 默认的url部分（链接目标地址） 默认的target
<meta> :提供了HTML文档的meta标记 （使用meta元素来描述HTML文档的描述、关键词、作者、字符集等
<title>菜鸟教程(runoob.com)</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
HTML<head></head>元素
1.<head></head>元素包含了所有的头部标签元素
2.在head元素中你可以插入脚本（scripts），样式文件（css）,及各种meta信息
3.可以添加在头部区域的元素标签为：<title></title>
<style></style>
<meta>
<link />
<script></script>
<noscript></noscript> ？
<base href="" target="" />
HTML<title></title>元素
1.<title></title>标签定义了不同文档的标题
2.<title></title>在HTML/XHTML文档中是必须的
3.<title></title>元素：
定义了浏览器工具栏的标题
当网页添加到收藏时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
实例：
<!DOCTYPE>
<html>
<<head>
<meta charset="utf-8"/>
<title>文档标题</title>
</head>
<body>
文档内容。。。。。。。
</body>
</html>
HTML<base>元素
<base>:描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签
的默认链接（href="http://www.runoob.com/images/"） 网页打开方式：新窗口
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
HTML<link>元素
<link rel="stylesheet" type="text/css" href=""/>
1.定义了文档与外部资源之间的关系
2.通常用于链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="样式文件名"/>
</head>
HTML<style></style>元素
style 标签定义了HTML文档的样式文件引用地址
在style 元素中你也可以直接添加样式来渲染HTML文档
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML<meta />元素
meta标签描述了一些基本数据
///////meta标签提供了元数据 也不显示在页面上 但会被浏览器解析
通常用于指定网页的描述 关键词 文件的最后修改时间 作者和其他元数据
元数据可以使用于浏览器（如何显示内容或重新加载页面）
搜索引擎(关键词)
或其他web服务
<meta>标签（使用实例）
1.为搜索引擎定义关键词
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript"/>
2.为网页定义描述内容
<meta name="description" content="免费 web&编程 教程"/>
3.定义网页作者：
<meta name="author" content="moumou"/>
4.每30秒钟刷新当前页面：
<meta http-equiv="refresh" content="30"/>
HTML<script></script> 元素
1.用于加载脚本文件 如:js
2.元素在以后的章节中会详细描述
HTML head 元素
标签 描述
head 定义了文档的信息
title 定义了文档的标题
base 定义了页面链接标签的默认链接地址
link 定义了一个文档和外部资源之间的关系
meta 定义了HTML文档中的元数据
script 定义了客户端的脚本文件
style 定义了HTML文档的样式文件
在head头部里加 <link rel="shortcut icon" href="wei.png"> 就有了小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区域使用<style></style>元素来包含CSS
3.外部引用：使用外部CSS文件
最好的方式是通过外部引用CSS文件
内联样式
场景：当特殊的样式需要应用到个别元素时，就可以使用内联样式
使用方法：在相关的标签中使用样式属性
样式属性可以包含任何CSS属性
<p style='color:blue;margin-left:20px;'>段落</p>
HTML样式实例（背景颜色）
背景色属性（background-color)定义一个元素的背景颜色
早期：使用bgcolor: <body bgcolor="yellow">
现在：使用background-color: <body style="background-color:yellow;">
早期背景色属性（background-color）是使用 bgcolor 属性定义。
HTML样式实例[字体(font-family)、字体颜色(color)、字体大小(font-size)]
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，
而不是使用<font>标签。
HTML样式实例（文本对齐方式）
文字对齐属性（text-align）：指定文本的水平与垂直对齐方式
现在的：用text-align:center <h1 style="text-align:center;">居中对齐的标题</h1>
早期的：用center标签 <center><h1>这是一个标题</h1></center>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表
可以在head部分通过<style></style>标签定义内部样式表
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择
使用外部样式表，你就可以通过更改一个文件来改变 整个站点的外观
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML样式标签
style 定义文本样式
link 定义资源引用地址
已弃用的标签和属性
不建议使用的标签有: <font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
CSS修饰标签的样式，有 "内联" 和 "外引" 两种方式。
对于大部分标签，以上两种方法均可，且修改父级标签，子级标签特性也会改变。但某些标签确无法通过修改父级标签来改变子级标签特性，如a标签，修改其颜色特性，必须直接修改 a 标签的特性才可。
实例：
<a href="#" style="color:red;" rel="nofollow">只能使用"内联"方式</a>
<a href="wei.png" style="color:green;" rel="nofollow">只能使用"内联"方式</a>
把href的值换成一张图片的地址，就可以实现 点击文字跳转到图片
1.在a标签里加style属性在里面改颜色 可以改a标签字体颜色
2.在head头部的style里写也可以实现
<style type="text/css">
a{
color:blue ;
}
</style>
HTML图像
1.插入图像 （在网页中显示图像）
<img src="smiley.gif" alt="Smiley face" width="32" height="32">
2.从不同的位置插入图片 （本例演示如何将其他文件夹或服务器的图片显示到网页中
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
<img src="//www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69">
HTML图像 图像标签<img>和源属性（src)
在HTML中 图像由<img>标签定义
1.img 是空标签 它只包含属性，且没有闭合标签
2.在页面上显示图像，你需要使用源属性（src:source 值是图像的URL地址）
定义图像的语法是：
<img src="url" alt='some_text' >
url:图片的存储位置
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段
<p>1</p>
<img src="wei.png" >
<p>2</p>
效果就是：图片夹在两个段落之间
HTML图像 Alt属性
alt属性：用来为图像定义一串预备的可替换的文本
值： 替换文本属性的值是用户定义的 <img src='boat.gif' alt='Big Boat' >
场景： 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
此时 浏览器将显示这个替代性的文本而不是图像
为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息
并且对于那些使用纯文本浏览器的人来说是非常有用的
HTML图像 设置图像的高宽
height与width 用于设置图像的高宽
属性值默认单位是像素
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
注意：指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，
页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有
可能会破坏HTML页面的整体布局。
注意：慎用图片+路径不要错
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片
HTML 图像标签
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域
实例：
1.排列图片 在文字中排列图像
在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>
align="middle"/"bottom"/"top"
CSS中对应的属性是：
2.浮动图像 使图片浮动至段落的左边或右边
在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>
CSS中对应的属性是：
3.设置图像链接 将图片作为一个链接使用 就是把img标签用a包起来
<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接: border="0"
4.、、、、、、、、创建图像映射 创建带有可点击区域的图像地图，其中每个区域都是一个超级链接
https://www.runoob.com/try/try.php?filename=tryhtml_areamap
HTML表格
HTML表格
HTML表格实例：
创建表格：
每个表格从一个 table 标签开始。
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），
每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），
即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML表格和边框属性
1.如果不定义边框属性，表格将不显示边框
2.使用边框属性来显示一个带有边框的表格
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML表格表头
1.表格的表头：<th></th>
2.大多数浏览器的表头文本： 粗体居中
HTML表格标签
table 定义表格（表格根元素）
th 定义表格的表头（表头单元格）
tr 定义表格的行（表格行）
td 定义表格单元（表体单元格）
<caption></caption> 定义表格标题
<colgroup></colgroup> 定义表格列的组
col 定义用于表格列的属性
<thead></thead> 定义表格的页眉（表格头）
<tbody></tbody> 定义表格的主体（表格体）
<tfoot> </tfoot> 定义表格的页脚（表格尾，一般可忽略该结构）
表格结构语义标签：
1.<table>：表格根元素。
2.<thead>：表格头。
3.<tbody>：表格体。
4.<tfoot>：表格尾，一般可忽略该结构。
5.<tr>：表格行。
表格内容标签：
1.<th>：表头单元格。
2.<td>：表体单元格。
跨列：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 相当于三间房子，每间房子都可以用来放东西。
<tr> </tr> 这个标签就是放在三间房子里面的东西，每一个 <tr> </tr> 就是表格一行。
表格的每一行被分为一个个单元格。
每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。
用 <th></th> 表示数据的名称(标题) ,
<td></td>
表示真正的数据内容。
表格三要素 table、tr、td 缺一不可。
<table> 标签常用属性：
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜色
cellspacing="5" 单元格之间的间距
width="500" 表格的总宽度
height="100" 表格的总高度
align="right" 表格整体对齐方式 (参数有 left、center、right)
bgcolor="#fff" 表格整体的背景色
<tr> 标签的常用属性:
bgcolor="#fff" 行的颜色
align="right" 行内文字的水平对齐方式 (参数有left、center、right)
valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)
<td>、<th> 标签的常用属性:
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' 表格整体的背景色
<tr></tr>标签的常用属性
bgcolor='#fff' 行的颜色
? align='right' 行内文字的水平对齐方式（left center right)
? valign='top' 行内文字的垂直对齐方式（top middle bottom)
<td></td> <th></th>标签的常用属性
width='500' 单元格的宽度 设置后对当前一列的单元格都有影响
height='100' 单元格的高度 设置后对当前一行的单元格都有影响
bgcolor='fff' 单元格的背景色
align='right' 单元格文字的水平对齐方式（left center top)
rowspan='3' 合并垂直水平方向的单元格
colspan='3' 合并水平方向单元格
valign='top' 单元格文字的垂直对齐方式（middle bottom top)
表格实例
1.无边框的表格 不写border属性 否则只要写就会有边框 就算border属性为空 也会默认有边框
只写<table>
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
2.表格中的表头
水平标题（就是th独占一个tr） 垂直标题（就是每个tr里都有th td）
<!-- 水平 -->
<tr><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td></tr>
<!-- 垂直 -->
<tr>
<th>1</th>
<td>11</td>
</tr>
<tr>
<th>2</th>
<td>22</td>
</tr>
3.带标题的表格 标题：caption
加上这句代码<caption>Monthly savings</caption> 在table里tr外 写tr之前加
4.跨行（rowspan 跨行是合并行）或者跨列（colspan 跨列是合并列）
注意：跨行的话 相对应的下一行的位置的单元格td 要省去
跨列的话 就是合并列 同行 后面的列单元格省去 合并几列 colspan的值就是几 后面就省去n-1 个<th></th>
<h4>单元格跨列</h4>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>Header</th>
<th colspan="2">Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<h4>单元格跨行</h4>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td rowspan="2">Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
5.表格里的标签
就是td里面嵌套<p></p> ul <li></li> 等标签
6.单元格边距(cellpadding) 格子里的内容到格子线的距离
cellpadding="10"
<h4>单元格边距</h4>
<table border="1" cellspacing="10" cellpadding="10">
<tr><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
7.单元格间距(cellspacing) 小格子之间的距离
cellspacing="10"
<table border="1" cellspacing="10" cellpadding="10">
<tr><th>Header</th><th>Header</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</table>
HTML列表
HTML列表
1.有序列表 ol li 也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
2.无序列表 ul li 是一个项目的列表 此列项目使用粗体圆点（典型的小黑圆圈）进行标记
3.自定义列表 dl dt dd 不仅仅是一列项目 是项目及其注释的组合 自定义个列表一dl开始 每个自定义列表项以dt开始 每个自定义列表项的定义以dd开始
1.有序列表
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
2.无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
3.自定义列表
<dl>
<dt>动物</dt>
<dd>tuzi</dd>
<dd>gouzi</dd>
<dt>水果</dt>
<dd>li</dd>
<dd>juzi</dd>
</dl>
动物
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"
<h4>编号列表</h4>
<ol>
<li>eeee</li>
<li>eeeerrr</li>
<li>efffff</li>
</ol>
<h4>大写字母列表</h4>
<ol type="A">
<li>eeee</li>
<li>eeeerrr</li>
<li>efffff</li>
</ol>
<h4>小写字母列表</h4>
<ol type="a">
<li>eeee</li>
<li>eeeerrr</li>
<li>efffff</li>
</ol>
<h4>罗马数字列表</h4>
<ol type="I">
<li>eeee</li>
<li>eeeerrr</li>
<li>efffff</li>
</ol>
<h4>小写罗马数字列表</h4>
<ol type="i">
<li>eeee</li>
<li>eeeerrr</li>
<li>efffff</li>
</ol>
2.不同类型的无序列表 list-style-type: disc(实心圆点 不写这个属性也可以)/circle(圆圈)/square(实心正方形)
圆点列表
圆圈列表
正方形列表
1.圆点列表
默认圆点 或者加 style='list-style-type: disc;'
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul style='list-style-type: disc;'>
<li>1</li>
<li>22</li>
<li>3</li>
</ul>
2.圆圈列表
<ul style='list-style-type: circle;'>
<li>1</li>
<li>22</li>
<li>3</li>
</ul>
3.实心正方形
<ul style='list-style-type: square;'>
<li>1</li>
<li>22</li>
<li>3</li>
</ul>
3.嵌套列表 在li里再次嵌套ul li
<ul style='list-style-type: square;'>
<li>1</li>
<li>
<ul>
<li>rr</li>
<li>rr</li>
</ul>
</li>
<li>3</li>
</ul>
4. 嵌套列表2 多层
5.自定义列表
<dl>
<dt>aa</dt>
<dd>-aa</dd>
</dl>
<dl>
<dt>aa</dt>
<dd>-aa</dd>
</dl>
aa
-aa
aa
-aa
6.my列表 综合
<table border="" cellspacing="" cellpadding="">
<tr>
<td>
<ul>
<li>food</li>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
<li>fruits</li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</ul>
</td>
</tr>
</table>
HTML区块
HTML <div id=""></div> 和 <span id=""></span>
HTML可以通过div和span 将元素组合起来
HTML区块元素
大多数HTML元素被定义为块级元素或内联元素
块级元素在浏览器显示时 通常会以新行来开始（和结束）
实例：h1 p ul table
HTML内联元素
内联元素在显示时通常不会以新行开始
实例 b td a img
HTML <div></div>元素
1.1HTML <div id=""></div>是块级元素 它可以用于 组合后其他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 属性来横跨两列：
<table cellspacing="" cellpadding="" width="500" border="0">
<tr>
<td colspan="2" style="background-color: #FFFF00;">Data</td>
<h1>主要的网页标题</h1>
</tr>
<tr>
<td style="background-color: antiquewhite;">
<b>菜单</b><br>
HTML<br>
CSS<br>
Javascript
html
</td>
<td style="background-color: #FFFF00;height: 200px;width: 400px;">
内容
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
HTML布局 有用的提示
1.使用css最大的好处是，如果把css代码存放到外部样式表中，那么站点会更易于维护
通过编辑单一的文件，就可以改变所有页面的布局。
2.由于创建高级的布局非常耗时，使用模板是一个快速的选项
通过搜索引擎可以找到很多免费的网站模板（可以使用这些预先构建好的网站布局，并优化它们）
HTML布局标签
div 定义文档区块 块级（block-level)
span 定义span 用来组合文档中的行内元素
<div id="" style="width: 500px;" class="box">
<div id="" class="header" style="background-color: #0000FF;">
<h1 style="text-align: center;margin-bottom: 0;">biaoti</h1> <!-- 这里如果不加margin-bottom:0 会有空隙-->
</div>
<div id="" class="zuo" style="background-color: aqua;width: 100px;float: left;height: 200px;">
zuo
</div>
<div id="" class="zon" style="background-color: fuchsia;width: 200px;float: left;height: 200px;">
zon
</div>
<div id="" class="you" style="background-color: forestgreen;width: 200px;float: right;height: 200px;">
you
</div>
<div id="" class='ft' style="background-color: #FFFF00;height: 20px;clear: both;text-align: center;">
banquan
</div>
</div>
HTML表单
HTML表单用于收集不同类型的用户输入
HTML表单
1.表单是一个包含表单元素的区域
2.表单元素是允许用户在表单中输入内容
内容：
文本域（textarea)
下拉列表
单选框（radio-buttons)
复选框（checkboxes)
3.表单使用表单标签<form></form>来设置
HTML表单 输入元素
1.多数情况下被用到的表单标签是输入标签 input
2.输入类型由类型属性（type)定义的 大多数经常被用到的输入类型如下
1）文本域 text fields <input type="text" name="" id="" value="" /> 当用户要在表单中键入字母、数字等内容时 就会用到文本域
<form action="" method="">
姓名：<input type="text" name="" id="" value="" /> <br>
密码：<input type="number" name="" id="" value="" />
</form>
总结：就是把type的值设为text number等
表单本身并不可见，在大多数浏览器中 文本域的默认宽度就是20个字符
2）密码字段 type值是password
密码字段字符不会明文显示，而是以星号或圆点替代
<form action="" method="">
密码：<input type="password" name="" />
</form>
总结：看起来没啥区别 只是输入内容后 显示的是圆点
3）单选按钮 radio buttons type值是radio
<form action="" method="post">
<input type="radio" value=""/>A <br>
<input type="radio" value=""/>B
</form>
这样只写type是不行的 选中再点 不可取消 而且 无法实现单选 都能选
<form action="" method="post">
<input type="radio" value="A" name="result"/>A <br>
<input type="radio" value="B" name="result"/>B
</form>
解决：
方式：需要给两个input加同一个 name="result"的属性和值 加一个name属性 且属性值是相同的
场景：实现点字也可以选中，扩大用户点击范围
方式：用label把每个input 包一下
<form action="" method="post">
<label>
<input type="radio" value="A" name="result"/>A <br>
</label>
<label>
<input type="radio" value="B" name="result"/>B
</label>
</form>
4）复选框 checkbox type值：checkbox 用户要从若干个给定的选择中选取一个或多个选项
<form action="" method="">
<input type="checkbox" name="a" id="" value="b" />b <br/>
<input type="checkbox" name="a" id="" value="c" />c
</form>
5)提交按钮 submit button type值：submit
场景：当用户点击确认按钮时 表单的内容会被传送到另一个文件
表单的动作属性定义了目的文件的文件名
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
<form action="html.html" name='input' method="post">
username:<input type="text" name="user" id="" value="" />
<input type="submit" value="submit"/>
</form>
报错：
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事件，例如：
复制代码代码如下:
<script type="text/javascript" charset="utf-8" src='test.js'></script>
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 定义了文本域（一个多行的输入控件）
<label></label> 定义了input元素的标签 一般为输入标题
fieldset 定义了一组相关的表单元素并使用外框包含起来
<legend></legend> 定义了fieldset 元素的标题
<select></select> 定义了下拉选项列表
<optgroup></optgroup> 定义选项组
<option value =""></option> 定义下拉列表中的选项
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.创建按钮 <input type="button" name="" id="" value="" /> 只写type值 就是一个小块 button按钮上的字 是value="提交" 定义的
7.带边框的表单（在数据周围绘制一个带标题的框）
用<fieldset id="">
<legend>表的标题</legend>
</fieldset>
<form action="" method="">
<fieldset id=""> //表单项的外面有条线围住了
<legend>表:</legend> //在线中间放表的标题
name:<input type="text" name="" id="" value="" />
password:<input type="password" name="" />
</fieldset>
</form>
8.带输入框和确认按钮的表单 向页面添加表单 包含两个输入框和一个确认按钮
<form action="html.html" method=""> //这里应该放服务器的地址
name:<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
9.带复选框的表单
<form action="demo-form.php" method="get">
<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
<input type="submit" value="提交">
</form>
10.带单选按钮的表单
<form action="demo-form.php" method="get">
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
<input type="submit" value="提交">
</form>
11.从表单发送电子邮件
<h3>发送邮件到 someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
重置按钮
<input type="reset" value="重置">
<input type="reset">定义重置按钮
<input type="reset" name="button" id="button" value="重置">
点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值
<textarea rows="10" cols="20" maxlength="">
aaaaa
</textarea>
<form action="" method="">
<select name="a" >
<option value ="A">A</option>
<option value ="B">B</option>
<option value ="C" selected>C</option>
<option value ="D">D</option>
</select>
</form>
表单中的单选按钮可以设置以下几个属性：value、name、checked
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。
如何使用隐藏在下拉列表中的默认空白值实现SELECT标记
只需使用禁用和/或隐藏属性：
<option selected disabled hidden style="display: none" value=""></option>
selected：使此选项成为默认选项。
disabled：使此选项无法点击。
style="display:none"：使此选项不在旧版浏览器中显示。
hidden：使此选项不显示在下拉列表中。
HTML框架
HTML框架
通过使用框架 可以在同一个浏览器窗口中显示不止一个页面
iframe 设置高度与宽度
1.单位默认像素 可以省略单位直接写数字 也可以用百分比
2.显示的区域 即使宽为100% 仍带有滚动条
3.注意 src 的地址不要找不到
height和width属性用来定义iframe标签的高度与宽度
属性默认以像素为单位（但是你可以按其指定比例显示 如80%）
一些旧的浏览器不支持 iframe。如果浏览器不支持 iframes 则不会显示。
<iframe src = "demo_iframe.html" width='200' height="200"></iframe>
<iframe src = "html.html" width='100%' height="200"></iframe> //把html文件放上去 显示的是渲染后的页面
<iframe src = "wei.png" width='100%' height="200"></iframe> //把图片的路径放上去 区域就显示对应图片
iframe移除边框 frameborder:0/其他 frameborder="0"时移除iframe的边框 默认是有滚动条的那种 如果换成1 则是线边框
使用iframe显示目标链接页面
1.iframe可以显示一个目标链接的页面
2.目标链接的属性必须使用iframe的属性
注意： 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。
如果这样写 会在一个新窗口打开 href="链接例子.html"这个文件渲染的内容
<iframe src="wei.png" width="" height="" ></iframe>
<p>
<a href="链接例子.html" target="iframe_a">ddd</a>
</p>
如果给加上name="iframe_a" 就会把原来区域的内容替换成目标链接里的内容
<iframe src="wei.png" width="" height="" name="iframe_a"></iframe>
注意：以上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.小数值越大 越不透明 <p style="background-color:rgba(255,255,0,0.75)">
3.在标签内 用 background-color
HTML颜色名
目前所有浏览器都支持以下颜色名。
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）
17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色
HTML 颜色值
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
HTML 脚本
HTML 脚本
js使HTML页面具有更强的动态和交互性
HTML<script></script>标签
<script type="text/javascript"></script>标签用于定义客户端脚本 比如js
<script type="text/javascript"></script>元素既可以包含脚本语句 也可以通过src属性指向外部脚本文件
js最常用于图片操作 表单验证以及内容动态更新
HTML脚本标签
script 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本
实例
1.JavaScript可以直接在HTML输出:
document.write("<p>这是一个段落。</p>");
2.JavaScript事件响应:
<button type="button" onclick="mu()">点我</button>
<script type="text/javascript">
function mu(){
console.log('点了')
}
</script>
3.JavaScript处理 HTML 样式:
<div id="gg">
rrrrr
</div>
document.getElementById('gg').style.color = '#ff0000'
字体颜色变成了红色
HTML字符实体
HTML字符实体
HTML中的预留字符必须被替换为字符实体
一些在键盘上找不到的字符也可以使用字符实体来替换。
HTML实体
在HTML中 某些字符是预留的
在HTML中 不能使用< > 浏览器会误认为它们是标签
用字符实体（character entities）显示预留字符
< <
使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
实体名称对大小写敏感！
常用字符实体
1.不间断空格
浏览器总是会截短HTML页面中的空格 如果你在文本中写10个空格
在显示该页面之前 浏览器会删除它们中的9个
使用 字符实体 增加空格的数量
2.结合音标符
HTML字符实体
<!--
空格
< 小于号 <
> 大于号 >
& 和号 &
“ 引号 "
' 撇号 &apos (IE不支持)
£ 镑 £
¥ 人民币/日元 ¥
© 版权 ©
® 注册商标 ®
™ 商标 ™
× 乘号 ×
÷ 除号 ÷
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
-->
HTML URL
HTML统一资源定位器（Uniform Resource Locators)
URL 是一个网页地址
URL可以由字母组成 如‘baidu.com' 或者互联网协议（IP）地址：192.68.20.50
网站域名比 数字好记
URL 统一资源定位器
Web浏览器通过URL从Web服务器请求页面
当你点击HTML页面中的某个链接时 对应的标签指向万维网上的一个地址
一个统一资源定位器（URL）用于定位万维网上的文档
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 runoob.com
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
常见的URL scheme
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
总结：
HTML基本文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title文档标题title>
</head>
<body>
可见文本。。。
</body>
</html>
基本标签（Basic Tags)
<h1>max</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>min</h6>
<p>段落</p>
<br>换行
<hr > 水平线
<!-- 这是注释 -->
文本格式化（Formatting)
<b>加粗</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体</i>
?<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的</small>
<strong>强调</strong>
?<abbr></abbr>缩写
?address 联系信息
?bdo 文字方向
?<blockquote></blockquote> 从另一个源引用的部分
?cite 工作的名称
del 删除的文本
ins 插入的文本
sub 下标文本
sup 上标文本
链接links
普通的 <a href="">d</a>
图像链接<a href="">
<img src="" alt='替换文本' >
</a>
邮件链接<a href="mailto:webmaster@example.com">发送email</a>
书签（锚点链接）
<a id="A">提示部分</a>
<a href="#A">跳到提示部分</a>
图片（images)
<img src="url" loading='lazy' alt='替换文本' height="42" width="42">
样式/区块（Styles/Sections)
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
无序列表
<ul>
<li>kkk</li>
<li>kkkkk</li>
</ul>
有序列表
<ol>
<li>o</li>
<li>o</li>
</ol>
自定义列表
<dl>
<dt>项目1</dt>
<dd>1-1</dd>
<dt>项目2</dt>
<dd>2-1</dd>
</dl>
表格（Tables)
<table border="1" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
框架iframe
<iframe src="" width="" height=""></iframe>
表单 forms
<form action="" method="post">
<input type="text" name="" id="" value="" />
<input type="password" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" checked="checked"/>
<input type="radio" name="" id="" value="" checked="checked"/>
<input type="submit" value=""/>
<input type="reset" name="" id="" value="" />
<input type="hidden" name="" id="" value="" />
</form>
<select>
<option value ="" selected="">A</option>
<option value ="">B</option>
</select>
<textarea rows="60" cols="20" name="comment">
</textarea>
实体 entities
< <
> >
© 等同于 版本的那个符号
HTML 标签简写及全称
标签 英文全称 中文说明
a Anchor 锚
abbr Abbreviation 缩写词
acronym Acronym 取首字母的缩写词
address Address 地址
alt alter 替用(一般是图片显示不出的提示)
b Bold 粗体（文本）
bdo Direction of Text Display 文本显示方向
big Big 变大（文本）
blockquote Block Quotation 区块引用语
br Break 换行
cell cell 巢
cellpadding cellpadding 巢补白
cellspacing cellspacing 巢空间
center Centered 居中（文本）
cite Citation 引用
code Code 源代码（文本）
dd Definition Description 定义描述
del Deleted 删除（的文本）
dfn Defines a Definition Term 定义定义条目
div Division 分隔
dl Definition List 定义列表
dt Definition Term 定义术语
em Emphasized 加重（文本）
font Font 字体
h1~h6 Header 1 to Header 6 标题1到标题6
hr Horizontal Rule 水平尺
href hypertext reference 超文本引用
i Italic 斜体（文本）
iframe Inline frame 定义内联框架
ins Inserted 插入（的文本）
kbd Keyboard 键盘（文本）
li List Item 列表项目
nl navigation lists 导航列表
ol Ordered List 排序列表
optgroup Option group 定义选项组
p Paragraph 段落
pre Preformatted 预定义格式（文本 ）
q Quotation 引用语
rel Reload 加载
s/ strike Strikethrough 删除线
samp Sample 示例（文本
small Small 变小（文本）
span Span 范围
src Source 源文件链接
strong Strong 加重（文本）
sub Subscripted 下标（文本）
sup Superscripted 上标（文本）
td table data cell 表格中的一个单元格
th table header cell 表格中的表头
tr table row 表格中的一行
tt Teletype 打印机（文本）
u Underlined 下划线（文本）
ul Unordered List 不排序列表
var Variable 变量（文本）
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
HTML 的关键是标签，其作用是指示将出现的内容。
CSS被用来同时控制多重网页的样式和布局。
通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。
JavaScript 可以让你的网页更加生动。
如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。
JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。
笔记：
示例"创建图像映射"中的代码：
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
该段代码中的shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。
显示时，要将<link>标签放入<head>里。
举例：
<!doctype HTML>
<html>
<head>
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
</head>
<body>
……
……
……
</body>
</html>
head 标签和 header 标签的不同
head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、
指示浏览器在哪里找到样式表、提供元信息等等。如：
<html>
<head>
<title>文档标题</title>
</head>
</html>
header 标签用于定义文档的页眉（介绍信息）。 如：
<html>
<body>
<header>
<p>段落</p>
<h1>一级标题</h1>
</header>
</body>
</html>
注意千万不要弄混。
文本显示为单行，超过部分隐藏并使用省略号，实例:这里与width有关
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)，实例:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
width:100px;
-webkit-line-clamp这个可以改几行显示
也与width有关
关于 <b> 和 <strong>
在显示上，这两个标签都可是加粗文本，呢么为什么会有两个功能"相同"的标签呢？而且好像 strong 并非个例。
首先，这两个并非完全相同。比如，如果使用网页阅读器阅读网页（盲人使用），strong 会重读，b 则不会。
其次，从起源上来说，strong 是为了在未来建设语义网而诞生的。应该知道的是，html 是负责显示的标记，
不能表示语义。也就是说，浏览器知道这个标签如何显示，
而不知道标签所标记的内容应该是什么含义。而 strong 在语义上走出了第一步。
1、<em> 把文本定义为强调的内容
标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
尽管现在 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。
2、显示斜体文本效果
标签和基于内容的样式标签 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。
3、定义一个定义项目
标签可标记那些对特殊术语或短语的定义。
现在流行的浏览器通常用斜体来显示 中的文本。将来， 还可能有助于创建文档的索引或术语表。
与其他许多基于内容的样式和物理样式标签一样， 标签尽量少用为妙。
也就是说它们要实现的目的不同，但都用同样的表现方式，就是斜体。
1、 把文本定义为强调的内容
<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
尽管现在 <em> 标签修饰的内容都是用斜体字来显示，但这些内容也具有更广泛的含义，将来的某一天，浏览器也可能会使用其他的特殊效果来显示强调的文本。如果你只想使用斜体字来显示文本的话，请使用 <i> 标签。除此之外，文档中还可以包括用来改变文本显示的级联样式定义。
2、<i>显示斜体文本效果
<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。
3、<dfn>定义一个定义项目
<dfn> 标签可标记那些对特殊术语或短语的定义。
现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来，<dfn> 还可能有助于创建文档的索引或术语表。
与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量少用为妙。
也就是说它们要实现的目的不同，但都用同样的表现方式，就是斜体。
关于<abbr>和<acronym>:
都是表示缩略词的标签
不同点：
abbr：表示全词的缩写；
acronym：表示标记一个首字母缩写；
PS:其实看起来的效果都一样，只是内在表达的不一样而已，所以看不出什么区别，重点是现在acronym已经淘汰不用了，
所以尽量改用abbr就好
HTML 要素中的 b、em、strong 有什么区别？
应该说，在默认的 HTML 样式表定义中，b 和 strong 的样式一样，为 { font-weight: bolder }
而 em 的默认样式为 { font-style: italic }，与 i 相同。
在 HTML 4 中，em 表示 emphasized text，strong 表示 strong emphasized text，故 strong 的强度要更强。
而在 HTML 5 中，strong 的定义改成了 important text。当然 emphasized 和 strong emphasized 乃至 important 之间
怎么界定很模糊，关键是在自己编写 HTML 代码的时候保持使用上一致。
b 和 i 仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」。
<b>---bold
<em>---emphasize
<i>---italic
<sub>---subscript
<sup>---superscript
<ins>---insert
<del>---delete
<kbd>---keyboard
<bdo>---Bi-Directional Override
<q>---quate
<dfn>---define
1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：
<img src="file:///f:/*.jpg" width="300" height="120"/>
2、*.html 文件跟 *.jpg 图片在相同目录下：
<img src="*.jpg" width="300" height="120"/>3、*.html 文件跟 *.jpg 图片在不同目录下：
a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：
<img src="image/*.jpg/"width="300" height="120"/>
b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：
<img src="../image/*.jpg/"width="300" height="120"/>
4、如果图片来源于网络，那么写绝对路径：
<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>
HTML 中 href、src 区别
href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为 css 文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用 link，而不采用 @import 加载 css 的原因。 src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入。src 指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
简而言之，src 用于替换当前元素；href 用于在当前文档和引用资源之间建立联系。
HTML 中的 href 和 src 有什么区别
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。
src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。
href 的内容，是与该页面有关联，是引用。
区别就是，引入和引用。
MacOS 如何加载图片以及文件目录有空格
MacOS 是没有硬盘分区的，所以引用文件直接：
<img src="file:///Users/usrn/location" width="x" height="y"/>
假设文件目录有空格，直接将空格换成：%20
<img src="file:///Users/usrn/Desktop/location/space%20space/Images/IMG.png" width="x" height="y"/>
记录一下 html 相对路径的写法：？
./：代表文件所在的目录（可以省略不写）如果写成image/background就相当于是在html文件下找image文件夹，当然是找不到的
../：代表文件所在的父级目录
../../：代表文件所在的父级目录的父级目录
/：代表文件所在的根目录
浙公网安备 33010602011771号