h5笔记

蔚落 2022-06-09 01:10 243阅读 0赞

1.HTML5的变化

1.1HTML5推出的理由

推出的缘由和目标

目前web端存在一些问题，比如兼容性，同样的内容，在不同的浏览器上显示的效果不一样，那么开发人员需要额外的工作去解决。

一些特殊的权限没有开发给开发人员，比如定位权限，照相机拍照权限、动画、绘画。那么H5推出就是为了解决这一系列的问题

H5解决了什么问题

开发了一些特殊的权限给开发者，有了这些权限，开发者可以轻易的获取用户的定位信息，拍照功能等等

解决不同浏览器的兼容性问题，H5也可以理解是协议标准，它让绝大部分浏览器生产商都遵守这一标准

文档结构不清晰，在之前的开发中，页面的布局都是使用div+css，不利于搜索引擎去抓取页面信息，比如浏览器的抓取一篇新闻网页的时候，根本抓不到，新闻发布时间等信息

Chrome，Firefox：支持html5很多年，而且有自动升级，支持最好。

Safari，Opera：同样支持html5很多年，支持也很好。

IE：IE10起比较好了，之前很差

1.2语法的改变

内容类型，（contentType）HTML的后缀名依旧是，.html或.htm，HTML文件的内容类型为“text/html”

DOCTTYPE，

H5之前

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

DOCTTYPE声明在HTML文档中必不可少，位于HTML文档的第一行，随着HTML的更新，其声明方式也在改变，但是H5的DOCTTYPE声明方式向下兼容（兼容所有的低版本）

字符集

H5之前

HTML5默认的字符集编码是UTF-8之前大部分版本默认字符编码ISO-8859-1

标签省略

可以省略全部：body、tbody、head、colgroup、html

不允许写结束标记的标签：img、input、br、hr、base、link

允许写结束标记的标签：p、li、dd、dt、tr、td、th

布尔类型的属性

对于布尔类型的属性，比如readonly、disabled、checked、selected，但它们不写值得时候，默认是true同时对于值是任何东西都是无效的。只要写了这个属性，属性就直接生效了

属性值省略引号

在之前的学习中，属性值都是放在双单引号里的，在H5中，如果属性值中不包括特殊字符,”<”、”>”、”=”，双单引号都可以去掉

1.3新增和废弃的元素新增和废弃的属性

新增的结构（布局）标签：section、article、nav、footr、header、hgroup、aside、figure

新增的其它标签：video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source

input type的新增：email、url、number、date pickers、range

废弃的标签：font、center、s、tt、u、big、basefont

1.4全局属性

在HTML5中定义了少量对所有元素都有效的属性

contenteditable，标签设置了contenteditable=true之后，可以在页面上进行编辑，编辑之后，元素的宽高自动适应。contenteditable=false，说明这个标签不能被编辑

如果只是设定了这个属性，默认的值是true

contenteditable属性可以被继承，需要考虑就近原则

designMode

用来指定整个页面是否可以编辑，当设置为on的时候，相当于页面上所有的元素都设置了contenteditable=true

设置off，整个页面不能编辑

同样适用就近原则，只兼容IE9及以上

hidden

hidden属性可以实现对元素的隐藏，隐藏的元素不会显示，同时不会占原有的位置，类似于display：none

hidden属性默认值是hidden，设置改属性的时候，只需要写属性名

hidden看不见，不占位置

spellcheck

是H5为input和textarea标签提供新属性，它的功能是对用户输入的内容进行拼写和语法检查，如果拼写错误，文字下面会有红色波浪线

有两个值，false，true，取消和使用

tabindex

<div><label>姓名</label><input type="text" tabindex="1"/>
    </div>
    <div><label>身份证号码</label><input type="text" tabindex="3"/>
    </div>
    <div><label>性别</label><input type="text"tabindex="2"/>
    </div>
    <div><label>年龄</label><input type="text"/>
    </div>
    <div>
        <input type="button" value="提交" tabindex="4"/>
    </div>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.huadianedu.com">华点</a>

tabindex=“正整数”，按键盘tab键，可以选择获取焦点，这里选中的标签可以是input输入框，input按钮，a标签等，同时按tabindex选中的顺序和和设置的属性一致，按数字大小排序，建议不使用0

=-1不选中

2.主体结构元素

字体结构元素，它是为了语义可以结构化，就是为了更好的SEO，为了浏览器更好的抓取，包含元素：article，section，nav，aside，time

article 使用多

article标签，表示文章、文档、页面，通常用法：一篇文章，一个页面，一个独立完整的内容。这个标签强调的是内容的独立性，同时一般article元素里面会嵌套一个header标签

section

section标签，理解为段落、章节。通常用法表示文章中的一段，这一段通常有标题和内容组成。特点，强调对文章的分块，拆分

nav（navigation）使用多

导航，通常用在导航条，页面导航，翻页操作

aside

表示旁边、侧边，通常用法：放在article里，作为附属信息部分，比如参考资料，名词解释，放在article外，作为页面的附属信息，比如侧边栏，友情链接，广告区域

time

表示时间，通常用法：24小时的某个时刻或者某个日期，该标签，所有浏览器都不支持

3非主体结构元素

header标签

一般用来放置整个页面的标题。比如说一个新闻页面，header一般放新闻的标题，如果是一个官方网站，一般header用来放logo和网站导航

footer标签

一般用来放置脚注，主要包含作者信息，copyright版权

address标签

一般用来呈现联系信息，主要包括，网站的联系方式，电子邮箱，地址等等

<body>
    <header>
        <div class="logo">华点logo</div>
        <nav>
            <ul>
                <li>首页</li>
                <li>教程</li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>HTML5的教程</h2>
        <p>详细教程</p>
    </article>
    <footer>
        <p>copyright 2017 华点软件学院</p>
        <address>
            <p>地址：</p>
            <p>电话：</p>
            <p>邮箱：</p>
        </address>
    </footer>
    </body>