HTML入门
一、简介
1、网页
（1）什么是网页
网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
（2）什么是 HTML
-
HTML指的是超文本标记语言(Hyper Text Markup Language) ，它是用来描述网页的一种语言。 -
HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。
-
所谓超文本，有 2 层含义：- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。
（3）网页的形成
网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
2、HTML发展历史
- HTML：Hyper Text Markup Language超文本标记语言，超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）。
- HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。
- HTML3.2—1996年1月14日，W3C推荐标准。
- HTML4.0—1997年12月18日，W3C推荐标准。
- HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的。HTML4.01语法，是国标标准化组织和国际电工委员会的标准。
- XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
- XHTML1.1—2001年5月31日发布XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。
- HTML5--目前最新的版本，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，2008年1月22日公布HTML5第一份正式草案，2012年12月17日HTML5规范正式定稿，2013年5月6日，HTML5.1正式草案公布。
- HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度。
3、常用浏览器
（1）常用浏览器
浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
（2）浏览器内核
浏览器内核（渲染引擎）： 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。
4、Web标准
Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
（1）为什么需要Web标准
不同的浏览器内核，工作原理、解析肯定不同，显示就会有差别。通过制定Web标准，让浏览器展示统一的内容。
（2）标准化的好处
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
（3）W3C组织
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- www.w3.org/
- www.chinaw3c.org/
（4）Web标准构成
主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。
Web 标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解： 结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。
结构类似身体，表现类似外观装饰，行为类似行为动作，相比较而言，三者中结构最重要。
5、网页的基本概念
（1）标签
- 网页的 HTML 代码由许许多多不同的标签（tag）构成。
- 标签用来告诉浏览器，如何处理这段代码。
- 标签的内容就是浏览器所要渲染的、展示在网页上的内容。
<title>网页标题</title>
上面代码中，<title>和</title>就是一对标签。
（2）元素
-
浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为
网页元素（element）。 -
“标签”和“元素”基本上是同义词，标签是从源码角度来看，元素是从编程角度来看，比如
<p>标签对应网页的p元素。 -
嵌套的标签就构成了网页元素的层级关系。
<div><p>hello world</p></div>
上面代码中，div元素内部包含了一个p元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即div是p的父元素，p是div的子元素。
（3）块级元素，行内元素
-
所有元素可以分成两大类：
块级元素（block）和行内元素（inline）。 -
块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。 -
行内元素默认与其他元素在同一行，不产生换行。比如，span就是行内元素，通常用来为某些文字指定特别的样式。
<p>hello</p>
<p>world</p>
上面代码中，p元素是块级元素，因此浏览器会将内容分成两行显示。
<span>hello</span>
<span>world</span>
上面代码中，span元素是行内元素，因此浏览器会将两行内容放在一行显示。
（4）属性
-
属性（attribute）是标签的额外信息。
-
标签可以拥有多个属性，必须写在标签名的后面。
-
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
-
属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。属性值一般放在双引号里面，这不是必需的，但推荐总是使用双引号。
-
属性名是大小写不敏感的，
onclick和onClick是同一个属性。
<img src="demo.jpg" width="500">
上面代码中，<img>标签有两个属性：src和width。
6、参考网站
掌握基本的，常见的，不常见的用到的时候查一下在线文档
MDN：developer.mozilla.org/zh-CN/docs/…
菜鸟教程：www.runoob.com/html/html-t…
w3school：www.w3school.com.cn/
二、HTML标签
1、基本结构
符合 HTML 语法标准的网页，应该满足下面的基本结构。不管多么复杂的网页，都是从这个基本结构衍生出来的。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
HTML 代码的缩进和换行，对于浏览器不产生作用。所以，上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。
HTML页面也称为 HTML 文档。HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。
在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
2、语法规范
（1）基本语法概述
- HTML 标签是
由尖括号包围的关键词，例如 <html>。 - HTML 标签
通常是成对出现的，例如 <html> 和 </html> ，我们称为**双标签。**标签对中的第一个标签是开始标签，第二个标签是结束标签。 - 有些特殊的标签必须是单个标签（极少情况），例如 <br/>我们称为单标签。
（2）标签关系
双标签关系可以分为两类：包含关系和并列关系。
包含关系也叫父子关系
<head>
<title> </title>
</head>
并列关系也叫兄弟关系
<head> </head>
<body> </body>
3、开发工具VsCode
（1）VsCode下载安装
官网地址：code.visualstudio.com/下载直接双击安装
（2）VsCode使用
- 双击打开软件。
- 新建文件（Ctrl + N ）。
- 保存（Ctrl + S ），注意要保存为 .html 文件。
- Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图。
- 输入! 按下 Tab 键。生成页面骨架结构。
- F5在浏览器中打开页面。
三、基本标签
1、<!DOCTYPE>
（1）标签定义及使用说明
-
<!DOCTYPE>表示文档类型，告诉浏览器如何解析网页。
-
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。
-
<!DOCTYPE>不是一个 HTML 标签，它就是文档类型声明标签。
-
在 HTML 4.01 中， 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。HTML5 不是基于 SGML，因此不要求引用 DTD。
-
所有主流浏览器都支持 声明。
（2）常见的 DOCTYPE 声明
- HTML5
<!DOCTYPE html>
- HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、<html>
网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。
该标签的lang属性，表示网页内容默认的语言。
<html lang="zh-CN">
3、<head>
是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。
<head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。
<head>的子元素一般有下面七个
<meta>：设置网页的元数据。<link>：连接外部样式表。<title>：设置网页标题。<style>：放置内嵌的样式表。<script>：引入脚本。<noscript>：浏览器不支持脚本时，所要显示的内容。<base>：设置网页内部相对 URL 的计算基准。
4、<meta>
<meta>用于设置或说明网页的元数据，必须放在<head>里面。- 一个
<meta>标签就是一项元数据，网页可以有多个<meta>。 <meta>标签约定放在<head>内容的最前面。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
上面例子中，第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。<meta>标签有如下五个属性。
（1）charset 属性
charset 属性用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
<meta charset="utf-8">
上面代码声明，网页为 UTF-8 编码。虽然开发者可以使用其他的编码方式，但正确的做法几乎总是应该采用 UTF-8。
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。
（2）name 属性，content 属性
name属性表示元数据的名字，content属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据：
description是网页内容的描述。keywords是网页内容的关键字。author是网页作者。
（3）http-equiv 属性，content 属性
<meta>标签的http-equiv属性用来覆盖 HTTP 回应的头信息字段，content属性是对应的字段内容。
<--页面兼容配置-->
<--标记当前文档以最高级别的可用模式显示内容-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<--30秒后刷新页面-->
<meta http-equiv="Refresh" content="30">
<--5秒之后跳转到百度-->
<meta http-equiv="Refresh" content="5; Url=https://www.baidu.com">
<--网页不保存在缓存中，每次访问都刷新页面-->
<meta http-equiv="Pragma" content="No-cach">
5、<title>
<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。- 搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响。
6、<body>
<body>标签是一个容器标签，用于放置网页的主体内容。<body>标签是<html>的第二个子元素，紧跟在<head>后面。
<html>
<head>
<title>网页标题</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
7、<style>
<style>标签用于为 HTML 文档定义样式信息，规定在浏览器中如何呈现 HTML 文档。type属性是必需的，定义 style 元素的内容，style 元素位于 head 部分中。
<style type="text/css">
body{
background-color: red;
}
</style>
8、<link/>
四、常用标签
1、标签语义
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
2、标题标签 <h1> - <h6>（重要）
（1）标签使用说明
- 标题标签，通常用于显示标题或主题。
- HTML 提供了 6 个等级标题，即
<h1> - <h6>，依据重要性递减，h1最大，h6最小。 - h是单词 head 的缩写，意为头部、标题。
- 加了标题的文字会变的加粗，字号也会变大。一个标题独占一行。
（2）代码演示效果
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
3、段落标签<p>（重要）
（1）标签使用说明
<p>段落标签，可以把 HTML 文档分割为若干段落，将这些文字分段显示，段落和段落之间保有空隙。- p是单词 paragraph [ˈpærəgræf] 的缩写，意为段落。
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
（2）代码演示效果
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
4、换行标签<br />（重要）
（1）标签使用说明
- 在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />。 - br是单词 break 的缩写，意为打断、换行。
<br />是个单标签。<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
（2）代码演示效果
<h1>北京欢迎你</h1>
<p>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
</p>
5、水平线标签<hr>
（1）标签使用说明
<hr>标签使用横线分隔页面内容。<hr>显示一条横线，从浏览器的最左边到浏览器的最右边。
（2）代码演示效果
<h1>北京欢迎你</h1>
<hr/>
<p>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
</p>
6、文本格式化标签
（1）标签使用说明
-
文本格式化标签，可以为文字设置**
粗体**、斜体或下划线等效果。 -
文本格式化标签作用是突出重要性, 比普通文字更重要。
-
重点记住 加粗 和 倾斜。
（2）代码演示效果
我是<strong>加粗</strong>的文字<br/>
我是<b>加粗</b>的文字<br/>
我是<em>倾斜</em>的文字<br/>
我是<i>倾斜</i>的文字<br/>
我是<del>删除线</del><br/>
我是<s>删除线</s><br/>
我是<ins>下划线</ins><br/>
我是<u>下划线</u><br/>
7、<div> 和<span>标签
（1）标签使用说明
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。- div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。
<div>标签用来布局，但是现在一行只能放一个<div>。 大盒子<span>标签用来布局，一行上可以多个<span>。小盒子
（2）代码演示效果
<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
8、图像标签<img> (重点）
（1）标签使用说明
<img>标签用于定义 HTML 页面中的图像。- img单词 image 的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性：
（2）代码演示效果
<h4> 图像标签的使用:</h4>
<img src="img.jpg"/>
<h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="img1.jpg" alt="图片显示不出来"/>
<h4> title 提示文本 鼠标放到图像上，提示的文字:</h4>
<img src="img.jpg" title="图片提示信息" alt="图片显示不出来"/>
<h4> width 给图像设定宽度:</h4>
<img src="img.jpg" width="500"/>
<h4> height 给图像设定高度:</h4>
<img src="img.jpg" height="100"/>
<h4> border 给图像设定边框:</h4>
<img src="img.jpg" width="500" border="15"/>
（3）路径
-
实际工作中，我们的文件不能随便乱放，我们需要一个文件夹来管理他们。不同类型的文件用不同的文件夹管理，比如图片文件用images文件夹。
-
**目录文件夹：**就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。
-
**根目录：**打开目录文件夹的第一层就是根目录
-
**VSCode打开目录文件夹：**文件-- 打开文件夹--选择目录文件夹，后期非常方便管理文件
-
**相对路径：**相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是图片相对于 HTML 页面的位置。
- **绝对路径：**是指完整的位置，直接到达目标位置，一般用的少。例如，完整网络地址“cdn.bluecusliyou.com/20221121214…”或完整计算机路径“D:\web\img\logo.gif”
（4）代码演示效果
9、超链接标签<a> (重点）
（1）标签使用说明
<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。- a是单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。
- 在所有浏览器中，链接的默认外观是：
- 未被访问的链接: 带有下划线而且是蓝色的
- 已被访问的链接: 带有下划线而且是紫色的
- 活动链接: 带有下划线而且是红色的
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
两个属性的作用如下：
（2）链接的分类
-
外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
-
**内部链接:**网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
-
空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
-
下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
-
网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
-
锚点链接: 点我们点击链接，可以快速定位到页面中的某个位置。
-
在链接文本的 href 属性中，设置属性值为 #名字的形式，
-
在目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，
<!--点击连接--> <a href="#two"> 第2集 </a> <!--跳转到这里--> <h3 id="two">第2集介绍</h3> -
（3）代码演示效果
<h4>1.外部链接，target：打开窗口的方式 默认的值：_self 当前窗口打开页面， _blank 新窗口打开页面</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="company.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是文件</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
<h4>6.锚点链接</h4>
<a href="15-锚点定位.html#zuopin">刘德华作品</a>
9、注释和特殊字符
（1）注释
- 注释有助于理解代码的含义，复杂的代码块前面最好加上注释。
- HTML 代码可以包含注释，浏览器会自动忽略注释。
- 注释可以是多行的，并且内部的 HTML 都不再生效了。
<!-- 注释语句 -->
<!--
<p>hello world</p>
-->
（2）空格和换行
- HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。
- 标签内容里面的多个连续空格（包含制表符
\t），会被浏览器合并成一个。 - 浏览器还会将文本里面的换行符（
\n）和回车符（\r），替换成空格。没有换行效果。
<p> hello world </p>
上面代码中，hello前面的空格和world后面的空格，浏览器一律忽略不计。
<p>hello world</p>
上面代码中，hello与world之间有多个连续空格，浏览器会将它们合并成一个。网页渲染的结果是，hello与world之间只有一个空格。
<p>hello
world
</p>
上面代码中，hello与world之间有多个换行，浏览器会将它们替换成空格，然后再将多个空格合并成一个。网页渲染的结果是，hello与world之间有一个空格。
（3）特殊字符
- 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。
五、表格列表内联框架
1、表格标签<table>
（1）表格的主要作用
- 表格主要用于
显示、展示数据，它可以让数据显示规整，可读性非常好。 - 表格
不是用来布局页面的。
（2）表格的基本语法
-
<table> </table>是用于定义表格的标签。 -
<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。 -
<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。 -
字母 td 指表格数据（table data），即数据单元格的内容。
<!--table表格标签-->
<table border="1px">
<!--tr 行标签-->
<tr>
<!--td 单元格标签-->
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
</tr>
</table>
（3）表头单元格标签
- 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示 HTML 表格的表头部分(table head 的缩写)- 表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示。
<!--table表格标签-->
<table border="1px">
<!--tr 行标签-->
<tr>
<!--th 表头单元格-->
<th>第1个单元格的内容</th>
<th>第2个单元格的内容</th>
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
</tr>
</table>
（4）表格属性
表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置。
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr>
<th>第1个单元格的内容</th>
<th>第2个单元格的内容</th>
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
</tr>
</table>
（5）案例实现
先制作表格的结构.
-
第一行里面是 th 表头单元格
-
第二行开始里面是 td 普通单元格
-
单元格里面可以放任何元素,文字链接图片等都可以
后书写表格属性.
-
用到宽度高度边框cellpadding 和 cellspacing
-
表格浏览器中对齐 align
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="images/down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="images/up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
（6）表格结构标签
- 因为表格可能很复杂，为了更好的表示语义，可以将表格分割成表格头部
<thead>和表格主体<tbody>两部分，都是放在<table></table>标签中。 <thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行。<tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
<table border="1px">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行第1列内容</td>
<td>第1行第2列内容</td>
</tr>
<tr>
<td>第2行第1列内容</td>
<td>第2行第2列内容</td>
</tr>
</tbody>
</table>
（7）合并单元格
合并单元格方式：
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
目标单元格：(写合并代码)
- 跨行：最上侧单元格为目标单元格, 写合并代码
- 跨列：最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲：
-
先确定是跨行还是跨列合并。
-
找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“
2”></td>。
- 删除多余的单元格。
代码演示效果：
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
2、列表标签<ul><ol><dl>
- 列表是用来布局的，是信息资源的一种展示形式。
- 列表最大的特点就是
整齐、整洁、有序，它作为布局会更加自由和方便。 - 根据使用情景不同，列表可以分为三大类：
无序列表、有序列表和自定义列表。
（1）无序列表（重点）
<ul>标签表示无序列表，列表排序以点来显示，而列表项使用<li>标签定义。一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
<!--ul 声明无序列表-->
<ul>
<!--li 声明列表项-->
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>计算机</li>
</ul>
（2）有序列表（理解）
<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。一般用于排序类型的列表，如试卷、问卷选项等。<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
<!--ol 声明有序列表-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>计算机</li>
</ol>
（3）自定义列表（重点）
<dl>标签用于定义描述列表（或定义列表），列表项前面没有任何符号，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。常用于对术语或名词进行解释和描述，一般用于一个标题下有一个或多个列表项的情况。<dl></dl>里面只能包含<dt>和<dd>。<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。
<!--dl 声明定义列表-->
<dl>
<!--dt 声明列表项-->
<dt>水果</dt>
<!--dd 定义列表项内容-->
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
3、内联框架<iframe>
（1）什么是iframe
iframe是html元素，用于在网页中内嵌另一个网页。iframe默认有一个宽高,存在边界。iframe是一个行内快级元素，可以通过display修改。
（2）iframe元素属性
src :指定内联网页的地址frameborder:iframe默认有个边界，可以设置frameborder为0清除边界。width,height:控制iframe的宽高。name：框架的名称scrolling：是否可滚动，yes ,no , auto
（3）代码演示效果
<!-- iframe -->
<iframe src="22-表格结构标签.html" width="500px" height="300px"></iframe>
<!-- 实现点击不同连接 iframe显示不同页面 a标签的target指向iframe的name -->
<a href="23-合并单元格.html" target="mainFrame">菜单1</a>
<a href="24-无序有序自定义列表.html" target="mainFrame">菜单2</a>
<iframe name="mainFrame" width="500px" height="300px"></iframe>
六、表单
1、表单是什么
- 表单在网页中主要负责数据采集功能。HTML中的
<form>标签，就是用于采集用户输入的信息的，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。 - 表单由三个基本部分组成：表单标签（form），表单域（input），表单按钮（button）。
2、<form>标签的属性
<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL地址 | 规定当提交表单时，向何处发送表单数据 |
| method | get或post | 规定以何种方式把表单数据提交到 action URL |
| enctype | application/x-www-form-urlencoded，multipart/form-data，text/plain | 规定在发送表单数据之前如何对其进行编码 |
| target | _blank，_self，_parent，_top，framename | 规定在何处打开 action URL |
| name | 表单名称 | 区分页面中的多个表单 |
-
action
- action 属性用来规定当提交表单时，向何处发送表单数据。
- action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
- 当表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
- 注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
-
target
- target 属性用来规定在何处打开 action URL。
- 它的可选值有5个，默认情况下，target 的值是 _self，表示在当前页面中打开 action URL。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开。 |
| _self | 默认。在相同的框架中打开。 |
| _parent | 在父框架集中打开。（很少用） |
| _top | 在整个窗口中打开。（很少用） |
| framename | 在指定的框架中打开。（很少用） |
-
method
- method 属性用来规定以何种方式把表单数据提交到 action URL。
- 它的可选值有两个，分别是 get 和 post。
默认值为get，表示通过URL地址的形式，把表单数据提交到 action URL。- get 方式适合用来提交
少量的、简单的数据。 - post 方式适合用来提交
大量的、复杂的、或包含文件上传的数据。 - 在实际开发中，post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。
-
enctype
- enctype 属性用来规定在发送表单数据之前如何对数据进行编码。
默认值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。- 在涉及到
文件上传的操作时，必须将 enctype 的值设置为multipart/form-data，不涉及到文件上传操作，则直接默认即可！
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 |
| text/plain | 空格转换为 “+” 加号，但不对特殊字符编码。（很少用） |
3、表单元素input
<input>标签表示表单元素，type属性指定其表单元素类型
type 属性的属性值及其描述如下：
<input>还有其他很多属性如下：
（1）文本框text
<!--type="text"
name：文本框名称(必填)
value：文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符
-->
<input type="text" name="userName" value="用户名" size="30" maxlength="20"
/>
（2）密码框password
向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。
<!--type="password"
name：密码框名称(必填)
size：密码框长度
-->
<input type="password" name="pass" size="20"/>
（3）单选按钮radio
同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
<!--type="radio"
name：单选框名称(必填)，一组的名称需要相同
checked：单选按钮选中状态
value：单选框的值
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
（4）复选框checkbox
同一组复选框，根据需要可设置name属性值相同
<!--type="checkbox"
name：复选框名称(必填)，一组的名称需要相同
checked：复选按钮选中状态
value：复选框的值
-->
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
（5）下拉列表框select
<select>中至少包含一对<option>。- 在
<option>中定义selected =“selected"时，当前项即为默认选中项。
<!--select:下拉列表框-->
<!--option：选项-->
<select name="省份">
<option value="江苏" selected=“selected">江苏</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
（6）按钮
- **提交按钮：**提交表单数据到后台。
- **重置按钮：**重置表单到原始状态。
- **普通按钮：**需要添加点击事件才会有效果。
- **图片按钮：**调“type”属性没有设置为“submit”，但仍然具备提交表单的功能。
<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮">
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮">
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />
（7）多行文本域textarea
- 使用多行文本域，可以输入更多的文字，该控件常见于留言板，评论。
- 属性cols=“每行中的字符数” ，rows=“显示的行数”，
我们在实际开发中不会使用，都是用 CSS 来改变大小。
<textarea name="showText" cols="30" rows="5">
多行文本内容
</textarea>
（8）文件域file
在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
</p>
</form>
4、综合案例-注册页面
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="600">
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg"> 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> 女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input
type="radio" name="marry"> 离婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="博士后"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love"> 妩媚的
<input type="checkbox" name="love"> 可爱的
<input type="checkbox" name="love"> 小鲜肉
<input type="checkbox" name="love"> 老腊肉
<input type="checkbox" name="love" checked="checked"> 都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍</td>
<td>
<textarea>个人简介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#"> 我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
5、表单的高级应用
（1）隐藏域
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域被提交至服务器
<input type="hidden" value="666" name="userid">
（2）只读、禁用
W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略- 虽然可以省略，推荐写全。
<!-- 只读，禁用 -->
<input type="text" name="name" value="张三" readonly>
<input type="submit" value="保存" disabled>
<!-- 推荐写全 -->
<input type="text" name="name" value="张三" readonly="readonly">
<input type="submit" value="保存" disabled="disable">
（3）label标签
<label>标签为 input 元素定义标注（标签）。<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。- 核心：
<label>标签的 for 属性应当与相关元素的 id 属性相同。
<!-- label标签 -->
<!--它的for属性对应的id与表单元素id一致-->
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
（4）正则pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。
<input type="text" name="tel" pattern="^1[358]\d{9}" />
七、其他
1、常用单位
px单位名称为像素，相对长度单位，是相对于显示器屏幕分辨率而言的。em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸。%百分比单位是也是相对相处单位，想对于父级元素的百分比计算而得。
2、标签通用属性
| 属性 | 描述 |
|---|---|
| class | 规定元素的一个或多个类名（引用样式表中的类）。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| hidden | 规定元素是否隐藏。 |
| id | 规定元素的唯一 id。 |
| style | 规定元素的行内 CSS 样式。 |
| title | 规定有关元素的额外信息。 |
八、HTML5
- HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
- 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持。
1、语义化标签
（1）HTML5以前
以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
（2）标签说明
<header>：头部标签<nav>：导航标签<article>：内容标签<section>：定义文档某个区域<aside>：侧边栏标签<footer>：尾部标签
（3）注意事项
- 这种语义化标准主要是针对
搜索引擎的 - 这些新标签页面中可以使用
多次 - 在 IE9 中，需要把这些元素转换为块级元素
- 移动端更喜欢使用这些标签
2、视频标签
（1）HTML5之前
- 在HTML5问世之前，要在网页上展示视频、音频、动画等，除了使用第三方自主开发的播放器外，使用最多的工具应该算是Flash了，但是它需要在浏览器上安装各种插件才能使用，有时候速度也会非常慢。
- HTML5的出现改变了这一状况，在网页中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了。
（2）视频格式兼容性
当前， <video> 元素支持三种视频格式： MP4, WebM和 Ogg，尽量使用 mp4的格式。
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
（3）语法
<video src="文件地址" controls="controls"></video>
可以使用source指定多个视频文件，浏览器会从上往下进行解析，直到找到支持的文件
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</ video >
（4）常见属性
（4）案例
<video src="media/mi.mp4" autoplay="autoplay" controls="controls" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
3、音频标签
（1）音频格式兼容性
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg，尽量使用 mp3的格式。
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
（2）语法
<audio src="文件地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持 <audio> 标签。
</ audio>
（3）常见属性
谷歌浏览器把音频自动播放禁止了，可以通过JavaScript解决
（4）案例
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
4、input标签
（1）input类型
重点记住： number tel search 这三个
（2）标签案例演示
<form action="">
<ul>
<li>颜色: <input type="color" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="datetime" /></li>
<li>本地时间: <input type="datetime-local" /></li>
<li>邮箱: <input type="email" /></li>
<li>月份: <input type="month" /></li>
<li>数量: <input type="number" min="0" max="100" step="10"
<li>滑块: <input type="range" min="0" max="10" step="2" />
<li>搜索: <input type="search" /></li>
<li>手机: <input type="tel" /></li>
<li>时间: <input type="time" /></li>
<li>网址: <input type="url" /></li>
<li>周: <input type="week" /></li>
<!-- 当我们点击提交按钮就可以验证表单了 -->
<li> <input type="submit" value="提交"></li>
</ul>
</form>
（3）属性
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color: pink;
}
（4）属性案例演示
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="请输入要搜索的关键字" autofocus="autofocus"
autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="提交">
</form>
