【web】html5/css3 新特性总结与实践

HTML新特性

1.开始


<html lang="en">
<head>
<meta charset=utf-8>

2 致敬a标签
html5的一大好处就是可以把多个元素放到a标签里。

<a href="">
    <h2>h2>
    <p>p>
a>

3 新语义元素

  • main元素:用来声明主内容区,每个页面的主内容区只能有一个,而且不能作为article,aside,header,footer,nav,header的后代。规范声明如下:

文档的主内容指的是文档中特有的内容,导航连接,版权信息,站点标志,广告和搜索表单等多个文档中重复出现的内容不算主内容。

  • section元素
    用于定义文档或应用中一个通用的区块。例如可以用section包装联系信息,新闻源等。关键是要知道这个元素不是为应用样式而存在的。如果只是为了添加样式而包装的内容,还是用div。 那到底什么时候用呢?可以想一想其中的内容是否会配有自然标题,如果没有,那最好还是选择div。
  • nav元素
    用于包装指向其他页面或同一页面中不同部分的主导航连接,如果你经常使用无序列表和列表标签,那最好改用nav嵌套多个a标签。

  • article元素
    用于包含一个独立的内容块,在划分页面结构时,想一想放在article中的内容如果整体复制粘贴到另一个站点中是否照样有意义。对于嵌套article而言,内部的article应该与外部的关联。

  • aside元素
    用于包含其旁边内容不相关的元素。基本上任何与主内容无直接关系的,都可以放在这里面。对于电子商务来说,我会把“购买了这个商品的用户还购买了的内容“放在aside里面。

  • figure与figcaption元素

  • header元素
    它可以在一个页面出现多次

  • footer元素
    应用于在相应区块中包含与区块相关的内容,可以包含指向其他文档的链接,或者版权声明。footer也可以在界面上出现多次,规范中说明:

作者的联系信息应该放在address元素中

  • h1-h6

h1到h6不能用于标记副标题,字幕,广告语,除非想把它们用作新区块或子区块的标题。

4 文本级元素

  • b元素:加粗;规范内容:

b元素表示只为引人注意而标记的文本,不传达更多重要的信息,也不用于表达其他的愿望或情绪。比如不用于文章摘要中的关键词,测评当中的产品名称等

  • em元素:规范:

em元素表示内容中需要强调的部分。

  • i元素:斜体

以突出不同文本形式的方式表达偏离正文的意思。

5 作废的html特性
strike,center,font,acronym,frame,frameset

CSS新特性

1 css响应式多列布局:把一段文本分成多列显示

column-width:12em;

2 列数固定,宽度可变:

column-count:4;

3 添加列间距和分隔线(要添加供应商前缀)

column-gap:2em;
column-rule:thin dotted #999
column-width:12em

4 断字

word-wrap:break-word;

5 截短文本

width:520px;
overflow:hidden;
text-overflow:ellipsis;
white-space:no-wrap;

你可能感兴趣的:(Web)