你的位置:首页 > 网页设计

[网页设计]《HTML5与CSS3基础教程》学习笔记 ——补充


在HTML5中,空元素结尾处的空格和斜杠是可选的,但是在XHTML中,必须有斜杠,所以最好每次都把斜杠写上去。

disabled和required可以要属性值,也可以不要属性值

1)        有属性值:disabled=” disabled”  required=” required”

2)        无属性值:disabled、required,但是审查元素时是:disabled=””  required=””

文件命名:

1)        文件名全部使用小写,这样方便访问者访问

2)        文件名分隔使用-,不要使用_,因为_对搜索引擎优化的支持程度不如-

3)        文件夹的名称全部使用小写

使用语义化的优势

1)        提升可访问性和互操作性

2)        提升搜索引擎优化效果

3)        维护和添加样式更容易

4)        代码更少,加载更快

禁用Chrome缓存

开发者工具à右下角齿轮图标àSettingsàGeneralàDisable Cache

之后只要不关闭开发者工具的话,就会是禁止缓存的状态

标题

核心内容放在前60个字符(含空格)

role 增加可访问性

1)         页面级的header   role=”banner”

2)         nav   role=”navigation”

3)         main   role=”main”

4)         aside  role=”complementary”

5)         页面级的footer  role=”contentinfo”

html5新增元素(部分)

1)        <time>可以增加属性datatime=””是为机器准备的

可以用来显示我们希望的日期、时间和时间段

2)        meter表示分数的值和已知范围内的测量

 IE9不支持,就会将文本内容显示出来

low、high、optimum属性用来设置低中高三个范围

还有min、max,默认0/1.0.

3)        progress

支持value、max、form(是如果进度条没有嵌套在form元素中,又要把它联系起来,可以添加form的属性将其值设为form的id)

js中,可以直接设置它的值,myProgress.value=45;

SVG

IE8不支持,不过可以使用SVG Web等JavaScript实现类似的效果

PNG

支持索引色透明,也支持alpha透明(PNG-8、PNG-32)。

创建锚和连接锚

<h2 id=”myTitle”></h2> ------home.html

1)        同一个文档

通过href=”# myTitle”

2)        另一个文档

href=” home.html # myTitle”

3)        另一个服务器

href=”http://www.xx.com/myProject /home.html # myTitle”

使用通配符*,匹配范围变大,会让浏览器加载页面速度变慢

使用特殊性较低的选择器,更易于复用

结合符

+ 直接跟在指定元素的后面

~ 出现在指定元素后面,不用直接出现

伪元素

:first-child   IE8+支持

:last-child   IE9+支持

:first-letter  IE8+之后不会将标点符号作为第一个首字母,会把标点符号和第一个字都作为首字母

伪类

::IE9之前的不支持

属性选择器

[attribute~=” value”]是类之间用空格分开,找出的完全匹配

[attribute|=” value”] 找出第一个以value-开头

^开头,$结尾,*包含

em

字体的大小是相对于它的父元素的字体大小来说的(1em=父元素的字体大小)

rem

字体的大小是相对于它的根元素的字体大小来说的(1em=根元素的字体大小)IE9+支持

line-height

是相对它的字体来说的,指的是放大的倍数

Web字体

当字体内存很大时,加载很慢,所以需要减少页面重量

.eof  <=IE8仅支持这个内嵌字体

.ttf和.otf  IE9+,Firefox 3.5+,Opera 10+,Safari 3.1+,Chrome 4.0+

.woff   IE9+,Firefox 3.6+,Opera 11.1+,Safari 5.1+,Chrome 6.0+

属性兼容

一般将有前缀的放在前面,没有前缀的放在后面,因为放在后面的优先级更高

tabindex = “0/num”

添加这个属性之后,用户不使用鼠标,能使用TAB键能移动

ul 设置margin-left:0

主要是用来针对IE7及以下的版本第一个li靠左