H5知识点大总结勾起你的欲望

第 10 章 表单元素[中]

学习要点：

1.type 属性总汇 2.type 属性解析

本章主要探讨 HTML5 中表单中 input 元素的 type 属性，根据不同的值来显示不同的输入框。

一．type 属性总汇

input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的属性值，可以限制输入的内容。

解释：当 type 值为 text 时，呈现的就是一个可以输入任意字符的文本框，这也是默认行为。并且，还提供了一些额外的属性。

属性名称 说明

//设置文本框长度

<input type="text" size="50">

//设置文本框输入字符长度

<input type="text" maxlength="10">

//设置文本框的初始值

<input type="text" value="初始值">

//设置文本框输入提示

<input type="text" placeholder="请输入内容">

//设置文本提供的建议值

<input list="footlist">

<datalist id="footlist">

<option value="苹果">苹果</option> <option value="桔子">桔子</option> <option value="香蕉" label="香蕉"> <option value="梨子">

</datalist>

//设置文本框内容为只读，可以提交数据

<input type="text" readonly>

//设置文本框内容不可用，不可以提交数据

<input type="text" disabled>

2.type 为 password 值时

<input type="password">

解释：当 type 值为 password 时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性。

这里除了正则和验证需要放在下一节，其余和文本框一致。

3.type 为 search 时

<input type="search">

解释：和文本框一致，在除 Firefox 浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和 text 一致。

4.type 为 number、range 时

<input type="number">

<input type="range">

解释：只限输入数字的文本框，不同浏览器可能显示方式不同。生成一个数值范围文本框，只是样式是拖动式。额外属性如下：

//范围和步长

<input type="number" step="2" min="10" max="100">

5.type 为 date 系列时

<input type="date">

<input type="month">

<input type="time">

<input type="week">

<input type="datetime">

<input type="datetime-local">

解释：实现文本框可以获取日期和时间的值，但支持的浏览器不完整。我们测试 Chrome 和 Opera 支持，其他浏览器尚未支持。所以，在获取日期和时间，目前还是推荐使用 jQuery 等前端库来实现日历功能。额外属性和 number 一致。

6.type 为 color 时

<input type="color">

解释：实现文本框获取颜色的功能，最新的现代浏览器测试后 IE 不支持，其余的都能显示一个颜色对话框提供选择。

7.type 为 checkbox、radio 时

音乐 <input type="checkbox">

体育 <input type="checkbox">

<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女

解释：生成一个获取布尔值的复选框或固定选项的单选框。额外属性如下：

//默认勾选，默认值为 1

<input type="checkbox" name="music" checked value="1">

8.type 为 submit、reset 和 button 时

<input type="submit">

解释：生成一个按钮，三种模式：提交、重置和一般按钮，和<button>元素相同。

submit生成一个提交按钮

reset生成一个重置按钮

button生成一个普通按钮

如果是 submit 时，还提供了和<button>元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。

9.type 为 image 时

<input type="image" src="img.png">

解释：生成一个图片按钮，点击图片就实现提交功能，并且传送了分区响应数据。图片按钮也提供了一些额外属性。

10.type 为 email、tel、url 时

<input type="email">

<input type="tel">

<input type="url">

解释：email 为电子邮件格式、tel 为电话格式、url 为网址格式。额外属性和 text 一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到 http://就能通过。

11.type 为 hidden 时

<input type="hidden">

解释：生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。

12.type 为 file 时

<input type="file">

解释：生成一个文件上传控件，用于文件的上传。额外提供了一些属性：

accept="image/gif, image/jpeg, image/png"

第 10 章 表单元素[下]

学习要点：1.其他元素2.输入验证

本章主要探讨 HTML5 中表单中剩余的其他元素，然后重点了解一下表单的输入验证功

能。

一．其他元素

表单元素还剩下几个元素没有讲解，包括下拉框列表 select、多行文本框 textarea、和 output 计算结果元素。

1.生成下拉列表

<select name="fruit">

<option value="1">苹果</option> <option value="2">橘子</option> <option value="3">香蕉</option>

</select>

解释：<select>下拉列表元素至少包含一个<option>子元素，才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素，还包含了一些额外属性。

autofocus获取焦点

required选择验证，设置后必须选择才能通过

//设置高度并实现多选

<select name="fruit" size="30" multiple>

//默认首选

<option value="2" selected>橘子</option>

//使用 optgroup 进行分组，label 为分组名称，disabled 可以禁用分组

<optgroup label="水果类">

<option value="1">苹果</option>

<option value="2" selected>橘子</option> <option value="3" label="香蕉">香蕉</option>

</optgroup>

