摘要:本篇教程探讨了HTML5新手学习笔记,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5新手学习笔记,希望阅读本篇文章以后大家有所收获,帮助大家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=”//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靠左
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号