目录
H5新增标签
1.<header>用在页面的头部或者版块的头部</header>
<nav>//用在导航,具体用法仁者见仁智者见智,有几种常见情况
<p><a href="#">111111</a></p>
<p><a href="#">222222</a></p>
</nav>
<nav>
<h2>前端</h2>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">html+css</a></li>
</ul>
</nav>
3.<hgroup> //用于组合标题
<h1>标题1</h1>
<h2>标题2</h2>
</hgroup>
4.<section>用来划分区域(划分有标题的区域)</section>
5.<article>主体或者文章吧!仁者见仁智者见智</article>
6.<aside>和主体相关的附属信息</aside>
7.<figure>
<img src="" />
<figcaption> 图片的相关标题或者文字</figcaption>
</figure>
8.<time>9:00</time> //时间
9.<datalist id="valList"> //input输入框中可能会出现的内容列表
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>
10.<details> //关闭和打开的下拉列表 open close 的属性
<summary>标题</summary>
<p>内容</p>
</details>
11.<dialog> 对话列表:有一个open 的属性
<dt>甲</dt>
<dd>你叫什么名字?</dd>
<dt>乙</dt>
<dd>我叫乙</dd>
<dt>甲</dt>
<dd>乙,认识你真开心。</dd>
</dialog>
12.<address>作者信息、地址、详情等等</address>
13.<mark>标记,默认有黄色背景颜色,可以用css样式更改</mark>
14.<keygen name="securityd" /> //给表单添加一个公钥
15.<progress max="200" value="100"></progress> //进度条
16.<input type="email" />//当输入不是邮箱的时候,验证通不过
<input type="submit" />
<input type="reset" />
<input type="tel" />
<input type="url" />
<input type="search" />//chrome下输入文字后,会多出一个关闭的X
<input type="range" step="2" min="0" max="10" value="2" />//特定范围内的数值选择器,step定义单位值
<input type="number"/>
<input type="color"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="time"/>
<input type="date"/>
<input type="week"/>
<input type="month"/>
<input type="text" placeholder="请输入4-16个字符" name="user" autocomplete="off" required />
//autocomplete : 是否保存用户输入值,默认为on,关闭提示选择off
<input type="password" placeholder="请输入4-16个字符" name="password" autocomplete="off" autofocus />
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />
css图标库
http://cssicon.space/#/
优势:渲染快,可以使用加速
web前端字体
windows 中的宋体是中易宋体SimSun,Mac 中的宋体用的是华文宋体STSong
windows 中的黑体是中易黑体SimHei,Mac 中的黑体用的是华文黑体STHeiti。
在写font-family的时候不要只写中文字体名。保证西文字体在中文字体的前面。
顺序是:Mac=>linux=>windows。
要特别注意的是设计师的设计稿PSD中的字体太大。关键时刻可以使用font-face(typo.css,Entry.css,Type.css)
font-family:san-serif;
CSS Hint
1.不要使用多个class选择器,比如a.link.active,这种写法在ie6下不能正确解析
2.不要出现空的css规则,比如:a{}(浪费空间,没有意义)
3.正确的显示css属性,比如 display:inline; 不要和width,height,float,margin,padding 同时使用。
display:block;不要和float同时使用,等等。(浪费空间,不要写没有意义的代码,一旦发现不准上线)
4.避免过多的使用浮动,当浮动次数超过10次时,会显示警告。(浮动使用太多说明布局有问题,没有很好的理解盒子模型,代码有问题)
5.避免使用过多的字号,当字号声明超过10种时。显示警告。
6.避免使用过多的web字体,使用超过5次时,显示警告。(font-family使用5次以上,css请求浪费时间,在css中又请求字体。请求字体会多次加载,影响严重)
7.避免使用id作为样式选择器。(css设计理论中,id不让随便使用)
8.标题元素只定义一次。
9.使用width:100%;时候要注意。(块级元素本身默认就是100%,所以使用的时候需要多注意不要写)
10.属性值为0时不需要写单位。
11.各浏览器专属的css属性要注意规范和顺序。
12.避免使用看起来像正则表达式的css3选择器。
13.遵守盒子模型的规则。
npm中有csshint的包,可以引入到webpack工程文件中。
也有html hint
这里可以在线检查代码 csslint.net