2.多行文本框

<textarea name="content">请留下您的建议！ </textarea>

解释：生成一个可变更大小的多行文本框。属性如下：

//设置行高和列宽，设置插入换行符

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

3.计算结果

<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber"> <input type="number" id="num1"> x <input type="number" id="num2">

<output for="num1 num2" name="res">

</form>

解释：output 就是计算两个文本框之间的值，其实就是内嵌了 JavaScript 功能。

二．输入验证

HTML5 对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery 等前端库来实现丰富的验证功能和显示效果。

//必须填写一个值

<input type="text" required>

//限定在某一个范围内

<input type="number" min="10" max="100">

//使用正则表达式

<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">

//禁止表单验证

<form action="http://li.cc" novalidate>

第 11 章 全局属性和其他

学习要点：

1.实体

2.元数据

3.全局属性

本章主要探讨 HTML5 中的 HTML 实体、以及 HTML 核心构成的元数据，最后了解一下 HTML 中的全局属性。

一．实体

HTML 实体就是将有特殊意义的字符通过实体代码显示出来。

二．元数据

<meta>元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个<meta>元素。

1.指定名/值元数据对

<meta name="author" content="bnbbs">

<meta name="description" content="这是一个 HTML5 页面"> <meta name="keywords" content="html5,css3,响应式"> <meta name="generator" content="sublime text 3">

2.声明字符编码

<meta charset="utf-8">

3.模拟 HTTP 标头字段

//5 秒跳转到指定 URL

<meta http-equiv="refresh" content="5;http://li.cc">

//另一种声明字符编码

<meta http-equiv="content-type" content="text/html charset=utf-8">

三．全局属性

在此之前，我们涉及到的元素都讲解了它的局部数据，当然也知道一些全局属性，比如id。全局属性是所有元素共有的行为，HTML5 还提供了一些其他的全局属性。

1.id 属性

<p id="abc">段落</p>

解释：id 属性给元素分配一个唯一标识符。这种标识符通常用来给 CSS 和 JavaScript 调用选择元素。一个页面只能出现一次同一个 id 名称。

2.class 属性

<p class="abc">段落</p> <p class="abc">段落</p> <p class="abc">段落</p>

解释：class 属性用来给元素归类。通过是文档中某一个或多个元素同时设置 CSS 样

式。

3.accesskey 属性

<input type="text" name="user" accesskey="n">

解释：快捷键操作，windows 下 alt+指定键，前提是浏览器 alt 并不冲突。

4.contenteditable 属性

<p contenteditable="true">我可以修改吗</p>

解释：让文本处于可编辑状态，设置 true 则可以编辑，false 则不可编辑。或者直接设置属性。

5.dir 属性

<p dir="rtl">文字到右边了</p>

解释：让文本从左到右（ltr），还是从右到左（rtl）。

6.hidden 属性

<p hidden>文字到右边了</p>

解释：隐藏元素。

7.lang 属性

<p lang="en">HTML5</p>

解释：可以局部设置语言。

8.title 属性

<p title="HTML5 教程">HTML5</p>

解释：对元素的内容进行额外的提示。

9.tabindex 属性

<input type="text" name="user" tabindex="2"> <input type="text" name="user" tabindex="1">

解释：表单中按下 tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。

10.style 属性

<p style="color:red;">CSS 样式</p>

解释：设置元素行内 CSS 样式。

第 12 章 CSS 入门

学习要点：

1.使用 CSS

2.三种方式

3.层叠和继承

本章主要探讨 HTML5 中 CSS（层叠样式表），它是用来对 HTML 文档外观的表现形式进行排版和格式化。

一．使用 CSS

CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS 属性和属性值。

<p style="color:red;font-size:50px;">这是一段文本</p>

解释：style 是行内样式属性。color 是颜色属性，red 是颜色属性值；font-size是字体大小属性，50px 是字体大小属性值。

二．三种方式

创建 CSS 样式表有三种方式：1.元素内嵌样式；2.文档内嵌样式；3.外部引入样式。

1.元素内嵌样式

<p style="color:red;font-size:50px;">这是一段文本</p>

解释：即在当前元素使用 style 属性的声明方式。

2.文档内嵌样式

<style type="text/css"> p {

color: blue; font-size: 40px;

}

</style>

<p>这是一段文本</p>

解释：在<head>元素之间创建<style>元素，通过选择器的方式调用指定的元素并设置相关 CSS。

3.外部引用样式

<link rel="stylesheet" type="text/css" href="style.css">

//style.css

@charset "utf-8";

p {

color: green;

font-size: 30px;

}

