HTML部分复习笔记

时间 2019-11-19

标签 html 部分复习笔记栏目 HTML 繁體版

原文原文链接

我的复习的笔记javascript

1. 浏览器

1.1市面常见浏览器

1.2浏览器内核

面试用：css

浏览器内核又能够分红两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。html

渲染引擎它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。html5

JS 引擎则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。java

最开始渲染引擎和 JS 引擎并无区分的很明确，后来 JS 引擎愈来愈独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制做了一个 ACID 来测试引擎的兼容性和性能。内核的种类不少，如加上没什么人使用的非商业的免费内核，可能会有10多种，可是常见的浏览器内核能够分这四种：Trident、Gecko、Blink、Webkit。程序员

（1）Trident(IE内核)web

国内不少的双核浏览器的其中一核即是 Trident，美其名曰 "兼容模式"。面试

表明： IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。chrome

Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特色就是新内核 EdgeHTML。浏览器

（2）Gecko(firefox)

Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特色是代码彻底公开，所以，其可开发程度很高，全世界的程序员均可觉得其编写代码，增长功能。惋惜这几年已经没落了，好比打开速度慢、升级频繁、猪同样的队友flash、神同样的对手chrome。

（3） webkit(Safari)

Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。

如今不少人错误地把 webkit 叫作 chrome内核（即便 chrome内核已是 blink 了），苹果感受像被别人抢了媳妇，都哭晕再厕所里面了。

表明浏览器：傲游浏览器三、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

（4） Chromium/Bink(chrome)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 实际上是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。

（5） Presto(Opera)

Presto 是挪威产浏览器 opera 的 "前任" 内核，为什么说是 "前任"，由于最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上经常使用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 以前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。

2. Web标准

2.1web标准构成

Web标准不是某一个标准，而是由W3C和其余标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分。

样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分。

理想状态咱们的源码： .html .css .js

直观上感觉：

2.2 web标准的好处

一、让Web的发展前景更广阔
2、内容能被更普遍的设备访问
3、更容易被搜寻引擎搜索
4、下降网站流量费用
5、使网站更易于维护
6、提升页面浏览速度

3. HTML基础

3.1 HTML基本骨架格式

<html>

    <head>

        <title></title>

    </head>

    <body>

    </body>

</html>

3.2 HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <html>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的做用开始，通常称为“开始标签（start tag）”，“</标签名>” 表示该标签的做用结束，通常称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

好比 <body>我是文字 </body>

单标签

<标签名 />

单标签也称空标签，是指用一个标签符号便可完整地描述某个功能的标签。

好比 <br />

3.3 HTML标签关系

标签的相互关系就分为两种：

1.嵌套关系

2.并列关系

4. HTML头部部分解释

4.1文档类型<!DOCTYPE>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪一种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为全部的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页做为有效的XHTML文档，并按指定的文档类型进行解析。

DTD 文档类型定义(Document Type Definition)

告诉你心中多年的2个小秘密：

1.目前最新的HTML版本是HTML5，可是各个浏览器对其支持不统一，因此现在大多数的网站还未彻底采用。

2.咱们学习的不是HTML 而是 HTML的下一个版本 XHTML。

4.2 XHTML是什么？

XHTML 指扩展超文本标签语言（EXtensible HyperText Markup Language）

HTML 松散，浏览器支持很差，包括移动端之类的，这时候XHTML 要求严谨一些功能更强大来实现过渡效果。。。

白话文总结： HTML 语法太松散了，形成相似方言不一样地方听不懂。 xhtml 就是严谨一些，相似普通话为了保持一致。

XHTML 有几点要注意：

1.<!DOCTYPE> 后面的第一个标签必须是<html> ， < /html>必须是最后一个标签

2.全部的标签都必需要有一个相应的结束标签

3.标准的XHTML标签应该使用小写

4.全部属性值非空，必须双引号

注解：之后咱们学的都是XHTML了。

4.3 字符集

utf-8是目前最经常使用的字符集编码方式，经常使用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含所有中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界全部国家须要用到的字符

5. HTML经常使用标签

5.1标题标签

为了使网页更具备语义化，咱们常常会在页面中用到标题标签，HTML提供了6个等级的标题，即

