我的成长之路

1.H5新标签

即语义化标签，作用：便于搜索引擎的抓取，代码的优化

a.<meta charset=”UTF-8”>

H5建议使用utf-8编码，避免乱码

b.搜素引擎优化：SEO

<meta name="keywords" content="成都本地新闻,成都门户,成都吃喝玩乐"> <meta name="description" content="成都全搜索（www.chengdu.cn），是四川权威的成都新闻门户网站">

其中content可填写别的公司（比如饿了么的网站中写美团或者百度外卖可以增加点击率）

c.表单新标签

<form action="#" method="post" enctype="application/x-www-form-urlencoded"> 当method值为post时，enctype必须填写application/x-www-form-urlencoded

<input type="number" name="num" id="num" min="20" max="100">：

输入的值必须是数字，且范围在20-100之间

以下皆为日期选择器，也可以像number一样设置最大值最小值，超出范围则会提示用户，这样对于后端来说比较友好。

<input type="date" name="date123" id="date123">

<input type="time" name="time123" id="time123">

<input type="datetime-local" name="time123" id="time123">

以下为邮箱的标签，格式错误会有提示

<input type="email" name="email" id="email">

以下用于取色

<input type="color" name="c" id="c" value="#FF0000">

以下用于直接放图片，手动添加src

<input type="image" name="" id="" value="" src="img/修改5jpg.jpg"/>

以下用于填写手机号

<input type="tel" name="t" id="t" required>

进度条：

<progress value="0.65"></progress> 表示65%

<progress value="35" max="200"></progress>表示最大是200，现在显示了35

2.选择器

:root：表示根标签同通配符*{}

not(.p3)：排除指定class为p3的元素（参数填选择器）

冒号前指定范围，加上范围，下面例子为 li

:first-child 必须明确指定范围，是父元素下的第一个li标签，且第一个元素必须为li标签，否则如果第一个元素是p标签则不显示效果

:last-child 跟 :first-child用法一样

：fist-of-type 指定范围下的第一个出现的标签，不管前面有多少个其它标签是没有影响的

：last-of-type 跟：fist-of-type 用法一样

:nth-child(5) 第5个元素 ,（）可以填even和odd 奇偶， 来表示间接显示效果

凡是关于 child前面都不能有其他类型的元素 

：nth-of-type(even) 第奇数个指定元素：只数冒号前面符合条件的子元素，不管出现多少个其他类型元素是不受影响的

属性选择器：使用 [ ]设置属性限制，效果在指定的属性标签上显示

使用^表示开始位置；

使用$表示结束位置；

使用*表示任意位置；

注意三个符号的放置位置。放在href的后面=的前面

兄弟选择器：#a1~a

~表示id为a1的标签所有a标签兄弟，不管之间穿插了多少个其他的标签，效果依旧显示

兄弟选择器：#a1+a

+表示id为a1的标签的下一个a标签兄弟，且其后的第一个兄弟必须是a标签，否则效果不显示，第一个案例就是这种情况。第二个案例是可以显示效果的