html5笔记01-CSDN博客

本文链接：https://blog.csdn.net/smiple9102/article/details/71598599

1，常规布局写法：

<body>
    <!-- header -->
        <!-- nav -->
    <!-- main -->
        <!-- aside -->
        <!-- arcile -->
    <!-- footer -->
</body>

1，h5新语义标签：

<header>
    <nav>
        <!-- a[href=#]{导航栏$}*4 -->

    </nav>
</header>
<!-- main -->
<main>
    <aside></aside>
    <article></article>
</main>
<!-- footer -->
<footer></footer>

一，自己的代码：加display：block。
※新语义标签兼容问题解决：
1，由于ie8以及以下版本不兼容。
2，通过js创建元素在谷歌等高版本浏览器也兼容，所以会出现两次。解决办法：用emmet语句做条件判断。
（希望这一段代码只在指定的ie版本中执行）
cc:ie6+tab键快捷生成emmet语法
l：less
t：than
e：equal
lte：小于等于的意思。

解决ie8以及以下的新语义标签兼容问题，可以用js的creatElement(),来创建元素。

//emmet条件判断语句。
<!--[if lt IE 9]>

<script>
window.onload=function(){
    var creatHeader=document.creatElement("header");
    document.body.appendChild(creatHeader);
}
</script>

<![endif]-->

二，引入html5.js框架
提示：如果页面中存在大量的h5语义标签，可以通过引入第三方js框架处理。
引入：html5shiv-master包下的html5shiv.min.js
优化代码：把引入的js框架放入emmet条件判断语法中。指定版本下才运行

三，新输入类型：
1，新type属性：
桌面端看不出区别，当在移动端打开时，会显示不同的 虚拟键盘，
比如：
**email弹出email键盘。
url弹出url键盘。
search：右下角的输入按钮变成搜素。
number：弹出的是数字键盘。
tel弹出的是九宫格的数字键盘。**
且移动端会比桌面端显示要好。

常用部分：

<input type="color">//颜色
<input type="date">//日期
<input type="datetime">//
<input type="datetime-local">//
<input type="date">//
<input type="email">//
<input type="month">//
<input type="week">//
<input type="day">
<input type="number">//只能输入e和数字，e为科学计数法中的表达方式
<input type="range">//滑动条，快速生成
<input type="search">//

三，新表单元素：
1，datalist：
给datalist添加id=foodlist，通过list=“foodlist”，进行关联。
提高输入效率。
这里写图片描述
2，keygen元素：
兼容性极差。
3，output元素
只是一个语义性较强的元素，如果需要修改内部的值需要通过js去实现。

<input type="number">+<input type="number">=<output>123</output>
<input type="button" value="计算结果">

四，新表单属性01
常用：
1，placeholder（自动提示的占位符。）
比旧版input内value便捷。
提示信息为灰色，input标签默认的提醒信息文本
2，autofocus（自动获取焦点）
3，multiple（支持多文件选择）
用户上传文件，file标签默认：一次只能选择一个
4，autocomplete（自动完成）：
①必须配合name属性使用②表单曾经被提交过，才能够使用。
可以根据用户在本页面提交过的数据
进行保存，自动匹配。
5，form属性（通过form属性将表单外部的元素与表单相关联，不建议使用，维护性比较差。）

<input type="text" placeholder="请输入用户名">
<input type="email" placeholder="请输入邮箱" autofocus >
<input type="file" multiple >
<input type="tel" name="telPhone" autocomplete >
<input type="submit">

五，新表单属性02
早期需要通过js来实现用户表单数据提交前进行准确性验证。
新表单验证元素：
1，email标签自带了表单格式验证，但是不支持空值验证。
添加required 验证空值。
2，对字符串格式的验证使用的是正则。
pattern中可以写正则进行验证。（自定义的验证规则。）

3，oninvalid

<input type="email" name="userEmail" required pattern="\d{3}" oninvalid="this.setCustonValidity('亲爱的用户您输入的格式不正确请重新输入')" >

<element oninvalid="myScript">

JavaScript文档中： object.oninvalid=function(){myScript};
JavaScript文档中,添加事件监听：addEventListener()
object.addEventListener(“invalid”, myScript);
注：IE8浏览器及之前版本不支持addEventListener()方法.

六，多媒体标签
1，音频
2，视频
3，早期解决方案：flash插件。移动端不支持flash。

1，音频：
audio：MP3，wav，ogg,
①controls控制器
②autoplay自动播放
③loop是否循环
④src直接指定音频文件
⑤source 属性指定多个音频时会从上往下进行解析，找到可以播放的既可开始播放。
如果遇到无法播放的音频会继续往下解析，知道找到可以播放的为止。

如果都无法解析我们能够在最后设置一个提示信息。

可以对低版本的用户进行一个友善的提示。

<audio  controls autoplay loop>
    <source src="music/郝云的活着1.mp3">
    <source src="music/郝云的活着2.mp3">
    亲爱的用户，你的浏览器版本太低无法享受这个页面的所有功能，建议进行更新。☺<a href="#">戳我下载更新</a>

</audio>

2，视频：
①controls控制器
②autoplay自动播放
③loop是否循环
④src视频播放路径
⑤width，height在设置视频video的宽高时，会优先考虑视频本身的大小改变的是video标签的大小。
⑥poster=“”，视频在无自动播放的时候显示的图片。
⑦source 属性指定多个视频文件

<video src="movie/[报告老板][第二季]第11集_bd.mp4" controls autoplay loop height="100px" width="300px"></video>

七，获取元素：
1，jQ简洁的获取元素的方式，很方便。$(选择器)
2，js中通过ById，ByName，ByTagName，ByClassName来获取元素。
3，html5中直接通过一个方法就可以获取父级元素。

//获取单个方法的参数 支持是使用css的选择器。
/*标签选择器
class选择器
id选择器*/
    document.querySelector('li').style.backgroundColor ='orange';
    document.querySelector('.fruit').style.backgroundColor ='blue';
//这个方法 返回的类型是 数组 哪怕只有一个元素 返回的也是数组
    var fruitDoms=document.querySelectorAll('.fruit');
    for (var i = 0; i < fruitDoms.length; i++) {
        fruitDoms[i].style.color = 'red';
    }

八，类名操作：
js中className是获取的多个值，用起来比较不方便。
html中新增的classList操作
1，add，新增
2，remove，移除
3，contains，判断是否有class
4，toggle，切换

//获取要操作的元素 方便后续操作
    var dv=document.querySelector('.showBox');
    //新增
    document.querySelector('input[value = add]').onclick=function(){
        //alert("执行了");
        dv.classList.add('orange');
    }
    //移除
    document.querySelector('input[value = remove]').onclick=function(){

        dv.classList.remove('orange');
    }

    //判断是否存在class

document.querySelector('input[value = contains]').onclick=function(){
        alert(dv.classList.contains('orange'));
    }
    //切换class
    document.querySelector('input[value = toggle]').onclick=function(){
        dv.classList.toggle('skyBlue');
    }
}