HTML 5学习总结-CFANZ编程社区

一、语义化标签

1.标题标签

（1）<h1></h1>数字表示标题的重要性

（2）<p></p>表示文段

（3）<hgroup></hgroup>被用来对标题元素进行分组

2.布局标签

（1）<header></header>定义文档的头部。

（2）<aside></aside>定义与主体相关内容，侧边栏。

（3）<article></article>定义独立的内容。

（4）<footer></footer>定义文档或者文档的一部分区域的页脚。

（4）<section></section>表示独立的区块。

（5）<div></div>块级元素与<span></span>行内元素虽然无语义，但常用。

二、智能表单

1.input元素中新属性

（1）autocomplete：规定输入字段是否应该启用自动完成功能，若之前填写并提交，则填写内容会保存在记录中。（属性值：）

（2）autofocus：页面加载完成会聚焦该元素。

（3）readonly：将表单项设置为只读，可选中。

（4）disabled：将表单项设置为禁用，不可选中。

（5）required：提交表单前该表单项必填。

2.<input type=" "></input>中type新的属性值

（1）color：出现一个取色器。

（2）email：仅允许输入邮箱包含字符。

（3）number：仅允许输入数字。

（4）tel：定义输入电话号码字段，而在移动端中number与tel均会唤起系统的数字键盘。

（5）button：只可以点击，但可通过绑定onclick触发Javascript事件，示例如下：

<!DOCTYPE html>
<html>

<head>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
</head>

<body>
    <p id="demo">This is a paragraph.</p>
    <button type="button" onclick="displayDate()">
    时钟</button>
</body>

</html>

三、新增API

1.geolocation属性获取定位

（1）getCurrentPosition()方法获取定位。

<body>
    <p id="demo">点击按钮获取您当前坐标</p>
    <button onclick="getLocation()">位置</button>
    <script>
        var x = document.getElementById("demo");
        function getLocation() {
            if (navigator.geolocation) {/*window.navigator 对象包含有关访问者浏览器的信息*/
                navigator.geolocation.getCurrentPosition(showPosition);
                /*运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
                该对象包含的属性有海拔、高度、经纬度、设备移动速度等*/
            }
        }
        function showPosition(position) {
            x.innerHTML = "纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude;
        }
    </script>
</body>

（2）watchPosition()方法重复获取当前位置信息。

（3）clearWatch()可以停止 watchPosition() 方法。

2.网络状态online与offline事件

（1）在HTML中用window.navigator.onLine检测网络状态，返回true或false。

（2）引入jquery.min.js，给p设置宽高等样式，p标签的display设置为none，最终

<script>
        // 1.网络连接
        const tips = document.getElementsByClassName('tips')[0];
        window.addEventListener('online', function() {
            tips.style.display = "block"
            tips.innerHTML = "网络已连接"
            setTimeout(() => 
                tips.style.display = "none"
            ,1000)
        })
        //2.网络断开
        window.addEventListener('offline', function() {
            tips.innerHTML = "网络已断开"
            tips.style.display = "block"
            setTimeout(() => 
                tips.style.display = "none"
            ,1000)
        })
    </script>

3.全屏

（1）requestFullScreen()，开启全屏显示

<body>
    <img src="1.jpg" height="300" alt="">
    <button id="full">全屏</button>
    <script>
        var img = document.querySelector('img');
        document.querySelector("#full").onlink = function () {
            img.webkitRequestFullScreen();
        }
    </script>
</body>

（2）cancelFullScreen()，退出全屏显示

    <div>
        <button id="cancelFull">关闭全屏</button>
    </div>
    <script>
        //取消全屏与元素没有关系，跟document文档退出全屏有关
        document.querySelector('#cancelFull').onclick = function () {
            // div.cancelFullScreen()，这里若用div则不能退出全屏
            document.webkitCancelFullScreen();
        }
    </script>

（3）document.webkitIsFullScreen检测当前是否为全屏状态，返回true/false

（4）全屏伪类选择器：full-screen{ }

webkit内核：-webkit-full-screen{ } Gecko内核：-moz-full-screen{ }

注：全屏显示可以是任何元素，但不同的浏览器需要添加不同的前缀，webkit内核浏览器(如chrome)需变为webkitRequestFullScreen、webkitRequestCancelScreen；Gecko内核浏览器（如Firefox）需变为mozRequestFullScreen、mozRequestCancelScreen；而Trident内核浏览器（如微软）需变为msRequestFullscreen、RequestCancelscreen。