c1认证学习（css+html+js部分）

 表单标签

title可以用在任何元素上，把鼠标移动到元素上面，就会显示title的内容，以达到补充说明或者提示的效果。

pattern属性规定用于验证输入字段的正则。

input元素使用title属性可以在输入内容不符合该正则时，给出提示语判断输入是否正确的提示语句只在表单提交时显示

text	普通文本框，一般默认20个字符宽度
textarea	多行文本框
button	普通按钮
radio	单选框
checkbox	多选框
reset	表单重置按钮
submit	表单提交按钮
password	密码输入框，密码字段使用圆点或星号代替

转义字符

显示	实体名称	实体编号	说明
空格	 	 	半角不换行的空格，相当于按下键盘space键产生的空格，受字体影响，不同字体表现一致
空格	 	 	半角空格，占1/2个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	 	 	全角空格，占1个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
<	&lt;	&#60;	小于号
>	&gt;	&#62;	大于号
&	&amp;	&#38;	&符号
"	&quot;	&#34;	双引号
'	------	&#39;	单引号
©	&copy;	&#169;	版权符号
™	&trade;	&#8482; 或 &#153;	商标符号
®	&reg;	&#174;	注册商标符号
$	------	&#36;	美元符号
¥	&yen;	&#165;	人民币符号
×	&times;	&#215;	乘号
÷	&divide;	&#247;	除号

 head头部

link

属性	属性值	描述
href	URL	设置目标链接的文件路径
rel	stylesheet、icon、sidebar、prev等	规定当前文档与链接文档之间的关系
type	MIME_type	目标连接文档的MIME类型

还有这种操作

涨知识了，学无止境

三、任务内容

head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>

1、<title></title>

用于定义文档的标题

该标题会出现在浏览器窗口的标题栏或状态栏上

把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

例：<title>CSDN能力认证中心</title>
 

2、<link />

用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标

<link />是空元素，仅包含属性，只能存在于head部分

属性	属性值	描述
href	URL	设置目标链接的文件路径
rel	stylesheet、icon、sidebar、prev等	规定当前文档与链接文档之间的关系
type	MIME_type	目标连接文档的MIME类型

3、<style></style>

用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间

4、<script></script>

用于给页面添加脚本

可以直接在script开始和结束标签之间包含JavaScript脚本)

也可以通过script的src属性链接外部脚本文件

5、<meta />

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值

keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一

名称	值		描述
keywords	关键字		描述网页关键字，使用逗号分隔
description	描述内容		网站主要内容的简短描述
author	作者		描述网站作者
viewport	width	viewport视口宽度，设置为device-width表示为设备的宽度	定义viewport的初始大小，仅用于移动设备
	height	viewport视口高度
	maximum-scale	最大缩放比例
	initial-scale	初始缩放比例
	minimum-scale	最小缩放比例
	user-scalable	是否允许用户缩放

charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等

http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：

• content-type：规定文档的字符编码，等同于charset属性设置字符编码

• default-style：设置默认CSS样式表组的名称

• refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

6、<base />

用于为页面中的所有相对链接设置默认URL或默认target属性

 background

简写

background

• 简写属性可以在一个属性声明中设置一个或多个背景属性，常用的属性设置如上表

background: #ff0000 url('smiley.gif') no-repeat cover;

 效果一样，注意某些顺序限制 ，比如尺寸在位置前

css文本属性

果然学一遍是不够的

1、color属性

用于设置文本的颜色，可设置的值有：

• 颜色名，如【red】

• 十六进制值，如【#FFFFFF】

• RGB值，如【rgb(255, 0, 0)】

• rgba值，如【rgba(255, 0, 0, 0.9)】

2、font-size属性

用于设置文本字体大小，可以设置为绝对大小，单位为px，也可设置为相对大小，单位为rem、em等

字体大小未设置时默认字体大小为16px

3、font-weight属性

• 用于设置文本的粗细，可设置的值有：

属性值	说明
normal	标准字符（默认）
bold	粗体字符
bolder	更粗的字符
lighter	更细的字符
100、200、300、400、500、 600、700、800、900	400相当于normal  700相当于bold  数值越大字体越粗

4、font-family属性

用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。如果浏览器不支持第一个字体，则会尝试下一个，以此类推

font-family："Times New Roman", "Georgia", "Serif";

5、text-align属性

用于设置文本的水平对齐方式，可设置的值有：

• center（居中对齐）

• left（左对齐）

• right（右对齐）

文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐

6 line-height属性

用于设置行间距，可设置的值如下

• 数字：行间距为当前字体大小乘此数字

• 固定值：设置固定的行间距，如20px

• 百分比：行间距为当前字体大小乘百分比

7、text-indent属性

用于指定首行缩进值，可设置的值如下

• 固定值：设置固定首行缩进，如20px

• 百分比：首行缩进值为父元素宽度乘此百分比

8、letter-spacing属性

用于设置字间距，设置固定值为字间距，如10px

9、word-spacing属性

用于指定文本中单词之间的间距，设置固定值为单词间距，如10px

10、text-decoration

用于设置文本的装饰线，是下表属性的简写

