H5新增标签 css图标库 web 前端 字体 问题

目录

css图标库

web前端字体

CSS Hint

---

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工程文件中。

www.npmjs.com/package/csshint

也有html hint

这里可以在线检查代码 csslint.net