从<h1>到<h6>重要性递减。其基本语法格式以下：

注意： h1 标签由于重要，尽可能少用，不要动不动就向你扔了一个h1。通常h1 都是给logo使用。

通常大部分网站用在logo上，其目的并非为了放在页面让用户看，而是为了使seo优化性更好，更容易让搜索引擎搜索到。所以将其隐藏，通常能够为logo设一个比较大的首行缩进。如：text-indent: -999px;还能够为logo设一个固定宽高，利用padding把h1挤出盒子，利用overflow: hidden;溢出隐藏。

5.2 段落标签

在网页中要把文字有条理地显示出来，离不开段落标签，就如同咱们日常写文章同样，整个网页也能够分为若干个段落，而段落的标签就是

是HTML文档中最多见的标签，默认状况下，文本在一个段落中会根据浏览器窗口的大小自动换行。段落标签是一个块级标签。

5.3 水平线标签和换行标签

在网页中经常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，次分明。这些水平线能够经过插入图片实现，也能够简单地经过标签来完成，

就是建立横跨网页水平线的标签。其基本语法格式以下：

<hr />是单标签

在网页中显示默认样式的水平线。

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，而后自动换行。若是但愿某段文本强制换行显示，就须要使用换行标签

<br />

这时若是还像在word中直接敲回车键换行就不起做用了。

5.4 文本格式化标签

在网页中，有时须要为文字设置粗体、斜体或下划线效果，这时就须要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

5.5标签属性

使用HTML制做网页时，若是想让HTML标签提供更多的信息，可使用HTML标签的属性加以设置。其基本语法格式以下：

<标签名属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中：

标签能够拥有多个属性，必须写在开始标签中，位于标签名后面。(你是个人)
属性之间不分前后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。

采起键值对的格式 key="value" 的格式

好比:

属性是宽度

值是 400

注意：通常不提倡直接在标签后面设置标签的属性，这种行内属性虽然可以控制页面效果，但它的可维护性差，书写效率低下，通常咱们专门用css修改页面的样式，并且行内样式的优先级是最高，可能会影响其余的样式的效果体现。

5.5 图像标签

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就须要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式以下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

5.6 连接标签

在HTML中建立超连接很是简单，只需用标签环绕须要被连接的对象便可，其基本语法格式以下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定连接目标的url地址，当为标签应用href属性时，它就具备了超连接的功能。

target：用于指定连接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.外部连接须要添加 http:// www.baidu.com

2.内部连接直接连接内部页面名称便可好比 < a href="index.html"> 首页 </a >

3. 若是当时没有肯定连接目标时，一般将连接标签的href属性值定义为“#”(即href="#")，表示该连接暂时为一个空连接。

4.不只能够建立文本超连接，在网页中各类网页元素，如图像、表格、音频、视频等均可以添加超连接。

5.6.1锚点定位（难点）

经过建立锚点连接，用户可以快速定位到目标内容。建立锚点连接分为两步：

1.使用“<a href=”#id名“>连接文本</a>”建立连接文本。

2.使用相应的id名标注跳转目标的位置。

<a href="#life">3 我的生活</a> 这是点击的地方

<h3 id="life">我的生活</h3> 这是去往的地方

同时还能够作不一样页面的锚点定位：前面加上路径就能够了

<a href="index.html#life">3 我的生活</a> 这是点击的地方

<h3 id="life">我的生活</h3> 这是去往的地方

5.6.2 base 和 nofollow (拓展)

1. base 能够设置总体连接的打开状态

2. nofollow 设置不抓取连接

rel = "nofollow"

5.7特殊字符标签

5.8注释标签

在HTML中还有一种特殊的标签——注释标签。若是须要在HTML文档中添加一些便于阅读和理解但又不须要显示在页面中的注释文字，就须要使用注释标签。其基本语法格式以下：

    <!--注释语句-->

注释内容不会显示在浏览器窗口中，可是做为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就能够看到。

6. 路径

实际工做中，一般新建一个文件夹专门用于存放图像文件，这时再插入图像，就须要采用“路径”的方式来指定图像文件的位置。

路径能够分为：相对路径和绝对路径

