html5随笔

Posted 2020-07-30

访问同一网站的文件时最好使用相对URL；

html5不允许将nav、aside嵌套在adress元素中；

main元素是HTML5新添加的元素，一个页面只能使用一次；role=‘main‘

可以将一个article嵌套在另一个article中；

一个article中可以包含一个或者多个section元素；

出于SEO和可访问性的目的，最好将重要的内容放在前面，可以通过css改变它们在浏览器中的显示顺序；

对于与内容有关的图像（如：图表、图形、带有说明文字的插图），使用fugure而非aside；

一个figure中只允许出现一个figcaption;

现代浏览器在默认情况下会对figure添加40px的左右外边距；

不要用alt文本代替图像的caption；

对于标识和其他非照片类图像，可以考虑使用SVG;

一定要按照下面的顺序定义规则：link,visited,focus,hover,active(LVFHA)

Font-family属性是继承的，但有几个元素不会继承，select,textarea,input

（可以强制继承 select,textarea,input{font-family:字体;}）

Font stracks字体栈；

Background-clip;控制元素背景显示的范围；

Background-origin;控制..开始的位置;

 

Html5 shiv ；（可以让IE8及更早版本在打印时能够正确的处理新的html元素）

Normalize.css  重置样式表;

设置为inline-block方便为其加上下内边距，不需要使用块级元素则用inline；

Visiibility隐藏元素时，元素及其内容应该出现的位置会留下一片空白区域。隐藏元素的空白区域仍会在文档流中占据位置；

 

浮动元素的display属性会变成block，哪怕设置为inline依旧是block；

Vertical-algin属性仅使用于行内元素，不能应用于块级元素；

Polyfill,shim;

 

 

Border-radius:10px;                                  四个角都是10px;

                               10px 20px;                                   左上，右下；右上左下；

                               25 10 50                                      左上；右上左下；右下；

 

可以在border-radius声明后面增加一条：background-clip:padding-box;避免有时背景会透过圆角；

text-shadow属性的参数设置取值：

 

 

box-shadow属性的参数设置取值：

x-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

阴影扩展半径spread：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，让整个阴影位于元素内部；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式

 

指定多重背景不需要使用厂商前缀；