属性	属性值		描述
text-decoration-line	none	无线条	设置要使用哪种文本装饰的类型  （下划线、上划线、删除线）。
	underline	下划线
	overline	上划线
	line-through	删除线
text-decoration-color	颜色名、十六进制颜色、rgb等		设置装饰线颜色
text-decoration-style	solid	实线	设置装饰线的样式
	double	双实线
	dotted	点划线
	dashed	虚线
	wavy	波浪线

• 例：

text-decoration: underline wavy red;  /* 表示为红色波浪形下划线 */

11、text-transform

用于设置文本大小写字母，常用属性如下

• uppercase：全部文本均为大写字母

• lowercase：全部文本均为小写字母

• capitalize：文本的每个单词首字母为大写字母

12、writing-mode

设置文本在水平或垂直方向的排布方式

• horizontal-tb：文本流在水平方向从上到下排列，文字方向为水平方向

 

• sideways-lr：文本流在垂直方向，从下至上、从左至右排列（该属性值不兼容webkit内核浏览器）

 

• sideways-rl：文本流在垂直方向，从上至下、从右至左排列（该属性值不兼容webkit内核浏览器）

 

• vertical-lr：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向

 

• vertical-rl：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致

 

13、white-space

用于设置文本的空白符处理方式，属性值如下

属性值	描述
normal	合并空格，换行符转化为一个空格，允许自动换行
nowrap	合并空格，换行符转化为一个空格，不允许自动换行
pre	保留空格，保留换行符，不允许自动换行
pre-line	合并空格，保留换行符，允许自动换行
pre-wrap	保留空格，保留换行符，允许自动换行
break-spaces	保留空格，保留换行符，允许自动换行，行尾空格保留，空白符占用空间

display块级元素和行内元素

1、块级元素

• 在浏览器显示时总是独占一行

• 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响

• 可以包含内容、行内元素和其他块级元素

• 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度

• 常见块级元素：div、form、footer、h1-h6、ol、ul、p、video

• 设置display属性为display: block可将元素转换为块级元素

2、行内元素

• 不独占一行，默认不自动换行

• 宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响

• 一般只能包含内容和其他行内元素，不可包含块级元素

• 设置宽高无效，宽高默认为内容的宽高

• 常见行内元素：span、label、a、em、strong、img

• 设置display属性为display: inline可将元素转换为行内元素
  ps: img元素为可替换元素，宽高是由其加载的内容决定的，可以使用CSS覆盖其宽高等样式

3、行内块级元素

• 综合块级元素与行内元素的特性

• 不独占一行

• 元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响

• 宽高未设置时默认为内容宽高

• 常见行内块级元素：button、input、textarea、select

• 设置display属性为display: inline-block可将元素设置为行内块级元素

position定位

position属性用于指定元素的定位类型，属性值可为

• static（默认定位）

• relative（相对定位）

• absolute（绝对定位）

• fixed（固定定位）

• sticky（粘性定位）

设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置

math

1、Math对象的常用方法：

方法名称	作用	示例	结果
max()	用于确定一组数值中的最大值	Math.max(11,3,17,6)	17
min()	用于确定一组数值中的最小值	Math.min(11,3,17,6)	3
ceil()	执行向上取整，即它总是将数值向上取整为最接近的整数	Math.ceil(25.1)	26
floor()	执行向下取整，即它总是将数值向下取整为最接近的整数	Math.floor(25.8)	25
round()	执行标准取整，即它总是将数值四舍五入为最接近的整数	Math.round(25.8)	26
random()	该方法返回介于 0 到 1 之间一个随机小数，包括 0 和不包含 1	Math.random()	例如0.3123868992708143
abs()	该方法返回参数的绝对值	Math.abs(-9)	9
sqrt()	该方法返回参数的平方根	Math.sqrt(49)	7

内置函数

1、eval

eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数，一般情况不建议使用。

var a = eval("2+2") 
console.log(a) 
// 预期输出：4 
// 这里eval把字符串"2+2"，当成js代码执行，得到结果4 

eval("console.log('hello world')") 
// 预期输出：hello world 
// 这里eval把字符串"console.log('hello world')"，当成js代码执行，打印输出：hello world

2、isNaN

用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。比如说，空字符串就明显“不是数值（not a number）”。这种怪异行为起源于："不是数值（not a number）"在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题：被测试的值在被强制转换成数值时会不会返回IEEE-754​中所谓的“不是数值（not a number）”。

isNaN('abc') // 返回值：true 因为字符串'abc'不是一个数字 
isNaN('12.23') // 返回值：false 因为字符串'12.23'是一个数字 

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败， 返回NaN

3、parseFloat

根据给定的参数返回其对应的浮点数。

parseFloat(3.14); 
parseFloat('3.14'); 
parseFloat(' 3.14 '); 
parseFloat('314e-2'); 
parseFloat('0.0314E+2'); 
parseFloat('3.14some non-digit characters'); 
// 以上的返回值都是3.14

4、parseInt

解析一个字符串并返回指定基数的十进制整数。