6.1相对路径

图像文件和html文件位于同一文件夹：只需输入图像文件的名称便可，如<img src="logo.gif" />。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
图像文件位于html文件的上一级文件夹：在文件名以前加入“../” ，若是是上两级，则须要使用 “../ ../”，以此类推，如<img src="../logo.gif" />。

6.2 绝对路径

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

7. 列表

7.1有序列表

有序列表即为有排列顺序的列表，其各个列表项按照必定的顺序排列定义，有序列表的基本语法格式以下：

示例一：

<ol>

<li>Coffee</li> 运行结果： 1. Coffee

<li>Tea</li> 2. Tea

<li>Milk</li> 3. Milk

</ol>

示例二：

<ol start="50">

<li>Coffee</li> 运行结果： 50. Coffee

<li>Tea</li> 51. Tea

<li>Milk</li> 52. Milk

</ol>

脚下留心：

 1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其余标签或者文字的作法是不被容许的。

2. <li>与</li>之间至关于一个容器，能够容纳全部元素。

3.有序列表会带有本身样式属性，直接忽略。放下那个样式，让CSS来！

可是实际工做中， 较少用 ol

7.2无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式以下：

<ul>

      <li>列表项1</li>

      <li>列表项2</li>

      <li>列表项3</li>

      ......

</ul>

网页上一些有规律的东西均可以用无序列表，例如导航栏，新闻列表 ( 新闻是没有顺序的，不用排队，先到先得，先发布先显示。)等……..

7.3自定义列表

定义列表经常使用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法以下：

<dl>

    <dt>名词1</dt>

    <dd>名词1解释1</dd>

    <dd>名词1解释2</dd>

...

    <dt>名词2</dt>

    <dd>名词2解释1</dd>

    <dd>名词2解释2</dd>

...

</dl>

大部分购物网站的底部导航和其余网站的友情连接都是用自定义列表来写的，这样结构化会更清晰。

8. 表格

8.1表格的建立

在HTML网页中，要想建立表格，就须要使用表格相关的标签。建立表格的基本语法格式以下：

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

...

</table>

在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是建立表格的基本标签，缺一不可，下面对他们进行具体地解释。

<table>< </table>：用于定义一个表格。

2.<tr>< </tr>：用于定义表格中的一行，必须嵌套在 <table> </table>标签中，在 <table> </table>中包含几对 <tr> </tr>，就有几行表格。

3.<td> </td>：用于定义表格中的单元格，必须嵌套在< <tr> </tr>标签中，一对 <tr> </tr>中包含几对< <td> </td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，能够容纳全部的元素

8.2 表格属性

8.3表头和表格结构

表头通常位于表格的第一行或第一列，其文本加粗居中。设置表头很是简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>便可。

在使用表格进行布局时，能够将表格划分为头部、主体和页脚（页脚由于有兼容性问题，咱们不在赘述），具体以下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table>标签中，通常包含网页的logo和导航等头部信息。

<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，通常包含网页中除头部和底部以外的其余内容。

8.4 表格标题

表格的标题： caption

定义和用法

caption 元素定义表格标题。

<table>

   <caption>我是表格标题</caption>

</table>

caption 标签必须紧随 table 标签以后。只能对每一个表格定义一个标题。一般这个标题会被居中于表格之上。有点相似于标题标签，可是只能在表格内部使用。

总结：

表格提供了HTML 中定义表格式数据的方法。
表格中由行中的单元格组成。
表格中没有列元素，列的个数取决于行的单元格个数。
表格不要纠结于外观，那是CSS 的做用。
跨行合并：rowspan 跨列合并：colspan

9. 表单

在HTML中，一个完整的表单一般由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件： 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中一般还须要包含一些说明性的文字，提示用户进行填写和操做。

表单域： 他至关于一个容器，用来容纳全部的表单控件和提示信息，能够经过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。若是不定义表单域，表单中的数据就没法传送到后台服务器。

9.1 input控件

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不一样的控件类型。除了type属性以外，<input />标签还能够定义不少其余的属性，其经常使用属性以下表所示。

9.1.1 label标签

label 标签为 input 元素定义标注（标记）。

