第一章
1、使用浏览器去访问的程序，叫网页
2、web代码存放在服务器
代码分为两种：① 运行在浏览器端：前端代码
② 运行在服务器端：后端代码
完整的网站包括两部分：前端+后台
3、技术
① 静态页面（按照产品设计图来编写网页 .html，网页的技术：html,css）
② 添加功能：动态特效，页面交互。技术：javascript,jQuery,DOM
③ 和服务器交互。技术：server,php,ajax
4、复杂开发：html5高级，框架(提高代码效率)(bootstrap, node.js, angular.js)，移动端开发，微信开发
1、HTML(超文本标记语言 Hyper Text Markup Language)是网页内容的载体
内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等
2、CSS(层叠样式表 Cascading Style Sheets)样式是表现
就像网页的外衣，比如标题字体、颜色变化、为标题加背景图片、边框等，所有这些用来改变内容外观的东西称之为表现
3、JavaScript(脚本语言)用来实现网页上的特效效果
如焦点新闻的轮换
4、PHP(超文本预处理器 Hypertext Preprocessor)是一种通用开源的脚本语言
现在的PHP是网站制作的综合称呼，其包括HTML(DIV+CSS)、JS(jQuery、ajax)、PHP、MySQL、Apache等技术
5、软件(software)是一系列按照特定顺序组织的计算机数据和指令的集合
① C/S软件(Client/Server 客户机/服务器) 由程序员开发，由用户下载、安装、升级、维护的软件，如QQ、PS、DW、YY
② B/S结构(Browser/Server 浏览器/服务器模式) 用浏览器打开，由程序员开发，由程序员升级、维护的软件，如网站、图书管理系统
_______________________________________________________________________________________
<noscript></noscript> 用来定义脚本未被执行时的替代内容(文本)，可被用于可识别<script>标签但无法支持其中的脚本的浏览器
注：如果浏览器支持脚本，则不会显示出 noscript 元素中的文本
如：<noscript>请开启浏览器的JavaScript功能，或使用支持JavaScript的浏览器访问</noscript>
将favicon.ico作为网站的title标识
<link rel="icon" href="static/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon" />
注意: 一般不需要在html中加此标识，只需要在web根目录添加一个favicon.ico即可
____________________________________________________________________________________
WWW(World Wide Web)万维网：通过网络访问网页
telnet：远程登录
BBS：电子公告板，俗称论坛
实现技术原理：分组交换原理、TCP/IP协议簇
web指在网络环境下的应用程序，俗称网页，由浏览器(Browser)、服务器(Server)、通信协议(http)组成
主流浏览器(5款)：Chrome，IE，Firefox，Safari，Opera
360浏览器：双核：基于IE和Chrome
Apple Safari：苹果浏览器
浏览器功能：1、提交请求
2、解析HTML、CSS、JavaScript
3、能以图形化的方式显示文档
服务器功能：1、存储Web上的信息
2、响应浏览器请求并执行服务器程序
3、具备基本的安全性功能
常用的服务器：Tomcat、IIS、Apache、Nginx
____________________________________________________________________________________
HTML：Hyper Text Markup Language超文本（具备特殊功能）标记（超文本的组成形式）语言（拥有自己的语法结构）
以 .html 或 .htm 结尾
脚本语言：javascript，vbscript
1、基础语法：在HTML中，用于描述功能的符号称为标记，必须用<>括起来
① 封闭类型标记必须成对出现
②非封闭类型标记也称为空标记、单标记，如：<标记>或<标记/>
③ <!--注释--> 代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看这段代码，能很快回忆起来这段代码的用途
2、元素嵌套：① 注意嵌套顺序（完整嵌套）
② 注意嵌套代码的缩进（用Tab键/空格缩进）
3、属性和值：属性用来修饰元素的
语法：<标记 属性="值" 属性="值"></标记>
标准属性：又称为通用属性，页面上所有的标记都会具备的属性
①id 页面元素独一无二的标识
②title 鼠标移入到元素上时所显示的内容
③class(css中使用) 定义元素的类选择器
④style(css中使用) 定义元素内联样式
4、注释：不会被浏览器解析运行（解释说明，便于维护）
注意：① 注释不能嵌套注释
② 注释不能位于<>中
5、文档结构
① 文档类型声明
作用：指定文档的版本和类型
语法：放在页面最顶端：<!doctype html>
② html页面
语法：<html></html>
又称为 html根标签
内容：有两个子元素
1、<head></head>
网页头部：是其它头元素的标记
作用：定义页面中的全局信息
包含内容：①<meta charset="utf-8">
作用：指定网页的编码格式为utf-8，告诉浏览器按照utf-8的格式解析内容
注意：网页文件的编码也必须为 utf-8
② <meta name="keywords" content="关键字的位置">
③ <meta name="descoration" content="描述位置">
④ <script></script>定义或引入JS文件
⑤ <style>定义内部样式
⑥ <link>引入外部样式
⑦<title>网页标题</title>
作用：定义页面中的标题信息
2、<body></body>
网页主体：显示页面的主体内容
属性：① text：控制整个页面的文本颜色
② bgcolor：控制整个页面的背景颜色
____________________________________________________________________________________
文本标记
1、特殊字符
xss漏洞,例如: 浏览器接收到js的<,认为是html标签的开始，会把接收到的字符串当脚本执行
① 在html中，任意多个空格，和回车，最后都会被解析成1个空格
② 由<>所包裹的文本，会当成标记被解析
③ 通过转义字符的特殊表现方式表示特殊效果
显示结果 实体名称 实体编号
<（less than） < <
>（greater than） > >
空格   （较大的空格,小空格不需要转义）
© ©
¥ ¥ ¥
××
& & &
" " "
' '(IE不支持)'
注：实体名称易于记忆，但浏览器支持性没有实体编号好
2、文本样式
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sup></sup> 上标
<sub></sub> 下标
<em></em> 斜体，强调
<strong></strong> 粗体，强调
<q></q> 引用文本(简短文本)
<blockquoto></blockquoto> 引用长文本
<address></address> 联系地址信息，斜体
<code></code> 一行代码
<pre></pre> 多行的代码段，会保留空格和回车，用来展示源代码
3、标题元素
作用：以标题的方式显示文本
表现方式：① 垂直的空白间距
② 改变字体大小，加粗显示
③ 独占一行
语法：<hn></hn> n：1~6
<h1></h1> 1级标题
……
<h6></h6> 6级标题
4、段落元素
作用：以段落的形式显示文本
语法：<p></p>
表现形式：① 具备垂直空白间距
② 独占一块
5、换行元素
语法：<br>或<br/>
6、分割线元素
作用：在页面中显示线条
语法：<hr/>
属性：① size 尺寸，大小(以 px 为单位)
② width 宽度(以 px 为单位)
③ align 线条的水平对齐方式，取值：left,center,right（默认居中显示）
④ color 颜色
7、预格式化
作用：保留源文档中的格式。即保留源文档中所有的回车和空格
语法：<pre></pre>
8、块分区元素：div
作用：为元素分组，实现网页布局
语法：<div></div>
表现形式：① 独占一行
② 无任何文本显示效果
9、行内分区元素：span
作用：设置同一行文本的不同效果
语法：<span></span>
表现形式：① 多个span元素显示在同一行内
② 无任何特殊效果
元素分类：块级元素、行内元素、行内块元素
① 块级元素
默认情况下，每个块级元素独占一行，即元素前后都会有换行效果
元素的高度、宽度(默认为其父元素的100%)、行高、顶部和底部边距都可设置
如：p,div,h1~h6,pre,... ...
作用：用来做布局
注意：p标签不能嵌套块级元素(如div)
② 行内元素
不会换行，多个元素在一行内显示
元素的高度、宽度(是其所包含的文字和图片的宽度)、顶部和底部边距不可设置
如：span,s,b,i,u,sup,sub,a,img... ...
作用：大部分的行内元素用来处理文本的显示效果
③ 行内块元素
不会换行，和其它元素都在一行上
元素的高度、宽度、行高、顶部和底部边距都可设置
第二章*******************************************************************************
URL(Uniform Resource Locator)：即统一资源定位器，用来标识网络中的资源位置，俗称路径
资源：网页中要用到的文件，都叫资源
1、绝对路径
网络资源：通信协议+域名（IP地址）+文件目录结构+文件名称 /
本机资源：从文件所在的最高盘符处开始查找 file:///盘符:/目录路径/文件名 /
2、相对路径(更简洁)
同级目录：直接引入 / 不加/,直接写文件名也一样
子级目录：先进入，再引用 ./ 当前目录
父级目录：先返回，再引用 ../ 上一层目录
../../../ 向上返回三级
3、根相对路径(网站发布时一般用这个)
从web站点的根目录处开始查找 用 / 作为开始，表示web站点的根目录
注意：① url 严格区分大小写—（服务器严格区分，本机开发则无所谓）
② url 中不能出现中文
图像：<img>或<img />
如果只改变img的width或height中的一个属性的话，那么另一个属性会跟着等比缩放（一般只修改一个属性或不修改属性）
图像格式：① jpeg/jpg 联合图像专家组，有损压缩，压缩比率大
② gif 动画
③ png 无损压缩，背景透明，有8位、24位（不支持透明）、32位三种形式
属性：① src 图像所在路径（url）
② title 鼠标移动到元素上面时提示的文字
③ alt 路径出错时显示的文字
链接
1、语法：<a href="目标链接地址">内容</a>
2、属性：① href：链接的URL地址
② title： 鼠标移动到链接上提示的文字
③ target：目标，指定打开新网页的形式
取值：_blank 在新标签页中打开
_self 在自身页面中打开（默认值）
3、链接的其它表现形式
① 链接目标为资源下载：<a href="xxx.zip/rar">内容</a> //点击下载资源
② 链接目标为电子邮件链接：<a href="mailto:zhaoxu@tedu.cn">联系我们</a> //点击打开邮箱
③ 调出手机拨号：<a href="tel:10086">10086</a> //点击拨号
④ 返回页面顶部的空链接：<a href="#">返回页面顶部</a>
⑤ 链接到Javascript：<ahref="javascript:js脚本()">内容</a>
比如: <a href="javascript:void(0)"></a> 当做空链接
void是js的一个操作符。表示不执行并返回undefined
⑥ 锚点—————SPA单页面应用的原理
作用：在网页的任意位置处做记号，方便页面能够随时跳转到标记位置处
使用步骤：1、定义锚点（做记号，要跳转处）
① 使用 a 元素的 name 属性：<a name="锚点名称">内容</a>
② 任意标记的 id 属性：<div id="ID1">测试锚点</div>
2、链接到锚点（点击处）
①<a href="#锚点名称">内容</a> 跳转到本页面锚点处
②<a href="页面URL#锚点名称">内容</a> 跳转到其它页面的锚点处
跳转到锚点后，url后面会加 #锚点名，可以用window.location.href=url+"#锚点名"，直接跳到锚点，本页面不需加url，可用于在同一页面切换不同的内容(如SPA单页面应用)
____________________________________________________________________________________
表格
一、表格的作用
按照一定的格式摆放数据
表格是由一些被称为 "单元格" 的矩形框，按照从左到右，从上到下的顺序排列到一起组成的
二、创建表格
1、定义表格：<table></table>
2、创建表行：<tr></tr>
3、创建列(单元格)：<td></td>
三、表格属性
1、table 的属性
① width 宽度
② height 高度
③ align 设置表格的水平对齐方式(left / center / right)
④ border 指定边框宽度，px作为单位，可以省略px
⑤ cellpadding 单元格内边距(单元格边框与内容之间的距离)
⑥ cellspacing 单元格外边距(单元格之间的距离)
⑦ bgcolor 设置表格的背景颜色
2、tr 的属性
① align 设置该行内容的水平对齐方式
② valign 设置该行内容的垂直对齐方式，取值：top / middle / bottom
③ bgcolor 表格行的背景颜色
3、td 的属性
① align 该单元格内容的水平对齐方式
② valign 设置该单元格内容的垂直对齐方式,取值：top|middle|bottom
③ width 该单元格的宽度
④ height 该单元格的高度
⑤colspan 设置单元格跨列
⑥rowspan 设置单元格跨行
注意：每一列中的列宽都一致，以最宽的为准
每一行中的行高都一致，以最高的为准
4、表格标题
<caption>标题</caption>
默认：表格上方居中显示
注意：① <caption>必须紧随<table>之后
② 一个表格最多只能有一个标题，用以描述表格内容
5、<th></th> 行标题或列标题，放在tr中，替换td，有加粗居中的效果
四、表格的复杂应用
1、行分组：html中允许将表格内容划分为3个部分（可以把表格阶段性加载出来）
① 表头行分组：<thead></thead> 默认粗体居中
② 表主体行分组：<tbody></tbody> 表格下载完才会显示
③ 表尾行分组：<tfoot></tfoot>
表格中最下方的一行或几行，可以放在表尾行分组
注意：每个行分组中，都允许包含一对或多对 tr 标记
2、不规则表格(colspan和rowspan只能使用HTML属性)
①跨列：从指定的单元格位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要删除
属性：设置td的 colspan属性
取值：要合并单元格的数量
②跨行：从指定的单元格位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要删除
属性：设置td的 rowspan属性
取值：要合并单元格的数量
③ 表格的嵌套：在单元格中允许放置另一个表格（td中）
<table>
<tr>
<td> <div></div> </td>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
____________________________________________________________________________________
列表
1、作用：将具有相似特征或具有先后顺序的内容按从左到右或从上到下的顺序排列
2、列表的组成：所有的列表都由 "列表类型" 和 "列表项" 组成
列表类型：有序列表 和 无序列表
列表项：具体显示在列表里面的内容
3、列表的使用
①有序列表
语法：列表类型：<ol></ol> （Order List）
列表项： <li></li> （List Item）
属性：1、type
作用：指定有序列表的列表项前标志的类型
取值：①1 指定类型为 数字(默认)
② a 指定类型为 小写字母
③ A 指定类型为 大写字母
④ i 指定类型为 小写罗马数字
⑤ I 指定类型为 大写罗马数字
2、start
作用：指定起始编号
取值：阿拉伯数字
②无序列表
语法：列表类型：<ul></ul> （Unorder List）
列表项： <li></li>
属性：1、type
作用：指定列表类型
取值：① disc 实心圆(默认值)
② circle 空心圆
③ square 实心矩形
④ none 没有，不显示列表项
4、列表的嵌套：允许在一个列表中再嵌套另一个列表（被嵌套的列表要放在 li 中）
<ul>
<li>列表项1</li>
<li>列表项2
<ol>
<li></li>
</ol>
</li>
</ul>
5、自定义列表
① 作用：往往用于要给出一类事物的定义情形，如：名词解释、百科等
② 语法：<dl> 定义一个定义列表（dt、dd放在这里面）
<dt></dt> 定义要解释的专有名词/术语
<dd></dd> 定义列表中对专有名词/术语进行解释的内容
</dl>
③ 使用场合：在 "图文混排"时优先使用定义列表
第三章*******************************************************************************
常用结构标记
作用：html5中新提出的一组标记，专门用于构建网页布局
目的：取代div布局，提升布局代码的语义性和可读性，避免页面过于复杂，难以维护
1、<header>元素
① 语法：<header></header>
② 作用：用于定义文档的页眉，即位于页面或某区域的顶部信息
取代<div id="header"></div>
2、<nav>元素
① 语法：<nav></nav>
② 作用：用于标识页面的导航链接模块
取代<div id="nav"></div>
3、<section>元素
① 语法：<section></section>
② 作用：标识内容的小节，可以表示页面的主体内容模块
取代<div id="main"></div>
4、<article>元素
① 语法：<article></article>
② 作用：定义独立于文档的其它内容
比如：论坛中的帖子，博客或微博中的条目，用户评论，音视频，新闻信息
取代<div id="article"></div>
5、<footer>元素
① 语法：<footer></footer>
② 作用：用于定义页面的底部信息
取代<div id="footer"></div>
6、<aside>元素
① 语法：<aside></aside>
② 作用：定义网页任何一个位置的侧边栏信息
取代<div id="left_side"></div> 和 <div id="right_side"></div>
注意：能使用结构标记的地方，尽量使用结构标记，无法被结构标记所取代的，就用DIV来布局
____________________________________________________________________________________
表单
作用：用于显示、收集信息，并提交信息到服务器，表单在页面中是处于隐藏状态的
完整的表单处理由两部分组成：1、实现数据交互的可见界面元素
2、提交后的表单数据处理（服务器端）
表单元素
标记：<form></form>
属性：
1、action
定义表单被提交时发生的动作，即提交给服务器处理程序的地址(服务器的url)，如save.php
具体取值要与服务器端人员协同完成，若省略不写，则默认提交给本页
可用js改变action，提交到不同的页面(服务器地址)
2、method提交方法
定义表单数据的提交方式
取值：①get(默认值)
1、明文提交，即所提交的数据是可以显示在地址栏上的
2、安全性较低
3、有长度限制，最大为2KB
4、场合：向服务器要数据时使用get（搜索关键字提交）
②post
1、隐式提交，所提交的数据是不显示在网页的任何位置处(在Network中)
2、安全性相对较高
3、没有长度限制
4、场合：① 数据提交给服务器进行处理时使用post
② 安全性要求较高的地方，必须用post
③ put、delete ...
3、enctype
作用：指定表单数据的编码方式（指定将什么样的数据提交给服务器）
取值：①application/x-www-form-urlencoded
默认值，可以将表单中的普通字符、特殊字符、标点符号都进行二进制编码，提交给服务器
② multipart/form-data
可以将上传的文件进行二进制编码，提交给服务器(字符、特殊字符、标点符号无法编辑提交)
场合：上传文件时
③ text/plain
只允许将普通数据提交给服务器，特殊字符不行
4、name：定义表单的名称
5、id：定义唯一标识
____________________________________________________________________________________
表单控件（只会提交位于之间的控件）
作用：接收用户输入的数据，并且通过表单将其提交给服务器
自动提交时，只会提交 '有name属性' 且 '未被禁用' 的控件的值
会提交：被选中的单选按钮、复选框，被选中的select的选项
reset按钮不会被提交
表单控件的分类：1、input 元素
2、<textarea></textarea> 多行文本域
3、<select> <option></option> </select> 选择框(下拉，滚动)
4、其它元素
表单控件详解
一、input 元素：用于收集用户信息
标记：<input>或<input/>
主要属性：（通有属性，所有的input元素都具有的属性）
1、type 根据不同的type值，来创建各种类型的输入控件
2、name 定义控件的名称，提交给服务器使用(没有name不会提交)
3、value 控件的值，提交给服务器的值，可设置为默认值
4、disabled 禁用控件，用户不能获取值，也不能提交给服务器
注意：该属性无值，只作为标识：<input disabled>
1、文本框与密码框
文本框：<input type="text">
密码框：<input type="password">
专有属性：①maxlength 限制输入字符的最大数量，取值：数字
② readonly 只读，不允许修改，允许被提交
注意：该属性无值，只作为标识：<input type="text" readonly>
③ name 控件名称，由控件缩写+控件作用组成，如果不设置，则无法提交给服务器
文本框与密码框，缩写为：txt**
匈牙利命名法：1、表示用户姓名的文本框 name="txtName"
2、表示用户年龄的文本框 name="txtAge"
3、表示用户密码的密码框 name="txtPassword" 或 name="txtPwd"
④placeholder 占位符（用来作为提示）
2、单选按钮与复选框
单选按钮：<input type="radio">
复选框： <input type="checkbox">
专有属性：①name 名称，同时具有分组作用
注意：一组的单选按钮或一组的复选框name属性值要一致
radio缩写为rdo**
checkbox缩写为chk**
② value 必给，被选中后提交的值(若没有，会以'on'作为value提交)
③ checked 无值，设置默认被选中
3、按钮
作用：代替用户执行一组动作
①提交按钮：<input type="submit">将表单的控件数据提交给服务器，自动提交
②重置按钮：<input type="reset"> 将表单控件的值恢复到初始化状态
③普通按钮：<input type="button"> 由用户自己定义功能(使用JavaScript)
三种按钮的共有属性：① name 定义按钮名称，缩写为btn**
② value 按钮上的文字
④ 其他按钮：1、图片按钮（提交功能）<input type="image"> 属性：src
2、提交按钮：<button>内容</button> 自动提交
4、隐藏域与文件选择框
① 隐藏域：<input type="hidden">
作用：要提交给服务器但是不想给用户去看的数据，可以放在隐藏域中，缩写为txt**
② 文件选择框：<input type="file">
作用：上传文件时使用，允许打开文件选择框，选择文件进行上传
属性：name 控件的名称，缩写为txt**
注意：1、form的method属性必须为post
2、form的enctype属性必须为multipart/form-data
事件：change，用户选择文件时触发，可用window.URL.createObjectURL(this.files[0])获取文件的url
二、textarea 文本域
作用：允许用户输入多行数据
语法：<textarea></textarea>
属性：1、name 定义控件的名称，缩写为txt**
2、readonly 只读，但能提交值给服务器
3、cols 指定文本域的列数，变相设置控件的宽度
4、rows 指定文本域的行数，变相设置控件的高度
三、select 和 option
<select>
<option>选项</option>
</select>
1、选择框：<select></select>
作用：创建选项框（滚动列表）
属性：①name 名称，缩写sel**，用于提交服务器
② size 指定选项框默认能显示的选项数量，默认值为1，如果大于1的话，则为滚动条列表
③multiple 该属性无值，设置允许多选（按住Ctrl/Command键多选），如multiple="multiple"
2、选项：<option>显示的选项</option>
属性：①value 设置当前选项的值
② selected 预选中，设置默认被选中的选项，该属性无值
select{
-webkit-appearance: none; 取消select在一些浏览器中右边的箭头和高亮的线框
-moz-appearance: none;
background-color: transparent; 取消select的默认背景颜色
border-color: transparent; 取消select的默认边框颜色
}
select:focus{ 取消点击时的轮廓
outline:none
}
所有主流浏览器都不支持 appearance 属性，但Firefox支持替代的-moz-appearance属性，Safari和Chrome支持替代-webkit-appearance属性
选择框样式
select{
height: 4rem;
line-height: 4rem;
margin: auto;
padding: 0 35%;
box-sizing: border-box;
}
<form action="#">
<select name="date">
<option selected value="17194">17194期</option>
<option value="17193">17193期</option>
</select>
</form>
可以用一个span标签代替select，将select绝对定位到span的上方，且层级高于span
在PC端，可以改变option/select的字体、颜色、左右内边距，无法居中
在移动端，无法改变option的任何属性
用js修改select的值: $('select').val('2'); // ()中是option的值
设置提示，并使提示不可选:
<select name="grade">
<option value="" selected disabled style="display:none;">请选择年级</option>
<option value="4">高一</option>
<option value="5">高二</option>
</select>
四、其它元素
1、为控件分组
作用：将一些控件放在一起，并提供一个组名
语法：<fieldset></fieldset> 为控件分组
<legend>标题</legend> 为分组指定标题
2、关联文本与表单控件元素，关联后，点击文字如同点击表单控件一样
语法：<label>关联的文本</label>
属性：for：与该元素相关联的控件的id值
____________________________________________________________________________________
其它常用标记
1、浮动框架
作用：允许在一个浏览器窗口中同时显示多个html文档
语法：<iframe>文字内容</iframe>
注意：当浏览器不支持iframe元素时，文字内容就会显示
属性：①src 浮动框架中的网页的url，即要引入的网页的地址
② width 宽度
③ height 高度
④ frameborder 浮动框架边框，如果不想要边框，设置为0
2、摘要与细节
作用：允许通过用户的点击操作完成页面的内容的伸展(显示)与收缩(隐藏)
语法：<details>
<summary>摘要与细节的标题</summary> 显示的内容
</details>
3、度量元素
作用：在页面中定义一个度量衡，主要用于显示比例信息，如：投票比例，任务完成比例...
语法：<meter>您的浏览器不支持meter</meter>
属性：① min 度量范围的最小值，默认为0
② max 度量范围的最大值，默认为1
③ value 度量元素显示的值，默认为0
4、时间元素
作用：关联时间的不同表现形式
语法：<time>文本</time>
属性：datetime
取值：① 只表示日期：yyyy-mm-dd
② 只表示时间：hh:mm:ss
③ 表示日期和时间：yyyy-mm-ddThh:mm:ss
5、高亮显示文本
语法：<mark></mark>
6、进度条
语法：<meter value="10" min="0" max="100" title="50%"></meter>%
____________________________________________________________________________________
新表单属性（HTML5）缩写都是txt**
新属性：required 非空限制，必填，不能为空
1、输入必须为电子邮件类型：<input type="email">
2、搜索类型：<input type="search"> 后面有个×
3、输入必须符合url规范：<input type="url">
4、电话号码：<input type="tel"> 移动端会自动弹出数字键盘
5、数字类型：<input type="number">
属性：① min 定义控件接受的最小值
② max 定义控件接受的最大值
③ step 控制控件递增的步长，默认为1
6、范围类型：<input type="range">
作用：允许选择指定范围内的一个值
属性：① min 指定范围的最小值（下限值）
② max 指定范围的最大值（上限值）
③ step 值变化的步长
④ value 设置初始值
7、颜色类型：<input type="color">
作用：颜色拾取控件，允许用户选择颜色
8、日期类型：<input type="date">
作用：允许用户选择日期
注意：
一、默认值：① type="date" value="2018-01-28"
② type="time" value="16:01"
③ type="week" value="2018-W04"
④ type="month" value="2018-01"
⑤ type="datetime-local" value="2018-01-19T15:19"
二、获取输入值，应使用change事件，当值改变时触发
三、可使用min和max属性定义最小和最大值，但在部分浏览器中不起作用
9、周类型：<input type="week">
作用：与date类似，但是只能选择周
10、月类型：<input type="month">
作用：只能选择月份
iframe******************************************************************************
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
<iframe frameborder="0" width="100%">
您的浏览器不支持iframe //不支持iframe的浏览器会显示<iframe>和</iframe>之间的文本
</iframe>
属性：
frameborder 取值：1 0 规定是否显示框架周围的边框
src 取值：URL 规定在 iframe 中显示的文档的 URL
height 取值：px % 规定 iframe 的高度
width 取值：px % 定义 iframe 的宽度
name 取值：name 规定 iframe 的名称
marginheight 取值：px 定义 iframe 的顶部和底部的边距
marginwidth 取值：px 定义 iframe 的左侧和右侧的边距
scrolling 取值：yes no auto 规定是否在 iframe 中显示滚动条
JS：
varifr=document.getElementsByTagName("iframe")[0]; //获取iframe元素
ifr.height="500px"; //为iframe的属性赋值
ifr.src='http://baicu.com';
ifr.onload=function(){ //比window.onload更晚触发
var iframeDom=ifr.contentDocument; //获取iframeDOM对象
var sel=iframeDom.getElementById("selected"); //获取iframe中的元素
var selH=getComputedStyle(sel).height; //获取iframe中元素的样式，与普通DOM元素用法一样
ifr.height="100px";
}
iframe的缺点：
① iframe 会阻塞主页面的Onload事件
② 搜索引擎的检索程序无法解读这种页面，不利于SEO
③ iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
④ 不容易打印
_____________________________________________________________________________________
<marquee></marquee>可以实现多种滚动效果，无需js控制
使用marquee标记不仅可以移动文字，也可以移动图片，表格等
语法：<marquee>...</marquee>
说明：在标记之间添加要进行滚动的内容
重要属性：
① 滚动方向direction(包括4个值：up、down、left和right)
语法：<marquee direction="滚动方向">...</marquee>
② 滚动方式behavior(scroll:循环滚动，默认效果；slide:只滚动一次就停止；alternate:来回交替进行滚动)
语法：<marquee behavior="滚动方式">...</marquee>
③ 滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度，以像素为单位)
语法：<marquee scrollamount="5">...</marquee>
④ 滚动延迟scrolldelay(设置滚动的时间间隔，单位是毫秒)
语法：<marquee scrolldelay="100">...</marquee>
⑤ 滚动循环loop(默认值是-1，滚动会不断的循环下去)
语法：<marquee loop="2">...</marquee>
⑥ 滚动范围width、height
⑦ 滚动背景颜色bgcolor
⑧ 空白空间hspace、vspace
_______________________________________________________________________________________
原生HTML的Web组件标准
一、HTML Template
语法：<template></template>
一般感知不到它的存在，它下面的png不会下载，style不会渲染，script不会被加载执行，只是一个模板
在浏览器中表现为#document.fragment文档片段
例：
var template = document.getElementById('temp'); //获取id为temp的文档片段节点
var copy = document.importNode(template.content, true); //将文档片段创建一份副本
copy.getElementById('title').innerHTML = 'Hello World'; //替换文档片段副本中的内容
二、Shadow DOM
是原生组件封装的基本工具，可以实现组件与组件之间的独立性
它致力于创建一个相对独立的空间，可以有选择性的从DOM树上的父节点继承一些属性，甚至继承一棵树
浏览器通过Shadow DOM实现的组件：
<input>、<select>、<video>、<audio>
例：
var div = document.getElementById('div'); //获取id为div组件
var shadowRoot = div.attachShadow({ mode:'closed' }); //在div中创建一个Shadow DOM
在失去引用后，不允许对其进行改造(open允许在任何地方再得到Shadow DOM，继续对其进行改造)
shadowRoot.appendChild(copy); //将节点插入Shadow DOM中
三、Custom Elements
用来包装原生组件的容器，只需要写一个标签就能得到一个完整的组件
语法：class MyElement extends HTMLElement { ... }
生命周期函数：
constructor() 构造函数，用于初始化state、创建Shadow DOM、监听事件等
组件被创建出来，但还没有插入到DOM树中
connectedCallback() 组件实例已被插入到DOM树中，用于进行一些展示相关的初始化操作
组件已被插入DOM树中，或其本身就在html文件中写好在DOM树上了
attributeChangeCallback(attrName, oldVal, newVal) 组件属性发生变化，用于更新组件的状态
需要提供一个属性列表，只有当属性列表中的属性发生变化时才会触发这个函数
如: static get observedAttributes() { return ['awesome'] }
disconnectedCallback() 组件被从DOM树中移除，用于进行一些清理操作
adoptedCallback() 组件实例从一个文档被移动到另一个文档
在操作多个document时会遇到，调用document.adoptNode()转移节点所属document时会触发此函数
注册到HTML标签列表中：
window.customElements.define('my-element', class extends HTMLElement {...})
第一个参数是注册的标签名，必须包含一个-，且不能以-开头
第二个参数是注册的组件的类，直接传入继承的子类类名即可，也可以直接写一个匿名类
使用：<my-element></my-element> 或 document.createElement('my-element')
用法与普通标签几乎一样，但必须带上关闭标签
注意：
由于Custom Elements是通过js定义的，所以在js未执行时处于默认状态，浏览器会直接将其内容显示出来
Custom Elements在被注册后都有一个 :defined 伪类，而注册前没有，可以将其隐藏起来
如：my-element:not(:defined){ display:none }
四、HTML Imports(已废弃)
语法：<link rel="import" href="./head.html">
可以直接import另一个html文件，使用其中的DOM节点
但与ES6 Module太像了，所以基本已被各浏览器废弃
网友评论