解释：很多时候，大量的 HTML 页面使用了同一个组 CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过<link>元素去引入它即可。@charset "utf-8" 表明设置 CSS 的字符编码，如果不写默认就是 utf-8。如果有多个.css 文件，可以使用 @import 导入方式引入.css 文件。只不过，性能不如多个<link>链接。

三．层叠和继承

所谓的样式表层叠：指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式表继承：指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式，是这个元素在这个浏览器运行时默认附加的样式。

1.浏览器样式

<b>这个元素隐含加粗样式</b>

<span style="font-weight:bold;">这个元素通过 style 加粗</span>

解释：<b>元素就是具有加粗的隐含样式，而<span>元素没有任何隐含样式，通过 style 属性设置样式。

2.样式表层叠

样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高：

(1).浏览器样式（元素自身携带的样式）；

(2).外部引入样式（使用<link>引入的样式）；

(3).文档内嵌样式（使用<style>元素设置）；

(4).元素内嵌样式（使用 style 属性设置）。

//元素内嵌

<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>

//文档内嵌

<style type="text/css"> p {

color:blue; font-weight: bold;

}

</style>

//外部引入

@charset "utf-8"; p {

color: green;

font-style: italic;

}

如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案标记成重要样式（important）。

//强行设置最高优先级

color: green !important;

3.样式继承

如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式集成下来。

//<b>元素继承了<p>元素的样式

<p style="color:red;">这是<b>HTML5</b></p>

样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit。

//强制继承布局样式

<p>这是<b>HTML5</b></p>

<style type="text/css"> p {

border: 1px solid red;

}

b {

border : inherit;

}

</style>

第 13 章 CSS 选择器[上]

学习要点：1.选择器总汇2.基本选择器3.复合选择器4.伪元素选择器

本章主要探讨 HTML5 中 CSS 选择器，通过选择器定位到想要设置样式的元素。目前 CSS 选择器的版本已经升级至第三代，即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式，主要分为三大类。

一．选择器总汇

本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：

二．基本选择器

使用简单且频率高的一些选择器归类为基本选择器。

1.通用选择器

* {

border: 1px solid red;

}

解释：“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括<html>和<body>标签。可以使用如下元素标记测试效果：

<p>段落</p> <b>加粗</b> <span>无</span>

通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。

2.元素选择器

p {

color: red;

}

<p>段落</p>

解释：直接使用元素名称作为选择器名即可。

3.ID 选择器

#abc {

font-size: 20px;

}

<p id="abc">段落</p>

解释：通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。

4.类选择器

.abc {

border: 1px solid red;

}

<b class="abc">加粗</b> <span class="abc">无</span>

解释：通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。

b.abc {

border: 1px solid red;

}

解释：也可以使用“元素.class 值”的形式，限定某种类型的元素。

<span class="abc edf">无</span>

解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。

5.属性选择器

//所需 CSS2 版本 [href] {

color: orange;

}

解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。

//所需 CSS2 版本 [type="password"] {

border: 1px solid red;

}

解释：匹配属性值的属性选择器。

//所需版本 CSS3 [href^="http"] {

color: orange;

}

解释：属性值开头匹配的属性选择器。

//所需版本 CSS3 [href$=".com"] {

color: orange;

}

解释：属性值结尾匹配的属性选择器。

//所需版本 CSS3 [href*="baidu"] {

color: orange;

}

解释：属性值包含指定字符的属性选择器。

//所需版本 CSS2 [class~="edf"] {

font-size: 50px;

}

解释：属性值具有多个值时，匹配其中一个值的属性选择器。

//所需版本 CSS2 [lang|="en"] {

color: red;

}

解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<i lang="en-us">HTML5</i>。

二．复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

1.分组选择器

p,b,i,span {

color: red;

}

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

2.后代选择器

p b {

color: red;

}

解释：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。

3.子选择器 ul > li {

border: 1px solid red;

}

<ul> <li>我是儿子

<ol> <li>我是孙子</li> <li>我是孙子</li>

</ol>

</li>

<li>我是儿子</li> <li>我是儿子</li>

</ul>

解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。

4.相邻兄弟选择器

p + b {

color: red;

}

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

5.普通兄弟选择器

p ~ b {

color: red;

}

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

三．伪元素选择器

伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。

1.::first-line 块级首行

::first-line {

color: red;

}

解释：块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。

2.::first-letter 块级首字母

::first-letter {

color: red;

}

解释：块级元素的首行字母。

3.::before 文本前插入

a::before {

content: ‘点击-‘;

}

解释：在文本前插入内容。

4.::after 文本后插入

a::before {

content: ‘-请进‘;

}

解释：在文本后插入内容。