做用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会得到输入焦点

如何绑定元素呢？

for 属性规定 label 与哪一个表单元素绑定。

<label for="male">Male</label>

9.1.2 单选按钮

示例：

男 <input type="radio" name="sex" />

女 <input type="radio" name="sex" checked="checked" />

9.2 H5中新增的input表单属性：

<input type="radio" name="sex" id="male" value="male">

9.2.1 autocomplete(自动完成)

可以记录用户的输入,而且给予提示,这就是autocomplete的做用

取值:
适用状况:
示例代码:

on:开启
off:关闭

通常用在input标签中

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>   Title

</head>

<body>

<form action="" >

<input type="text" autocomplete="on" name="userName">

<input type="submit">

</form>

</body>

</html>

使用注意:

标签须要添加name属性
只有提交了一次之后才会出现提示

9.2.2 autofocus(获取焦点)

当某一页有不少个可供输入的元素时,用户须要使用鼠标点选元素进行输入,为了提高用户体验,咱们能够经过autofocus属性来指定页面中默认选中的元素

使用方法:
示例代码:

须要哪一个表单元素得到焦点,只须要添加该属性便可
不须要赋值,只须要添加属性便可,见示例代码

<!DOCTYPE html>·

<html lang="en">·

<head>·

<meta charset="UTF-8">·

<title></title>·         Title

</head>·

<body>·

<form action="" >·

<input type="text"  name="userName">·         姓名:

<br/>·

<input type="number" name="telNum" autofocus>·         年龄

<input type="submit">·

</form>·

</body>·

</html>·

使用注意:

在没有该属性以前,可以使用JavaScript来指定元素
若是页面中多个元素设置了该属性,最后一个会得到焦点

9.2.3 form(表单关联)

当咱们想要提交数据时,须要把表单元素放到对应的form标签中,这个属性的出现让表单元素的放置位置不在受到约束

使用方法:
示例代码

想要某个表单外元素跟该表单创建联系,只须要为元素添加属性form="表单id"设置为想要创建联系的表单id便可

让表单外输入爱好的input标签跟id为userForm表单创建联系

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>   Title

</head>

<body>

<form action="" id="userForm" >

<input type="text"  name="userName">   姓名:

<br/>

<input type="number" name="telNum" autofocus>   年龄:

<br/>

<input type="submit">

</form>

<br/>

<input type="text" name="habbit" form="userForm">爱好:

</body>

</html>

使用注意:

虽然这个属性可让元素的放置位置不在成为限制,可是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题之外,也为了提高代码的可读以及可维护性

9.2. 4multiple(多选)

若是想要在某个input标签中选择多个值,可使用该属性

适用状况:
示例代码

该属性能够用在type为file标签内

选择多文件时,须要按住ctrl按钮

<input type="file" multiple >o

9.2.5 Placeholder(占位提示)

输入元素内默认显示一些提示信息,当用户输入以后自动消失,这种效果咱们须要使用JavaScript来实现,知道出现了placeholder这个属性

使用方式:

直接为该属性赋值想要提示的内容便可

适用状况:
示例代码:

想要不经过JavaScript来实现提示功能

显示效果以下

<input type="text"placeholder="输入用户名">

9.3 textarea控件(文本域)

若是须要输入大量的信息，就须要用到<textarea></textarea>标签。经过textarea控件能够轻松地建立多行文本输入框，其基本语法格式以下：

<textarea cols="每行中的字符数" rows="显示的行数">

      文本内容

</textarea

HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就能够规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,可是Chrome,Safari和FireFox渲染的效果不一样，能够拖动右下角图标改变大小。可是过度拖动大小会影响页面布局，使页面变得不美观。能够经过添加以下两个样式禁用拖动，固定大小：

1：完全禁用拖动（推荐）

resize: none;

2：只是固定大小，右下角的拖动图标仍在

width: 200px;

height: 100px;

max-width: 200px;

max-height: 100px;

9.4下拉菜单

使用select控件定义下拉菜单的基本语法格式以下

...

</select>

注意：

<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

知识：利用JQ中的prop（）方法来获取option 和 radio属性的input单选按钮的属性时，要这样操做（下面例子），再也不是selected =" selected "和checked=" checked "了。