parseInt("0xF", 16); 
parseInt("F", 16); 
parseInt("17", 8); 
parseInt(021, 8); 
parseInt("015", 10); // parseInt(015, 8); 返回 13 parseInt(15.99, 10); 
parseInt("15,123", 10); 
parseInt("FXX123", 16); 
parseInt("1111", 2); 
parseInt("15 * 3", 10); 
parseInt("15e2", 10); 
parseInt("15px", 10); 
parseInt("12", 13); // 以上都返回15，第二个参数表示基数（可以理解为进制）

字符串常见方法和属性

String对象的常用方法

方法名称	作用	示例	结果
charAt()	获取指定位置的字符	'abcd'.charAt(2)	c
indexOf()	检索指定的字符串值在字符串中首次出现的位置	'abcd'.indexOf('a')	0
lastIndexOf()	从后往前查询所要搜索的字符串在原字符串中第一次出现的位置（索引），找不到则返回-1	'abcdabc'.lastIndexOf('a')	4
search()	检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串	'abcd'.search('c')	2
match()	字符串内检索指定的值，或找到一个或多个正则表达式的匹配	'abcdabc'.match('a')	['a', index: 0, input: 'abcdabc']
substring()	字符串截取方法，它可以接收两个参数，分别是要截取的开始位置和结束位置，它将返回一个新的字符串	'abcdabc'.substring(1, 4)	bcd
slice()	与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值	'abcdabc'.slice(1, 4)	bcd
replace()	用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串，后者为用来替换的文本	'abcd'.replace('a', 'A')	Abcd
split()	于把一个字符串分割成字符串数组	'abcd'.split('')	['a', 'b', 'c', 'd']
toLowerCase()	可以把字符串中的大写字母转换为小写	'Abcd'.toLowerCase()	abcd
toUpperCase()	可以把字符串中的小写字母转换为大写	'Abcd'.toUpperCase()	ABCD

数组（*）

1、数组定义

// 直接使用中括号就能定义一个数组，数组中的值的类型不必相同，数组中可以嵌套数组 
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]

2、数组中值的访问与修改

var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标（或者叫索引）来取数组中的值。下标是从0开始的 

arr[0] // 取下标为0的值，即1 

arr[3] // 取下标为3的值，即'init' 

// 我们可以给数组中某一个下标的值进行重新赋值，即修改该下标的值 
arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置，此时arr[0]的值就为'name'了，而不是1了

3、数组常见属性

3.1 length

访问一个数组的length属性，返回该数组的长度，即该数组元素的个数

var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
 
arr.length // 返回数组arr的长度，即5

4、数组常见方法

4.1 forEach()

对数组的每个元素执行一次给定的函数

var array1 = ['a', 'b', 'c'] 

array1.forEach( function(element) { 
console.log(element) 
}) 
// 预期输出 
// "a" 
// "b" 
// "c"

4.2 indexOf()

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'] 
console.log(beasts.indexOf('bison')) // 预期输出: 1 
// start from index 2 
console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
console.log(beasts.indexOf('giraffe')) // 预期输出: -1

4.3 join()

将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

var elements = ['Fire', 'Air', 'Water'] 
console.log(elements.join()) // 预期输出: "Fire,Air,Water" 
console.log(elements.join('')) // 预期输出: "FireAirWater" 
console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"

4.4 map()

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法 
var map1 = array1.map(function (x) { return x * 2 });
console.log(map1); // 预期输出: Array [2, 8, 18, 32]

4.5 pop()

从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; 
console.log(plants.pop()); // 预期输出: "tomato" 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"] 
plants.pop(); 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]

4.6 push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

var animals = ['pigs', 'goats', 'sheep']; 
var count = animals.push('cows'); 
console.log(count); // 预期输出: 4 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"] 
animals.push('chickens', 'cats', 'dogs'); 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

4.7 reverse()

将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

var array1 = ['one', 'two', 'three']; 
console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"] 
var reversed = array1.reverse(); 
console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"] 
// 注意：该方法会修改原数组 
console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]

4.8 shift()

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

var array1 = [1, 2, 3]; 
var firstElement = array1.shift(); 
console.log(array1); // 预期输出: Array [2, 3] 
console.log(firstElement); // 预期输出: 1

4.9 slice()

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; 
console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"] 
console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"] 
console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"] 
console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"] 
console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]

4.10 sort()

对数组的元素进行排序，并返回数组。

var months = ['March', 'Jan', 'Feb', 'Dec']; 
months.sort(); 
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"] 
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(); 
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]

// 如果sort()方法调用的时候没有传入回调函数，会将数组转成字符串然后进行大小比较并升序排列，字符串的大小比较是按照字典顺序进行的。所以10000会比21小。

// 如果sort()方法调用的时候传入了回调函数，会按回调函数的返回值来决定相邻两个元素的排序，例如：
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(function (item1, item2) {
return item1 - item2
}); 
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]

// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0，那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0，那么item1将排在item2的前面
// 如果这个回调函数返回的是0，那么item1和item2的位置不变

4.11 unshift()

将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

var array1 = [1, 2, 3]; 
console.log(array1.unshift(4, 5)); // 预期输出: 5 
console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]