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

最新推荐文章于 2024-07-04 11:52:52 发布

WHUZXQ

最新推荐文章于 2024-07-04 11:52:52 发布

阅读量1.6k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/WHUZXQ/article/details/78874743

版权

72 篇文章 0 订阅

订阅专栏

1.开始

<!DOCTYPE html>
<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不能用于标记副标题，字幕，广告语，除非想把它们用作新区块或子区块的标题。

4 文本级元素

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

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

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

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

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;

关注

专栏目录