$('#formId input[type=checkbox][value='+ el +']').prop("checked",true);

9.5 普通按钮button

<button> 按钮 </button> 单独的一个表单控件，就是普通按钮的意思。只不过它是双标签哦！

9.6 表单域

在HTML中，form标签被用于定义表单域，即建立一个表单，以实现用户信息的收集和传递，form中的全部内容都会被提交给服务器。建立表单的基本语法格式以下：

<form action="url地址" method="提交方式" name="表单名称">

      各类表单控件

</form>

经常使用属性：

Action 在表单收集到信息后，须要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method 用于设置表单数据的提交方式，其取值为get或post。
name 用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每一个表单都应该有本身表单域。

10. HTML5新的标签

10.1语义标签

举个例子，语义标签就是标签自己表明了必定的含义

HTML4.01

语义标签

p标签：段落
img标签：图片
。。。等等

语义性不强的：

div:做为容器存在

在网站布局中使用普遍
搜索引擎友好，可是搜索引擎更友好的依旧是内容

10.2 HTML5部分新语义标签

HTML5中有部分语义标签，在使用时十分简单，可是因为语义性更强，更利于开发者以及搜索引擎对于网页的理解。

语义标签：

标签名	做用
nav	表示导航
header	表示页眉
footer	表示页脚
main	文档主要内容
article	文章
aside	主题内容以外
footer	文档或者页的页脚

10.3 实际应用

若是咱们布局以下页面
HTML4.01中代码：

因为篇幅问题，这里只贴出body内代码

<body>

<!--头部start-->

<div class="header">

<!--导航start-->

<ul class="nav">

<li><a href="#"></a></li>       导航1

<li><a href="#"></a></li>       导航2

<li><a href="#"></a></li>       导航3

</ul>

<!--导航end-->

</div>

<!--头部end-->

<!--主体start-->

<div class="main">

<!--文章start-->

<div class="article"></div>

<!--文章end-->

<!--侧边栏start-->

<div class="aside"></div>

<!--侧边栏end-->

</div>

<!--主体end-->

<!--底部start-->

<div class="footer"></div>

<!--底部end-->

</body>

HTML5中代码：

这里直接使用新学习的语义标签

<body>

<!--头部start-->

<header>

<!--导航start-->

<nav>

<a href="#"></a>       导航1

<a href="#"></a>       导航2

<a href="#"></a>       导航3

</nav>

<!--导航end-->

</header>

<!--头部end-->

<!--主体start-->

<main>

<!--文章start-->

<article></article>

<!--文章end-->

<!--侧边栏start-->

<aside></aside>

<!--侧边栏end-->

</main>

<!--主体end-->

<!--底部start-->

<footer></footer>

<!--底部end-->

</body>

使用HTML5中新的语义标签,内容更为直观,即便删除了注释,依旧可以看出该标签的做用,语义性更强
说的通俗一些,内容同样,可是代码更少了_

10.4 datalist

该元素规定了输入区域的选项列表,可让用户有一些选项

测试代码:

注:测试代码只是body内部的代码
其中option标签做为单标签,双标签均可以使用

<input type="url" list="url_list" name="link"/>网址:

<datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn"/>

<option label="Google" value="http://www.google.com"/>

<option label="Microsoft" value="http://www.microsoft.com"/>

</datalist>

<input type="tel" list="tel_list">电话:

<datalist id="tel_list">

<option value="186xxx" label="移动"></option>

<option value="187xxx" label="联通"></option>

<option value="135xxx" label="天翼"></option>

</datalist>

datalist:

id:id属性,想要使用该datalist的元素须要经过list=id的方式来指定

option:

value:指定具体的值
label:提示信息

注意:

若是input的type为url,option中对应的value须要使用http://开始

11.HTML5多媒体标签

11.1网页音视频解决方案发展

虽然早期的html并无提供支持视频或者音频播放的标签,可是这并不影响人们分享的欲望

支持方式1:
支持方式2

使用embed直接将视频塞入页面,而后就可使用Windows Media Player,Apple QuickTime或者其实的视频播放器来建立播放窗口
可是这种方式对于视频自己不可控,兼容性问题也没法顾及

