前端_html
- 一、Web前端开发
- 1.1、常用的前端工具
- 1.1.1、Nodpad++
- 1.1.2、Visual Studio Code
- 1.2、浏览器
- 1.2.1、浏览器大战
- 1.2.2、五大主流浏览器
- 1.2.3、浏览器内核
- 二、HTML概述
- 2.1、网页、网站、应用程序
- 2.2、什么是HTML
- 2.3、什么是HTML5
- 2.4、Web基础概述
- 2.4.1、网站构成
- 2.4.2、页面构成
- 2.4.3、B/S、C/S
- 三、HTML文档
- 3.1、HTML文档声明
- 3.2、HTML文档根标签
- 3.3、头部head标签
- 3.4、主体body
- 3.5、HTML5的优缺点
- 3.6、HTML标签分类
- 3.6.1、块级元素
- 3.6.2、行内块元素
- 3.6.3、行内元素
- 3.7、HTML和CSS中的长度单位
- 3.7.1、绝对长度单位
- 3.7.2、相对字体的长度
- 3.8、标签及属性语法
- 3.8.1、标签语法规则
- 3.8.2、属性语法规则
- 四、HTML标签元素
- 4.1、HTML文档结构相关标签
- 4.2、HTML基础块级标签
- 4.3、HTML基础布局标签
- 4.4、HTML基础行内标签
- 4.4.1、超链接
- 4.4.2、锚点
- 4.4.3、相对路径和绝对路径
- 4.5、图像标签
- 4.6、表格标签
- 4.6.1、表格的基本结构
- 4.6.2、表格的跨行跨列
- 4.6.3、表格的高级标签
- 4.6.4、实现图文布局
- 4.6.5、对全部列应用样式
- 4.7、基础表单元素
- 4.7.1、表单的用途
- 4.7.2、表单的基本语法
- 4.7.3、表单执行原理
- 4.7.4、表单控件元素
- 4.7.4.1、表单输入控件
- 4.7.4.2、其他表单控件
- 4.7.4.3、表单元素的属性
- 4.8、HTML列表标签
- 4.8.1、无序列表
- 4.8.2、有序列表
- 4.8.3、自定义列表
- 4.8.4、嵌套列表
- 4.9、HTML框架
- 4.10、HTML滚动标签
- 4.11、HTML文本格式化标签
- 五、HTML标签通用属性
- 六、HTML5概述
- 6.1、什么是HTML5？
- 6.2、HTML新定义的块级元素
- 6.3、HTML5可以自定义标签
- 6.4、HTML5语义化
- 6.5、新语义标签
- 6.6、HTML5已移除的元素
- 七、HTML5新布局标签
- 八、HTML5新表单元素
- 8.1、HTML5新的input类型
- 8.2、HTML5新表单控件
- 8.2.1、datalist元素
- 8.2.2、HTML5 output元素
- 8.2.3、HTML5新的表单属性
- 九、HTML5多媒体标签
- 9.1、在HTML5中显示视频：
- 9.2、video标签相关属性
- 9.3、在HTML5中显示音频
- 十、其他常用HTML5新标签
- 10.1、HTML5文本格式化标签
- 10.2、HTML5度量条、进度条
- 10.3、HTML5标签详情
一、Web前端开发
1.1、常用的前端工具
1.1.1、Nodpad++
可以取代记事本，有列表标记、自动换行、英文检查、同时编辑多个文件、不限制撤销次数和特殊的英文会标出别的颜色。
特点：没有代码提示，语法高亮，适合英语不好的初学者。（有代码提示的工具不适合初学者记住各种方法的写法，可能会影响笔试）
1.1.2、Visual Studio Code
可以运行在mac、windows和linux系统上，针对编写现代web和云应用的跨平台源代码编辑器，是微软推出的良心之作。
特点：几乎支持所有的主流开发语言的语法高亮、智能代码补全、自定义快捷键、颜色区分和括号匹配。
1.2、浏览器
1.2.1、浏览器大战
第一次浏览器大战，微软发布的IE4.0版本因为比网景公司的浏览器更好的遵循了W3C（world wide web consortium）提出的互联网标准且可以提供一些类似MP3播放之类的功能比网景的浏览器更好，所以网景公司输给了微软公司，网景将公司卖给了AOL。1998年，网景公布了它的浏览器源码，并重新命名为Mozilla，全部程序进行了重写。
2004年基于Mozilla源码的Firefox首次登台，拉开了第二次浏览器大战。第二次大战一些新的基于不同引擎的浏览器也加入了阵营，比如挪威的opera（基于presto引擎）。
1.2.2、五大主流浏览器
Internet Explorer（Windows默认安装）
微软公司推出的一款网页浏览器，简称IE。
Opera浏览器
挪威Opera Software ASA公司旗下的浏览器。1995年，挪威发布了第一版的opera浏览器，使用自己研发的Presto内核。2016年，奇虎360和昆仑万维收购了Opera浏览器，丢弃了强大的presto内核改用google开源的webkit内核，后来，随着Google将浏览器的内核改为blink内核。
Safari浏览器
苹果macos中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Firefox浏览器
Mozilla Firefox，中文俗称火狐，是一个自由及开放源码的网页浏览器，使用Gecko排版引擎，支持多种操作系统：mac、Windows、linux等。
chrome浏览器
Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括webkit，目标是提升稳定性、速度和安全，并创造出简单且有效率的使用者界面。
1.2.3、浏览器内核
浏览器最重要（核心）的部分是“Rendering Engine”——渲染引擎，俗称浏览器内核。
渲染引擎：负责对网页语法的解释并渲染网页。
渲染引擎决定了如何显示网页的内容以及页面的格式信息，不同的浏览器内核对网页语法的解释不同，因此，同意网页在不同的内核的浏览器里面的渲染效果不同，所以网页编写者需要在不同内核的浏览器中测试网页显示效果。
四大内核： Trident（IE内核）、webkit、blink和Gecko。
五大主流浏览器都是单核浏览器，但随着浏览器的发展，也出现了双核浏览器，比如：QQ浏览器、360浏览器。
1、IE内核：Trident内核，俗称IE内核
2、Chrome浏览器内核：统称Chrome内核，以前是Webkit内核，现在是Blink内核
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核
4、Safari浏览器内核：Webkit内核
5、Opera浏览器内核：以前是Presto内核，后来是Webkit内核，现在是Blink内核
二、HTML概述
2.1、网页、网站、应用程序
网站：在因特网上根据一定的规则，使用标准通用标记语言下的一个应用制作的用于展示特定内容相关网页的集合。 简单的来说，网站就是一种沟通工具，人们可以通过网站发布信息，也可以获取自己想要的信息。
网页：构成网站的基本元素，是承载各种网站的应用平台。简单的理解：网站由网页构成。 网页是一个包含HTML标签的纯文本文件，可以存放在任意一台计算机中，是超文本标记语言格式。网页要通过浏览器来阅读。
应用程序：为了完成某项或者某几项特定任务而被开发运行于操作系统之上的计算机程序。
2.2、什么是HTML
HTML（Hyper Text Markup Language）超文本标记语言，超文本就是指页面内可以包含图片、链接、音乐、视频等非文字元素。
HTML是一种用于创建网页的标准标记语言，用来描述网页的一种语言，不是编程语言。标记语言指的是由一套标记标签组成的语言。HTML文档包含了HTML标签以及文本内容，该文档也叫做web页面，使用HTML来建立自己的web站点，html运行在浏览器上，由浏览器来解析。
超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
2.3、什么是HTML5
万维网的核心语言——超文本标记语言的第五次重大修改。
HTML5是链接手机、平板电脑、pc以及其他移动终端的桥梁，可以更丰富地展现页面，让视频、音频、游戏以及其他元素构成一场华丽的代码盛宴。
2.4、Web基础概述
2.4.1、网站构成
网站由三个主要部分构成：网站域名、网站程序、网站空间。
网站域名：访问网站所用的网址，比如：baidu.com。
网站程序：包括用户浏览网站所看到的页面和网站后台管理程序，现在一般都是用成熟的网站管理系统。
网站空间：虚拟主机或服务器，用域存储网站程序及资料，并提供网站程序运行所需要的环境。
2.4.2、页面构成
页面由结构层、表现层、行为层三个部分组成。
eg：当你准备盖一个房子，你需要先盖一个毛坯房，这个就是结构层；盖好毛坯房以后，住进去需要装修，这个就是表现层；装修好可以入住了，但是你想要比较智能化的家，安装了智能AI，你设置了拉开窗帘开灯等功能，就是所谓的行为层。
对于页面来说：
结构层-----> HTML
表现层----->CSS，层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标记语言。
行为层----->JavaScript，脚本语言，用来给页面添加动态效果和动态交互
2.4.3、B/S、C/S
B/S：浏览器/服务器模式
优点：可在任何地方进行操作不用安装软件
C/S：客户端/服务器模式
优点：交互性强、具有安全的存取模式、响应速度快
三、HTML文档
3.1、HTML文档声明
网页文件即HTML文件，其后缀名为.html。任何一个HTML页面，第一行要用<!DOCTYPE…>进行声明，<!DOCTYPE…>不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
3.2、HTML文档根标签
<html>元素是HTML页面的根元素，此元素可以告知浏览器这是一个HTML文档。
<html></html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
头部由<head>标签定义，主体由<body>标签定义。
3.3、头部head标签
<head></head>标签包含了文档的元（meta）数据，用于定义文档的头部，它是所有头部元素的容器。
head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
head标签的子标签：
- base：描述基本的链接地址、链接目标，该标签作为HTML文档中所有的默认链接标签（base会对html文档中所有url产生作用，慎用）
- link：定义文档与外部资源的关系，通常用于链接到样式表
- script：引入外部js或定义内部js代码
- style：用于html文档的样式文件引用地址
- title：定义文档的标题，是head部分中唯一必需的元素
- meta：元，基本的配置项目
meta标签相关：1. 指定字符集：charset就是charactor set即字符集。浏览器通过meta来看网页是什么字符集，若meta写的和声明的不匹配，那么浏览器就是乱码。<meta charset="utf-8">2. 页面描述，name即名字，content即内容，只要设置Description页面描述，那么百度搜索就可以显示这些。<meta name="description" content="具体描述。。。">3. 关键字：告诉搜索引擎，此网页干啥的，能提高搜索命中率，有助于引擎seo优化<meta name="Keywords" content="网易，邮箱，游戏，新闻">4. 重定向：<meta http-equiv="refresh" content="3,http://www.baidu.com">5. 页面刷新<meta http-equiv="refresh" content="3">6.定义网页作者<meta name="author" content="W"> 其他标签：
1、定义标题<title>百度一下，你就知道</title>2、加载网页logo<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">3、引入外部css文件<link rel="stylesheet" href="my.css">4、引入本地css样式<style>p {color: rebeccapurple;}</style>5、引入文件js，不建议在head标签引用js,需在body标签最后引用<script src="hello.js"></script>
3.4、主体body
body元素定义文档的主体，包含了可见的页面内容。
3.5、HTML5的优缺点
优点:
1、网络标准统一、HTML5本身是由W3C推荐出来的。
2、多设备、跨平台
3、即时更新。
4、提高可用性和改进用户的友好体验；
5、有几个新的标签，这将有助于开发人员定义重要的内容；
6、可以给站点带来更多的多媒体元素(视频和音频)；
7、可以很好的替代Flash和Silverlight；
8、涉及到网站的抓取和索引的时候，对于SEO很友好；
9、被大量应用于移动应用程序和游戏。
缺点:
1、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
2、完善性：许多特性各浏览器的支持程度也不一样。
3、性能：某些平台上的引擎问题导致HTML5性能低下。
4、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。
3.6、HTML标签分类
html标签又叫html元素，它分为块级元素、行内块元素和行内元素（内联元素），也可以分为块级元素、行内元素两大类。
3.6.1、块级元素
块级元素是指本身样式属性为display：block；的元素。我们通过用块级元素进行大布局。
特点：独占一行，可以设置宽高。
在不设置宽高的情况下，块级元素的宽高由它本身内容的宽高决定。
常用的块级元素：
- div：常用块级元素
- h1-h6：标题标签，字体大小逐次递减
- hr：水平线分割元素
- ol：有序列表
- ul：无序列表
- li：列表项
- dl：自定义列表
- dt：自定义列表项
- dd：定义描述
- table：表格
- p：段落
- form：交互表单
3.6.2、行内块元素
行内块元素指本身属性为display：inline-block；的元素。
特点：有多大占多大，可以设置宽高
常用行内块元素：img：图片标签
3.6.3、行内元素
内联元素指本身属性：display：inline；的元素。常用行内元素进行文字、小结构的搭建
特点：有多大占多大，不可设置宽高
常用的行内元素：
- span：范围标签
- a：超链接，锚点
- b：加粗
- strong：加粗强调
- i：斜体
- em：斜体强调
- del：文档中已被删除的文本
- br：强制换行
- u：下划线
- textarea：文本域，多行文本输入框
- input输入框
- select：下拉列表
- sub：下标
- sup：上标
- small：小字体文本
1. b和strong的区别：b和strong都是粗体显示b是没有任何语义的，strong是有语义的代表与其更强烈的强调文本2. i和em的区别：i和em都是斜体表示i是没有任何语义的，em代表强调文本
3.7、HTML和CSS中的长度单位
3.7.1、绝对长度单位
px
像素长度和在显示器上看到的文字屏幕像素无关。
3.7.2、相对字体的长度
em
一个相对单位。在没有任何css规则的前提下：1em=16px 浏览器默认字体大小16px。
em单位是相对于父元素，当设置了font-size属性以后，它会逐级向上相乘。假设父子元素的font-size都是2em，那么实际上，父元素的font-size是4em。
rem
rem和em都是相对单位，但是rem总是相对于根元素。
3.8、标签及属性语法
3.8.1、标签语法规则
- HTML元素以开始标签起始，以结束标签终止
- 元素的内容是开始标签和结束标签之间的内容
- 某些HTML元素具有空内容（empty content），空元素在开始标签中进行关闭
- 大多数HTML元素拥有属性
双标签：<开始标签>标签内容</结束标签>
单标签（空标签）：<开始标签/>
3.8.2、属性语法规则
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性以名称/值的形式出现，比如：id=”eg“
四、HTML标签元素
4.1、HTML文档结构相关标签
- html：告诉浏览器其是一个html文档
- head：定义文档的头部，所有头部元素的容器。head中的元素可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等
- body：定义文档的主体，包含文档的所有内容
- base：定义页面中所有链接的默认地址或默认目标（可能对文档中的url产生影响，慎用）
- meta：定义文档的元信息
- link：定义文档与外部资源的关系，链接到表
- script：定义客户端脚本
- style：定义文档的样式信息
- title：定义文档的标题
4.2、HTML基础块级标签
- 标题元素：h1-h6标签，大小逐级递减，不要为了生成粗体或大号文本使用标题
- 段落标签：p标签，p元素会自动创建上下间隙。
- 水平线标签：hr标签，在页面创建一条水平线
4.3、HTML基础布局标签
div：将文档分割成独立的、不同的部分。
4.4、HTML基础行内标签
- 范围标签：span，用来组合行内元素
- 换行标签：br，插入一个简单的换行符
- 超链接：a，使用超链接与网络上的另一个文档相连
4.4.1、超链接
a标签定义超链接，最重要的属性是href，它指示链接的目标
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未被访问过的链接显示为蓝色字体并带有下划线
- 点击链接时，链接显示为红色并带有下划线
- 访问过的链接显示为紫色并带有下划线
基本语法：
<a href="目标链接地址" target="目标窗口位置">链接文本或图</a>
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 规定链接指向的页面的URL |
| target | self parent top blank iframe | 当前窗口打开 父窗口打开 顶级窗口打开 新窗口打开 指定内嵌窗口打开 |
<h1>iframe综合练习</h1><h1>框架和滚动标签页面</h1><!-- 点击超链接打开对应页面a标签是用来定义超链接，点击超链接可以跳转对应的页面href：超链接的跳转地址target：超链接的打开方式_self：当前窗口显示_blank:新窗口打开_parent:父窗口打开_top:顶级窗口打开窗口名：在指定的内嵌窗口打开点击超链接，打开对应的页面，在内嵌窗口里面显示内容当超链接没有设置跳转方式时（target属性），默认在当前窗口打开假如在iframe综合案列里，在02页面设置超链接，内嵌窗口显示02页面以后，超链接的打开方式由target属性来决定 --><a href="02_文本格式化标签.html" target="main">文本格式化标签</a><br><iframe src="01_框架和滚动标签.html" name="main"></iframe>
超链接的用法：
- 链接本地文档：
href="本地文档路径”
路径：具体存储位置（路径有相对路径和绝对路径） - 友情链接
href=“友情链接的链接地址”（一般是网络上的）必须加上http或者https - 图片链接
超链接的标签内容是图片 - 建立电子邮箱的链接
href设置发送的邮箱地址 mailto:邮箱地址 - 链接本页面的某个位置
设置锚点，链接指向锚点
4.4.2、锚点
方法1：通过name和href链接：<a name="maodian1">我是锚点1</a>...(中间设置文字)<a href="#maodian1">锚点1</a>方法2：通过id和href链接<a href="#maodain2">锚点2</a>...（中间文字）（任意元素标签x）<x id="maodain2">文本内容</x>4.4.3、相对路径和绝对路径
-
绝对路径：文件存储的具体路径
-
相对路径：目标文件相对于源文件的路径
目标文件：要访问的页面或图片
源文件：网页的根
相对路径只有一个原则：绝对路径去同存异 -
当源文件和目标文件在同一个文件夹下面，相对路径写法：目标文件文件名.扩展名
-
当目标文件在源文件的下一级目录里面，相对路径写法：目录名/目标文件文件名.扩展名
-
当目标文件在源文件的上一级目录，相对路径写法：…/目标文件文件名.扩展名
4.5、图像标签
在HTML中，图像由标签定义。
<img src="url" alt="some_text">
| 标签属性 | 描述 |
|---|---|
| src | 指定图片地址的来源，可是本地图片也可网络图片 |
| width | 设置图片宽 |
| height | 设置图片高 |
| alt | 为图片定义一串预备的可替换文本，在浏览器无法加载入图片时，替换文本属性告诉读者他们失去的信息 |
| title | 当鼠标移入图片的时候显示文字内容 |
注 : img标签并不会在网页上插入图像，而是从网页中链接图像。img标签创建的时被引用图像的占位空间
4.6、表格标签
4.6.1、表格的基本结构
表格由table标签定义。每个表格均有若干行，由tr标签定义，每行被分割成若干单位格，由td标签定义，表头单元格由th定义。
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
简单的HTML表格由一个或多个tr、th、td元素组成。
复杂的HTML表格可能包括caption、col、colgroup、thead、tbody以及tfoot元素。
| 标签 | 描述 |
|---|---|
| caption | 定义表格标题，紧跟table标签之后，通常此标题居中于表格之上 |
| tr | 定义HTML表格中的行，包含一个或多个th、td |
| th | 定义表格内的表头单元格，文本内容呈现为居中粗体 |
| td | 定义表格内的标准单元格，文本内容呈现为左对齐 |
| width | 定义表格的宽度 |
| height | 定义表格的高度 |
| border | 定义表格的边框 |
| cellpadding | 定义单元边沿与其内容之间的空白 |
| cellspacing | 定义单元格之间的空白 |
表格的宽高：
- 同列单元格宽度由该列宽度最大的单元格决定
- 同行单元格高度由该行高度最高的单元格决定
4.6.2、表格的跨行跨列
- 列合并（colspan）：横向合并单元格，属性值为正整数，表示要合并单元格的个数
- 行合并（rowspan）：纵向合并单元格，属性值为正整数，表示要合并单元格的个数
跨行跨列原则：
- 宽度如果设定已设定为准，否则同列单元格宽度由该列宽度最大的单元格决定
- 高度如果设定已设定为准，否则同行单元格高度由改行导读最高的单元格决定
- 表格行和列的个数由最多的数值为准
- 行合并还是列合并看单元格书跨行还是跨列，合并遵循从左到右，从上到下
扩展：
CSS中能不能实现合并单元格？
不能。css是层叠样式表，用来给结构层添加修饰，只能改变元素的样式；而合并单元格是通过元素属性改变元素的结构，元素的属性不仅可以改变元素的样式，也可以改变元素的结构。
4.6.3、表格的高级标签
| 标签 | 描述 |
|---|---|
| thead | 定义表格的表头 |
| tbody | 定义表格的主体 |
| tfoot | 定义表格的页脚 |
这三个标签必须一同使用
4.6.4、实现图文布局
单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
图文布局：在单元格里使用img标签
4.6.5、对全部列应用样式
colgroup标签可以对表格的全部列应用样式，其span属性是对于单独几列进行设置，列数由属性值决定，列数遵行从左到右
colgroup标签只能在table元素中使用，若含有caption标签和thead标签，那么其必须放在caption之后thead之前
<table border="1px"><colgroup span="2" style="width:100px;"></colgroup><colgroup style="width:80px;"></colgroup><tr><td>1000</td><td>2000</td><td>3333</td><td>1232</td></tr><tr><td>3213</td><td>5452</td><td>6436</td><td>6323</td></tr>
</table>
colgroup包含一个子元素col，col标签是用来设定列的属性，它也可以使用span属性，不过不能和colgroup标签同时使用。
col单标签表示对一列设置样式。
<table border="1px"><colgroup span="2" style="width:100px;"><col style="background: red"><col style="background: yellow"></colgroup><colgroup style="width:80px;"></colgroup><tr><td>1000</td><td>2000</td><td>3333</td><td>1232</td></tr><tr><td>3213</td><td>5452</td><td>6436</td><td>6323</td></tr>
</table>
4.7、基础表单元素
4.7.1、表单的用途
表单在网页中主要负责数据采集功能（通过表单把客户端用户输入的数据发送给服务器）
表单组成部分：
- 表单标签：包含了处理表单数据所用的URL以及数据提交到服务器的方式
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等
- 表单按钮：包括提交按钮，重置按钮和一般按钮。用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作
4.7.2、表单的基本语法
表单用于向服务器传输数据
<form action="表单提交地址" method="提交方法">… 文本框、按钮等表单元素…
</form>
action：指定表单的发送地址
method：表单数据发送到到服务器的方法，get（默认）/post
get和post方法的区别：
get提交：用户输入的信息显示在地址栏中，不安全，请求内容长度有限制，请求速度快
post提交：用户输入的信息不会显示在地址栏中，安全，请求内容长度无限制，请求速度慢
4.7.3、表单执行原理
客户端通过表单把数据提交给服务器，服务器根据提交的数据给客户端一个相应。
请求/响应模式：客户端浏览器发送请求给服务器；服务器基于客户端浏览器响应
4.7.4、表单控件元素
4.7.4.1、表单输入控件
input定义输入控件
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 文本框 | text | 默认，定义一个单行的文本字段 |
| 密码框 | password | 定义密码字段 |
| 单选按钮 | radio | 定义单选按钮，比如性别 |
| 复选框 | checkbox | 定义复选框，比如爱好 |
| 提交按钮 | submit | 定义提交按钮 |
| 重置按钮 | reset | 定义重置按钮，重置所有的表单值为默认值 |
| 图片提交按钮 | image | 定义图像作为提交按钮 |
| 普通按钮 | button | 定义可点击的按钮，通常与js一起使用，启动脚本 |
| 隐藏文档框 | hidden | 定义隐藏输入字段，对前后台交互有用 |
| 文件上传框 | file | 定义文件选择字段和”浏览…“按钮，供文件上传。根据accept属性规范选取文件的类型，比如图片、视频，如果不设置，则什么都可以；根据multiple属性设置允许一次选择多个文件 |
accept属性的值：
- image/* 接受所有的图像文件
- image/png 只接受图片文件的png文件
- audio/* 接受所有的音频文件
- video/* 接受所有的视频文件
4.7.4.2、其他表单控件
textarea： 定义文本域（一个多行的文本输入控件）
文本区域中可容纳无限数量的文本，其中文本的默认字体是等宽字体（Courier）
label： 定义input元素的标签，跟span标签类似，label标签和特定表单控件关联之后，如果用户在label元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控件上。点击label标签文字时，实现对应控件被选择，需要对应表单控件id的值与label标签内的for值相同。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
方式一:
for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
给单选或复选后面的文字加入label标签,for属性值是input的id值
方式二:
将input元素包含在lable标签中
如果将input放置在label标签之间,那么for属性就可以不用
注 : 和单选、复选结合使用,提高用户体验
下拉选择框 select、option
select定义了下拉选项列表
option定义下拉列表中的选项（一个选项）
size属性定义列表中显示的列表项，在select标签设置
multiple属性用来定义是否可以多选
optgroup： 定义选项组
对列表项进行分组并命名，必须使用该标签的label属性
- 把对应的option标签放在optgroup里
- 给optgroup添加label属性，用以列表组命名
button： 定义一个点击按钮
在button内部可以放内容，比如文本或图像，这是该元素与用input标签创建的按钮之间不同之处
button标签的type属性一定为button
type属性可取submit/button/reset
4.7.4.3、表单元素的属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | 上述值 | type属性规定要显示的input元素的类型 |
| value | text | 指定input元素的value的值 |
| src | URL | src属性规定显示为提交按钮的图像的URL，只针对type=“image” |
| size | number | size属性规定以字符数计的input元素的可见宽度 |
| readonly | readonly | 规定输入字段是只读的 |
| name | text | name属性规定input元素的名称 |
| maxlength | number | 规定input元素中允许出现的最大字符数 |
| disabled | disabled | 规定应该禁用的input元素 |
| checked | checked | 规定在页面加载时应该被预先选定的input元素。只针对radio和checkbox |
| accept | audio/ video/ image/* MIME_type | 规定通过文件上传来提交的文件的类型 |
| selected | selected | 下拉框的默认选中 |
4.8、HTML列表标签
4.8.1、无序列表
ul标签定义无序列表，列表项用li表示
给列表的小图标更换样式，使用type属性，值disc（默认）、circle、square
4.8.2、有序列表
ol标签定义有序列表，列表项用li表示
给列表的小图标更换样式，使用type属性，值 1 a A i I
有序列表的start属性：定义列表的开始序号
有序列表的value属性：定义单个列表项的序号，设置之后，该列表项之后的值都随之改变
4.8.3、自定义列表
自定义列表是列表项和其注释的组合
自定义列表以dl标签开始，每个自定义表项以dt开始，每个自定义列表项的注释以dd开始，dd可以多个，列表项内部可以使用段落、换行符、图片
<dl><dt>标题</dt><dd>描述1</dd>……
</dl>
4.8.4、嵌套列表
有序列表ol和无序列表ul可以相互嵌套使用
<h1>嵌套列表：</h1>
<ul><li>动物</li><li>猫<ul><li>黑猫</li><li>白猫</li></ul></li><li>狗</li>
</ul>
4.9、HTML框架
使用iframe标签内嵌框架，可以在同一个浏览器窗口中显示不止一个页面
内嵌窗口是打开一个页面，有边框，可以设置宽高，只要我们不给iframe设置固宽，内嵌页面里的内容不会超过iframe本来的宽度
iframe语法：
<iframe src="URL"></iframe>
该URL指向不同的网页
height 和 width 属性用来定义iframe标签的高度与宽度。
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框。
<h1>iframe综合练习</h1><h1>框架和滚动标签页面</h1><!-- 点击超链接打开对应页面a标签是用来定义超链接，点击超链接可以跳转对应的页面href：超链接的跳转地址target：超链接的打开方式_self：当前窗口显示_blank:新窗口打开_parent:父窗口打开_top:顶级窗口打开窗口名：在指定的内嵌窗口打开点击超链接，打开对应的页面，在内嵌窗口里面显示内容当超链接没有设置跳转方式时（target属性），默认在当前窗口打开假如在iframe综合案列里，在02页面设置超链接，内嵌窗口显示02页面以后，超链接的打开方式由target属性来决定 --><a href="01_框架和滚动标签.html" target="_self">内嵌框架和滚动条</a><a href="02_文本格式化标签.html" target="_blank">文本格式化标签</a><a href="03_标签通用属性.html" target="_parent">标签通用属性</a><a href="04_特殊字符.html" target="main">特殊字符</a><a href="05_h5概述.html" target="_top">h5概述</a><br><iframe src="01_框架和滚动标签.html" name="main"></iframe>
4.10、HTML滚动标签
使用marquee标签添加滚动效果，内容可以是文字，图片，超链接
| 属性 | 描述 | 值 |
|---|---|---|
| behavior | 设置文本如何滚动 | scroll：字幕从右到左，循环滚动 alternate：在两端之间来回滚动，重复 slide：从一端到另一端，不重复 |
| direction | 设置文本的滚动方向 | left right down up |
| loop | 设置字幕的滚动次数 | -1：表示无限循环 大于0的任何数，数值是几，就滚动几次 |
| scrollmount | 设置每次滚动之间的像素值，直接写数值 | 像素值越大，速度越快，但有卡顿情况 |
| scrollDelay | 设置每次滚动的延迟 | 数值越大越慢 |
4.11、HTML文本格式化标签
HTML文本格式化标签：
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本 |
| em | 定义斜体文字 |
| i | 定义斜体字 |
| small | 定义小号字 |
| strong | 定义加重语气 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字 |
| del | 定义删除字 |
| s | 定义无效文本 |
b和strong的区别：
b和strong都是粗体显示，
b是没有任何语义的，strong是有语义的代表语气更强烈的强调文本
i和em的区别：
i和em都是斜体显示，
i是没有任何语义的，em代表强调文本
五、HTML标签通用属性
| 属性 | 作用 |
|---|---|
| id | 定义元素的唯一id |
| class | 定义元素的类名 |
| style | 定义元素的行内样式 |
| title | 定义元素的额外信息，可在工具提示中显示 |
| dir | 设置元素中内容的文本方向 |
| accesskey | 设置访问元素的键盘快捷键 |
六、HTML5概述
6.1、什么是HTML5？
HTML最新的修订版本，超文本标记语言的第五次重大修改。
6.2、HTML新定义的块级元素
HTML5新定义了8个块级元素：
- header：定义了文档的头部区域
- nav：定义导航链接部分
- article：定义页面独立的内容区域
- section：定义文档中的区段
- aside：定义页面侧边栏内容
- footer：定义section或者文档的页脚
- main：自定义标签
- figure：规定独立的流内容
6.3、HTML5可以自定义标签
可以为HTML添加新的元素，如下，定义一个新元素myHero
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {display: block;background-color: #ddd;padding: 50px;font-size: 30px;
}
</style>
</head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p><myHero>我的第一个新元素</myHero></body>
</html>
6.4、HTML5语义化
在HTML5添加新标签的时候，提出了“语义”，标签的定义更有语义
6.5、新语义标签
| 标签 | 描述 |
|---|---|
| article | 定义页面独立的内容区域 |
| aside | 定义页面的侧边栏内容 |
| bdi | 设置一段文本，使其脱离其父元素的文本方向设置 |
| command | 定义命令按钮，比如单选按钮、复选框或按钮 |
| details | 描述文档或文档摸个部分的细节 |
| dialog | 定义对话框，比如提示框 |
| summary | 包含details元素的标签 |
| figure | 规定独立的流内容（图像、图表、照片、代码等） |
| figcaption | 定义figure元素的标签 |
| footer | 定义section或文档的页脚 |
| header | 定义文档的头部区域 |
| mark | 定义带有记号的文本 |
| meter | 定义度量，仅用于已知最大和最小值的度量 |
| nav | 定义导航链接的部分 |
| progress | 定义任何类型的任务进度 |
| ruby | 中文注音或字符 |
| rt | 定义字符的解释或者发音 |
| rp | 在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容 |
| section | 定义文档中的区段 |
| time | 定义日期或者时间 |
| wbr | 规定在文本中的何处适合添加换行符 |
6.6、HTML5已移除的元素
- big：大号字体
- center：文本居中
- font：文本的字体、字体尺寸、字体颜色
- dir：定义目录列表，类似于ol、ul
- tt：类似于打字机的文本效果
七、HTML5新布局标签
- header：定义文档的头部
- nav：导航链接部分
- article：定义文档独立的内容区域
- section：定义文档中的区段
- aside：定义文档的侧边区域
- figcaption：定义figure元素的标题，放在figure元素的第一个或最后一个子元素的位置
- figure：规定独立的流内容
八、HTML5新表单元素
8.1、HTML5新的input类型
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 电子邮箱 | 包含email地址的输入域（有校验） | |
| 拾色器 | color | 选取颜色 |
| 日期字段 | date datetime datatime-local month week time | 包含年月日 UTC时间，仅opera支持 包含年月日时分 年月 年中的周数 定义时间 |
| 数值框 | number | 包含数字值的输入字段，可设置数字的限制，使用max和min属性设置最大/小值，step属性设置数字间隔 |
| 数值滑块空间 | range | 包含一定范围内的数字值的输入域，range类型为滑动条，使用max和min属性设置最大/小值，step属性设置数字间隔 |
| 搜索框 | search | 搜索字段 |
| 电话号码框 | tel | 输入电话号码字段，不会进行校验 |
| url地址 | url | 包含url的输入字段，会对提交表单时对url字段的值自动进行验证 |
8.2、HTML5新表单控件
8.2.1、datalist元素
datalist元素规定输入域的选项列表。当用户在form或者input中开始输入时，浏览器在其中显示填写的选项。使用input的list属性与datalist元素绑定，datalist需要有一个id属性名。
<input type = “text” name=”data” list=”dlist”>
<datalist id=”dlist”><option value="CAD" >CAD</option><option value="HTML5">HTML5</option><option value="JAVASCRIPT" >JAVASCRIPT</option><option value=".NET">.NET</option><option value="JAVA">JAVA</option>
</datalist>
8.2.2、HTML5 output元素
output元素用于不同类型的输出，比如计算或脚本输出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
</form><p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p>
8.2.3、HTML5新的表单属性
- form/input autocomplete属性：autocomplete属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。autocomplete属性有可能zaiform元素中是开启的，而在input元素中是关闭的。
<form action="" autocomplete="on">First name:<input type="text" name="fname"><br>Last name: <input type="text" name="lname"><br>E-mail: <input type="email" name="email" autocomplete="off"><br><input type="submit">
</form>
- form novalidate属性：novalidate属性是一个boolean属性，规定在提交表单时不应该验证form、input域
- input placeholder属性：placeholder属性提供一种提示，。描述输入域所期待的值，简短的提示在用户输入值前会显示在输入域上
- input required属性：required属性规定必须在提交之前填写输入域，不能为空
- input step属性：step属性为输入域规定合法的数字间隔
- input autofocus属性：autofocus属性是一个boolean属性，规定属性在页面加载时，域自动地获得焦点。
- input form属性：form属性规定输入域所属的一个或多个表单
- input formaction属性：formaction属性用于描述表单提交的url地址，formaction属性会覆盖form元素中的action属性。
- input formenctype属性：formenctype属性描述了表单提交到服务器的数据编码（只针对form表单中method=“post”表单）formenctype属性覆盖form元素的enctype属性，该属性与type=“submit”和type=“image”配合使用。第一个提交按钮已默认编码发送表单数据，第二个提交按钮以“multipart/form-data”编码格式发送表单数据
<form action="demo-post_enctype.php" method="post">First name: <input type="text" name="fname"><br><input type="submit" value="提交"><input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
- input formmethod属性：formmethod属性定义了表单提交的方式，该属性与type=“submit”和type=“image”配合使用。
- input formnovalidate属性：novalidate属性是一个boolean属性，novalidate属性描述了input元素在表单提交时无需被验证
- input height和width属性：height和width属性规定image类型的input标签
- input list属性：list规定输入域的datalist，datalist是输入域的选项列表
- input multtiple属性：multiple属性是一个boolean属性，规定input元素中可选择多个值，适用input标签的file
- input pattern属性:pattern属性描述了一个正则表达式用于验证input元素的值。
九、HTML5多媒体标签
9.1、在HTML5中显示视频：
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm">您的浏览器不支持Video标签。
</video>
9.2、video标签相关属性
| 属性 | 值 | 描述 |
|---|---|---|
| Muted | Muted | 定义的视频的初始状态 |
| autoplay | autoplay | 如果指定，视频会在准备好(如已取得可播放视频)后自动播放. |
| controls | controls | 添加播放控制及音量控制功能栏 |
| height | Pixels | 指定播放器的高度，以pixel为单位 |
| loop | loop | 如果指定，视频将重复播放. |
| poster | url | 指定视频的预览图. |
| preload | preload | 如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。auto - 当页面加载后载入整个音频meta - 当页面加载后只载入元数据none - 当页面加载后不载入音频 |
| src | url | 目标视频的URL |
| width | Pixels | 指定播放器的宽度，以pixel为单位 |
9.3、在HTML5中显示音频
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.wav" type="audio/wav"> 您的浏览器不支持 audio 元素。
</audio>
标签功能跟video差不多，一定有autoplay、controls、loop、preload和src
十、其他常用HTML5新标签
10.1、HTML5文本格式化标签
- time：定义日期或者时间
- mark：定义带有记号的文本
- ruby：在文字上方注音
注音：
<ruby>饕餮<rt>tao tie</rt></ruby>
10.2、HTML5度量条、进度条
定义已知范围或者分数值内的标量测量，计数仪表，也被称为尺度。用progress标签标记进度条
| 属性名 | 属性作用 |
|---|---|
| value | 规定计量条当前默认显示值 |
| max | 规定范围的最大值，默认为1 |
| min | 规定范围的最小值，默认为0 |
| low | 规定被视为最低的标准 |
| high | 规定被视为最高的标准 |
| form | 规定所属的一个或多个表单 |
| optimum | 定义度量条的最佳标准值，最佳必须在低和高之间 |
10.3、HTML5标签详情
- details：描述有关文档或文档片段的详细信息
- summary：是details元素的第一个子元素，可以为details定义标题，标题是可见的，用户点击标题时会显示details中的内容
details元素的属性：
open属性：规定在html页面中details是可见的