使用浏览器插件,一个是微软的Silverlight,还有使用最广泛的Adobe Flash
Flash不但彻底解决了浏览器支持问题,并且装机率之高让人咋舌(基本上99%的计算机都安装了Flash播放器)
使用Flash播放视频除了要学习Flash这项技术自己之外,更关键的是在iPhone,ipad并不支持这项技术
若是想要查看视频的播放方式,将鼠标移动到视频窗口,右键若是能够看到Flash等文字,那么该网站使用的就是Flash插件

多媒体标签:

Html5为了解决使用Flash的各类问题推出了多媒体标签
因为视频格式问题,不一样的浏览器对于相同格式的视频支持不一样,须要准备多份视频
没法对播放的视频提供很好的保护效果,由于用户能够直接对视频文件另存为

总结:

虽然html5中的多媒体标签有各类很差,但咱们仍是须要拥抱这项新的技术,由于他的用法,真的十分简单

11.2 audio标签

示例代码1:

下面演示一种最简单的使用方式
src:音频的地址
controls:音频播放控制器
autoplay:自动播放
loop:循环
poster:指定视频不播放时显示的封面

<audio src="song.ogg" controls="controls" autoplay loop>

</audio>

示例代码2:

因为音频格式在不一样浏览器中支持状况不一样,考虑兼容性问题,咱们须要使用下述代码
source:指定多个音频,若是找到了当前浏览器支持的,那么会直接使用,若是全部的source标签格式都不支持,会显示最后的文本内容

src:音频的地址

<audio controls="controls">

<source src="song.ogg" type="audio/ogg">

<source src="song.mp3" type="audio/mpeg">

你的浏览器不支持此种格式

</audio>

11.3 Video标签

Video标签用来播放视频,用法跟audio标签十分相似

示例代码1:

src:视频地址
controls:控制器
autoplay:自动播放
loop:循环
width:宽度
height:高度
poster封面

<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">

</video>

示例代码2:

因为视频在不一样浏览器中支持状况不一样,考虑兼容性问题,咱们须要使用下述代码
source:指定多个视频,若是找到了当前浏览器支持的,那么会直接使用,若是全部的source标签格式都不支持,会显示最后的文本内容
src:视频的地址

<video width="320" height="240" controls="controls">·

<source src="movie.ogg" type="video/ogg">·

<source src="movie.mp4" type="video/mp4">·

·       你的浏览器不支持video标签

</video>

12.新事件属性和data属性

12.1 oninvalid

元素无效事件:配合表单验证,会在验证失败时触发

示例代码

// 获取元素

vardocument'#input'input =.getElementById();

function()input.oninvalid ={

'验证失败'    alert();

12.2 oninput

配合input标签使用,当用户在输入内容是触发

vardocument'#input' input =.getElementById();

function()input.oninput ={

console'正在输入内容'   .log();

12.3 data属性

data-*这个属性解决了自定义Html标签内属性取值的问题,只要咱们想,能够往HTML标签中添加任意个数的属性

语法:

data-:这个是固定格式
data-xxx:xxx是自定义的值

注意:

属性名不该该包含任何大写字母，而且在前缀 "data-" 以后必须有至少一个字符
属性值能够是任意字符串
不要使用纯数字,特殊字符等做为自定义值
若是data以后使用-链接多个值,取值时,须要使用驼峰命名

示例代码:

<ul>

<li data-animal-type="fish">Salmon</li>

<li data-animal-type="spider">Tarantula</li>

</ul>

获取方式:

// 假定有这么一个元素

var domObj = document.getElementById("liObj");

var type = domObj.dataset["type"]

var domObj2 = document.getElementById("liObj2");

var type2 = domObj.dataset["animalType"]

</script>

总结:

属性名为:data-xxx

xxx为自定义值,不能使用大写字母(不建议使用纯数字,或者奇怪字符)

获取方式:

在js中获取了元素以后,经过dataset["key"]便可获取保存的值
其中key为data-xxx中 xxx的字母
若是有多个-分隔,使用驼峰命名

好比 data-star-name=fox
获取为dateset[starName]