HTML5的使用及基本注意说明相关笔记（一）

最新推荐文章于 2021-09-21 12:58:17 发布

jwllwj_2018

最新推荐文章于 2021-09-21 12:58:17 发布

阅读量378

点赞数

分类专栏： HTML5 JS CSS CSS3 HTML 文章标签： HTML5 JS CSS CSS3 HTML

本文链接：https://blog.csdn.net/jwlLWJ_2018/article/details/80873136

版权

JS 同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

HTML5

12 篇文章 0 订阅

订阅专栏

1 网页开发方式上的两个层次：

◆HTML4.1
◇结构：html4.0

◇样式：css css2

◇行为：js

◆HTML5
◇结构：html5
◇样式：css3

◇行为：js API 有所增强如地理定位 web存储拖拽重力感应硬件访问等

2.HTML5

◆HTML5狭义的概念上就是HTML4的升级版本，HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段，也就是 html5+css3+js API 一套前端技术的组合

◆html页面的 meta标签的主要作用是用于描述网页的元(最根本的)信息，相当于页面的元神。

◆html5的语法规范更加的简洁、宽松，而html4的语法规范更加严格，但是实际工作中无论是使用html5还是html4都要书写规范，避免后期再看就看不懂了。

◆IE8及以下版本的浏览器不支持html5及css3，所以需要引入一个html5的插件脚本 html5shiv.js ，<script src="html5shiv.min.js"></script>

◆IE浏览器的条件注释

<!--[if lte ie 8]><![endif]-->

表示当前浏览器的版本小于等于ie 8 就执行注释标签对中的代码，否则就不执行，条件注释只有ie浏览器中可以识别，例如

<!--[if lte ie 8]><script src="html5shiv.min.js"></script><![endif]-->

，这样就能够只会在ie8及其以下的版本浏览器中引入这个脚本了，l表示less既更小，t表示then既比较，e表示equal既等于，g表示great既更大

3.经典的div加css网页布局和html5网页布局

◆div+css网页布局

<div class="header"></div>
<div class="nav"></div>
<div class="section">
	<div class="aside"></div>
	<div class="article"></div>
</div>
<div class="footer"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html4的经典的div+css网页布局</title>
    <style>
        .header, .nav, .section, .footer {
            width: 1120px;
            margin: 0px auto;
        }

        .header {
            height: 60px;
            background-color: #0e0;
        }

        .nav {
            height: 80px;
            background-color: #e00;
        }
        
        .section {
            height: 400px;
            background-color: #e0e;
        }

        .section .aside {
            float: left;
            width: 320px;
            height: 100%;
            background-color: #ee0;
        }

        .section .article {
            float: right;
            width: 790px;
            height: 100%;
            background-color: #0ee;
        }

        .footer {
            height: 120px;
            background-color: #000;
        }

    </style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="section">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>
</body>
</html>

◆html5网页布局

<header></header>
<nav></nav>
<section>
	<aside></aside>
	<article></article>
</section>
<footer></footer>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的语义化网页布局</title>
    <style>
        header, nav, section, footer {
            width: 1120px;
            margin: 0px auto;
        }

        header {
            height: 60px;
            background-color: #0e0;
        }

        nav {
            height: 80px;
            background-color: #e00;
        }

        section {
            height: 400px;
            background-color: #e0e;
        }

        section aside {
            float: left;
            width: 320px;
            height: 100%;
            background-color: #ee0;
        }

        section article {
            float: right;
            width: 790px;
            height: 100%;
            background-color: #0ee;
        }

        footer {
            height: 120px;
            background-color: #000;
        }
    </style>
    <!--[if lte ie 8]>
    <script src="html5shiv.js"></script>
    <![endif]-->
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<section>
    <aside>侧边栏</aside>
    <article>文章</article>
</section>
<footer>尾部</footer>
</body>
</html>

3.css新增自适应宽度

width:100%;//宽度
max-width:640px;//最大宽度
min-width:320px;//最小宽度

以前需要通过设置一个父容器，然后让两个子容器浮动，左边的固定宽度，右边的自适应父容器，然后设置右边的容器左外边距为左边容器的宽度，这样就能够让右边的容器自适应父容器的宽度，父容器变宽右边的容器也会变宽，父容器变窄，右边的容器也会变窄，但是现在不需要了，只需要设置css新增的自适应宽度的样式即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的自适应宽度方式</title>
    <style type="text/css">

        .box {
            width: 80%;
            height: 600px;
            border: 1px solid #000;
            max-width: 900px;
            min-width: 300px;
            margin: 100px auto;
        }

        .son {
            width: 33.3%;
            height: 200px;
            background-color: #0f0a;
            float: left;
        }

        .son2 {
            background-color: #f00a;
        }

        .yuan {
            margin:300px auto 0;

            width: 200px;
            height: 200px;
            border: 20px solid #0f0a;
            background-color: #f00a;
            border-radius: 50%;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="son son1"></div>
    <div class="son son2"></div>
    <div class="son son3"></div>
    <div class="yuan"></div>
</div>
</body>
</html>

4.html5新增的表单标签

◆type=email：文本为email格式
◆type=tel：文本为手机号码格式
◆type=number：文本为数字格式
◆type=search：有搜索框的一些样式
◆type=range：有滑块儿的样式，并且value值为数字
◆type=color：拾色器，就是点击之后可以选择颜色
◆type=time：文本为时间格式，兼容好的话可以选择时间
◆type=date：文本为日期格式，兼容好的话可以选择日期
◆type=month：文本为月份格式，兼容好的话可以选择月份
◆type=week：文本为星期格式，兼容好的话可以选择星期
◆新表单的兼容性并不好，原理都是浏览器内嵌自带的js脚本支持，所以版本低的浏览器可能不会有这些脚本的支持。

◆兼容性不好的原因，因为这些新增的表单标签实际原理，就是浏览器内置了这些表单标签的js脚本，不同浏览器内置的js脚本并不是完全一样，所以展示这些表单标签的时候，功能虽然大同小异但是样式各不一样，所以说兼容性不好，并不像那些新增的结构化标签一样，只需要弄个脚本让他们显示为块儿级元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的新增的智能表单(兼容性不好)</title>
    <!--html5新增的智能表单针对兼容性而言，移动端的比pc端要好-->
    <style type="text/css">

        form {
            width: 100%;
            max-width:640px;
            min-width:320px;
            margin:0px auto;
            font-family: "microsoft yahei";
            font-size: 20px;
        }
        input {
            display: block;
            width: 100%;
            margin:10px 0;
            height: 30px;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>表单属性</legend>
        <label for="email">
            email: <input type="email" id="email" name="email">
        </label>
        <label for="url">
            url: <input type="url" id="url" name="url">
        </label>
        <label for="number">
            number: <input type="number" id="number" name="number" step="3">
        </label>
        <label for="tel">
            tel: <input type="tel" id="tel" name="tel">
        </label>
        <label for="search">
            search: <input type="search" id="search" name="search">
        </label>
        <label for="range">
            range: <input type="range" id="range" name="range" value="100" min="0" max="100">
        </label>
        <label for="color">
            color: <input type="color" id="color" name="color">
        </label>
        <label for="time">
            time: <input type="time" id="time" name="time">
        </label>
        <label for="date">
            date: <input type="date" id="date" name="date">
        </label>
        <label for="month">
            month: <input type="month" id="month" name="month">
        </label>
        <label for="email">
            week: <input type="week" id="week" name="week">
        </label>
        <input type="submit" id="submit">
    </fieldset>
</form>
</body>
</html>

5.html5新增文本框绑定数据下拉列表

<input type="text" list="bao" />
<datalist id="bao">
	<option>宝马</option>
	<option>宝石</option>
	<option>宝刀</option>
	<option>宝剑</option>
	<option>宝宝</option>
</datalist>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的新增的智能下拉列表datalist</title>
    <style type="text/css">

        form {
            width: 100%;
            min-width: 320px;
            max-width: 640px;
            margin: 0 auto;
            font: 20px "microsoft yahei";
        }

        select, input {
            display: block;
            width: 100%;
            margin: 10px 0;
        }


    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>执行下拉列表</legend>
        <label for="sel">
            html4下拉列表：
            <select id="sel">
                <option>宝马</option>
                <option>宝骏</option>
                <option>宝强</option>
                <option>宝宝</option>
                <option>奥迪</option>
                <option>奥迪奥</option>
                <option>迪奥</option>
            </select>
        </label>
        <label for="lis">
            html5新增下拉列表:
            <input type="text" id="lis" list="car">
            <datalist id="car">
                <option>宝马</option>
                <option>宝骏</option>
                <option>宝强</option>
                <option>宝宝</option>
                <option>奥迪</option>
                <option>奥迪奥</option>
                <option>迪奥</option>
            </datalist>
        </label>
    </fieldset>
</form>
</body>
</html>

6.html5新增的其它标签

◆表单分组框：

<fieldset><legend></legend></fieldset>

◆文本输出：

<output></output> //纯输出的标签，与span相比，仅仅是有语义化而已。

◆加密类型：

<keygen /> //在有些浏览器上无效

◆度量器：max 和min 表示度量器的最大值与最小值，low和high表示度量器的正常取值范围，低于或高于正常取值范围，度量器都会变色，比如变黄或者变红，在正常范围下，度量器的颜色应该是绿色的。

<meter value="50" max="100" min="0" low="30" high="80"></meter>

◆进度条：

<progress value="40" max="100" min="0"></progress>

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的表单元素</title>
    <style>
        form {
            width: 100%;
            max-width: 640px;
            min-width: 320px;
            margin: 0 auto;
            font: 20px "microsoft yahei";
        }

        input, meter, progress {
            display: block;
            width: 100%;
            height: 30px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>表单元素</legend>
        <label for="username">
            用户名：<input type="text" type="text" id="username" name="username">
        </label>
        <label for="password">
            密码：<input type="text" type="password" id="password" name="password">
        </label>
        <label for="sex">
            性别：<input type="text" id="sex" name="sex" list="ssex">
            <datalist id="ssex">
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="不详">不详</option>
            </datalist>
        </label>
        <label for="output">
            推荐人:
            <output id="output">小扶子</output>
        </label>
        <br><br>
        <label for="keygen">
            加密类型:
            <keygen id="keygen"/>
        </label>
        <br><br>
        <label for="meter">
            度量器:
            <meter id="meter" value="50" max="100" min="0" low="30" high="80"></meter>
        </label>
        <label for="progress">
            进度条：
            <progress id="progress" value="50" min="0" max="100"></progress>
        </label>
        <input type="submit" id="submit" value="提交">
    </fieldset>
</form>
</body>
</html>

7..html5新增的表单属性

◆占位符(提示文字)属性：

<input type="text" placeholder="例如：李狗蛋" />

◆自动获取焦点属性：

<input type="text" autofocus />

◆自动补全属性（默认 on）：

<input type="text" autocomplete="on/off" />

◆文本框必填属性：

<input type="text" required />

◆文件多选属性：

<input type="file" multiple />

◆表单关闭验证功能属性：

<form action="" novalidate></form>

◆文本框自定义正则验证属性：

<input type="tel" pattern="^1\d{10}$" />

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的新增的表单属性</title>
    <style>
        form {
            width: 100%;
            min-width:320px;
            max-width:640px;
            font:20px "microsoft yahei";
            margin:10px auto;
        }

        input {
            width: 100%;
            height: 30px;
            margin:10px 0;
        }


    </style>

</head>
<body>
<!--
        占位符(提示文字)属性：<input type="text" placeholder="例如：李狗蛋" />
        自动获取焦点属性：<input type="text" autofocus />
        自动补全属性（默认 on）：<input type="text" autocomplete="on/off" />
        文本框必填属性：<input type="text" required />
        文件 多选 属性：<input type="file" multiple />
        表单关闭验证功能 属性：<form action="" novalidate></form>
        文本框自定义正则验证 属性 ：<input type="tel" pattern="^1\d{10}$" />
-->
<!--<form action="" novalidate="novalidate">-->
<form action="">
    <fieldset>
        <legend>html5新增的表单属性</legend>
        <label for="username">
            用户名：<input type="text" id="username" name="username" placeholder="例如：李狗蛋"
                       autofocus autocomplete="on" required>
        </label>
        <label for="tel">
           电话号码： <input id="tel" name="tel" type="tel" pattern="^1\d{10}$">
        </label>
        <label for="file">
           选择文件： <input type="file" id="file" name="file" multiple>
        </label>
        <input type="submit" value="提交"/>
    </fieldset>
</form>
</body>
</html>

8.html5的新增的表单验证的事件

◆oninvalid 当html5表单元素验证不通过时就会触发

	txt1.oninvalid=function(){
	//设置验证不通过是的提示文字
	this.setCustomValidity("您输入的数据不符合要求，请重新输入！")；		


	}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的新增的表单验证的事件</title>
    <style type="text/css">
        form {
            width: 100%;
            max-width:640px;
            min-width: 320px;
            margin:0 auto;
            font: 20px "microsoft yahei";
        }
        input {
            width: 100%;
            height: 30px;
            margin:10px auto;

        }
        input[type="submit"] {
            outline-style: none;
            /*border:0 none;*/
            border-width: 1px;
            border-color: #0f0f;
            background-color: #0f0f;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>html5的新增的表单事件</legend>
        <label for="email">
            邮箱：<input type="email" id="email" name="email" />
        </label>
        <label for="password">
            密码：<input type="text" id="password" name="password" />
        </label>
        <input type="submit" value="提交">
    </fieldset>
</form>
<script>
    var email=document.getElementById("email");
    var txt=document.getElementById("password");
    var number=0;
    email.oninvalid= function () {
        this.setCustomValidity("请输入正确的邮箱格式！66666");
    }
    email.οninput= function ()  {
        number++;
        txt.value=number;
    }
</script>
</body>
</html>

9.html5表单来DIY：学生档案-填表

◆学生档案-填表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5表单制作学生档案-填表</title>
    <style type="text/css">

        /*form {*/
            /*width: 100%;*/
            /*max-width:640px;*/
            /*margin:0 auto;*/
            /*font:20px "microsoft yahei";*/
        /*}*/

        /*input ,meter,progress{*/
            /*display: block;*/
            /*height: 30px;*/
            /*width: 100%;*/
            /*margin:10px auto;*/
        /*}*/

        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
            font-family: '微软雅黑';
        }

        form {
            max-width: 640px;
            width: 100%;
            margin: 24px auto;
            font-size: 28px;
        }

        label {
            display: block;
            margin: 10px 10px 15px;
            font-size: 24px;
        }

        input {
            display: block;
            width: 100%;
            height: 40px;
            font-size: 22px;
            margin-top: 10px;
            padding: 6px 10px;
            color: #333;
            border: 1px solid #CCC;
            box-sizing: border-box;
        }

        meter, progress {
            display: block;
            width: 100%;
            margin-top: 10px;
        }

        input[type="submit"] {
            color: #FFF;
            background-color: green;
            border: 0 none;
            outline: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label for="stuname">
                学生姓名：<input type="text" id="stuname" name="stuname"
                            required autofocus placeholder="请输入姓名">
            </label>
            <label for="stutel">
                手机号码：<input type="tel" required placeholder="请输入手机号码"
                            name="stutel" id="stutel" pattern="^1\d{10}$">
            </label>
            <label for="stuemail">
                学生邮箱：<input type="email"  name="stuemail" id="stuemail"
                            required placeholder="请输入邮箱">
            </label>
            <label for="stussyx">
                所属院校：<input type="text" autocomplete="on" list="course"
                            id="stussyx" name="stussyx" placeholder="第 1 所院校">
                <datalist id="course">
                    <option value="第 1 所院校">第 1 所院校</option>
                    <option value="第 2 所院校">第 2 所院校</option>
                    <option value="第 3 所院校">第 3 所院校</option>
                    <option value="第 4 所院校">第 4 所院校</option>
                    <option value="第 5 所院校">第 5 所院校</option>
                    <option value="第 6 所院校">第 6 所院校</option>
                    <option value="第 7 所院校">第 7 所院校</option>
                    <option value="第 8 所院校">第 8 所院校</option>
                    <option value="第 9 所院校">第 9 所院校</option>
                    <option value="第 10 所院校">第 10 所院校</option>
                </datalist>
            </label>
            <label for="score">
                入学成绩： <input type="number" max="100" min="0" value="70"
                            step="10" id="score" name="score">
            </label>
            <label for="level">
                基础水平: <meter id="level" name="level"
                    min="0" max="100" low="60" high="100" value="70"></meter>
            </label>
            <label for="indate">
                入学时间: <input type="date" value="2017-09-01" id="indate" name="indate">
            </label>
            <label for="outdate">
                毕业时间: <input type="date" value="2020-09-01" id="outdate" name="outdate">
            </label>
            <label for="progress">
                课程进度：<progress id="progress" name="progress" min="0" max="100" value="10"></progress>
            </label>
            <label for="submit">
                <input type="submit" id="submit" value="保存">
            </label>
        </fieldset>
    </form>
<script>
    var score=document.getElementById("score");
    var level=document.getElementById("level");

    score.οninput= function () {
        level.value=score.value;
    }
</script>
</body>
</html>

10.html5新增的多媒体标签
◆之前在网页上播放多媒体必须依赖于第三方插件
◇mediaplay
◇快播
◇flash插件
◆现在html5里面提供了视频video和音频audio的标签
◆audio 音频标签

◇ controls显示控制条、autoplay表示自动播放音乐、loop表示循环播放

<audio src="music/yinyue.mp3" controls  autoplay  loop></audio>

◇audio 音频标签只支持 Ogg Vorbis、MP3、Wav这三种格式的音频文件，所以需要写兼容性的写法

<audio controls loop autoplay>
<!-- 通过source标签指定多格式音频文件 -->
<source src="music/yinyue.mp3" >
<source src="music/yinyue.ogg" >
<source src="music/yinyue.wav" >
您的浏览器不支持html5音频播放功能
</audio>

◇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的音乐标签audio</title>
</head>
<body>
<!--html4 播放音乐的标签-->
<!--<embed src="music/yinyue.mp3"></embed>-->

<!--html5 播放音乐的标签-->
<!--<audio src="music/yinyue.mp3"></audio>-->

<!--html5 播放音乐的兼容性写法-->
<audio loop="loop" autoplay="autoplay" controls="controls">
    <source src="music/yinyue.mp3"/>
    <source src="music/yinyue.ogg"/>
    <source src="music/yinyue.wav"/>
    对不起，您的浏览器暂时不支持html5的音乐播放！！！
</audio>
</body>
</html>

◆video 视频标签

◇controls显示控制条、autoplay表示自动播放音乐、loop表示循环播放

<video src="video/movie.mp4"  controls  autoplay  loop></video>

◇video 视频标签只支持 Ogg MPEG 4 WebM这三种格式的视频文件，所以需要些兼容性的写法，

<video autoplay controls loop >
<source src="video/movie.mp4" >
<source src="video/movie.ogg" >
<source src="video/movie.webm" >
您的浏览器不支持html5视频播放功能
</video>

◇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的视频标签video</title>
</head>
<body>
<!--html4 的视频播放标签-->
<!--<embed src="video/movie.mp4"></embed>-->

<!--html5 的视频播放标签-->
<!--<video src="video/movie.mp4" loop="loop" autoplay="autoplay" controls="controls"></video>-->

<!--html5 的视频播放标签兼容性写法-->
<video loop="loop" autoplay="autoplay" controls="controls">
    <source src="video/movie.mp4"/>
    <source src="video/movie.ogg"/>
    <source src="video/movie.wav"/>
    您好，你的浏览器暂时不支持html5的视频播放！！！
</video>
</body>
</html>

★原本html4中也有一个音乐标签

<embed src="music/yinyue.mp3"></embed>

其实内部渲染之后就是video了。

11.html5 新增的dom对象获取方式

◆通过查询选择器的方式获取dom对象：

document.querySelector("#box");

可以通过id获取dom对象，只会获取第一个查询到的对象，无论你是类选择器还是标签选择器在或者id选择器。

◆通过查询选择器的方式获取多个dom对象（装到伪数组中）：

document.querySelectorAll(".box");

可以获取到查询到的多个dom对象，返回值是一个伪数组，无论你是类选择器还是标签选择器再或者id选择器，就算只有一个dom对象都会返回一个伪数组。

★无论是querySelector还是querySelectorAll，其实都是根据css2+css3选择器来获取dom对象或伪数组dom对象

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的新增的获取页面dom元素的方式</title>
    <style type="text/css">
        div {
            width: 120px;
            height: 120px;
            border: 1px solid #0f0a;
            margin:20px auto;
        }
        
        #box {
            background-color: #f00a;
        }
        
        .box {
            background-color: #00fa;
        } 

    </style>
    <script>
        window.οnlοad= function (){
            /*
            第一种html5 获取dom元素的方式 获取单个dom元素
             通过查询选择器的方式获取dom对象：
             document.querySelector("#box");
             可以通过id获取dom对象，
             只会获取第一个查询到的对象，
             无论你是类选择器还是标签选择器在或者id选择器
            * */
            var idbox=document.querySelector("#box");
            console.log(idbox);
            var classbox=document.querySelector(".box");
            console.log(classbox);

            /*
            第二种html5 获取dom元素的方式  获取多个dom元素
             通过查询选择器的方式获取多个dom对象（装到伪数组中）：
             document.querySelectorAll(".box");
             可以获取到查询到的多个dom对象，
             返回值是一个伪数组，
             无论你是类选择器还是标签选择器再或者id选择器，
             就算只有一个dom对象都会返回一个伪数组
            * */
            var idsbox=document.querySelectorAll("#box");
            console.log(idsbox);
            var classlistbox=document.querySelectorAll(".box");
            console.log(classlistbox);

            /**
             * 无论是querySelector还是querySelectorAll，
             * 其实都是根据css2+css3选择器来获取dom对象或伪数组dom对象
             */

        }
    </script>
</head>
<body>
<div id="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

12.html5 新增的操作类的方式

◆添加一个类

box.classList.add("class5");//添加类，classList属性表示类的列表，这个方法类似于jQuery中的addClass();

◆移除一个类

box.classList.remove("class5");//移除类，这个方法类似于jQuery中的removeClass();

◆判断是否包含类

box.classList.contains("class5");//是否包含类，这个方法类似于jQuery中的hasClass();

◆切换类，存在就移除、不存在就添加

box.classList.toggle("class5");//切换类，如果有就删除，如果没有就添加，这个方法类似于jQuery中的toggleClass();

◆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的新增的操作类的方式</title>
    <style type="text/css">

        .box {
            width: 120px;
            height: 120px;
            border: 1px solid #0f09;
            margin: 20px auto;
        }

        .current {
            border-radius: 50%;
            background-color: #0f0f;
        }

    </style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<script>
    //获取对象
    var box1 = document.querySelector(".box1");
    var box2 = document.querySelector(".box2");
    var box3 = document.querySelector(".box3");
    var box4 = document.querySelector(".box4");
    var box5 = document.querySelector(".box5");

    //添加类
    box1.classList.add("current");
    box2.classList.add("current");
    box3.classList.add("current");
    box4.classList.add("current");
    box5.classList.add("current");


    //移除类
    box2.classList.remove("current");

    //是否包含类
    box3.innerHTML=box3.classList.contains("current");

    //切换类
    box4.classList.toggle("current");
</script>
</body>
</html>

13.html5中的自定义属性，必须以data开头以-连接，如 <div id="box" data-size="200"></div>

◆获取html5中的自定义属性：

box.dataset["size"]//表示获取自定义属性key为size的值

◆设置html5中的自定义属性：

box.dataset["size"]=500;

◆获取值时注意，如果你设置的html5自定义属性为

<div id="box"   data-box-size="200"></div>

时，有多个-，那么获取的时候就必须使用小驼峰命名法这么获取，

box.dataset['boxSize']

，只能够这样子来获取。

◆设置html5中的自定义属性

    var box=document.querySelector(".box");
    //获取 一个 横杠隔开 - 的自定义属性
    console.log(box.dataset["name"]);
    //获取 两个 横杠隔开 - 的自定义属性
    console.log(box.dataset["childName"]);

    //设置 一个 横杠隔开 - 的自定义属性
    box.dataset["sex"]="男";
    //设置 两个 横杠隔开 - 的自定义属性
    box.dataset["childSex"]="不详";

★html5标签在页面上设置自定义属性时无法设置大写的，更无法使用小驼峰命名法，就算你设置了大写的自定义属性，到后来都会被页面标签渲染成全小写的自定义属性

data-haSX-XhxaXi="hahaxixi" 会被渲染成  data-hasx-xhxaxi="hahaxixi"

，只有在使用js的方式才能使用驼峰命名法来获取或者设置页面标签上显示的多个-的自定义属性。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5的自定义属性的设置与获取</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border-radius:50%;
            background-color: #0f0a;
            margin:20px auto;
        }
    </style>
</head>
<body>
<div></div>
<div class="box" data-name="haha" data-child-name="xixi" data-haSX-XhxaXi="hahaxixi"></div>
<div></div>
<div></div>
<div></div>
<script>

    var box=document.querySelector(".box");
    //获取 一个 横杠隔开 - 的自定义属性
    console.log(box.dataset["name"]);
    //获取 两个 横杠隔开 - 的自定义属性
    console.log(box.dataset["childName"]);

    //设置 一个 横杠隔开 - 的自定义属性
    box.dataset["sex"]="男";
    //设置 两个 横杠隔开 - 的自定义属性
    box.dataset["childSex"]="不详";
</script>
</body>
</html>

jwllwj_2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5的使用及基本注意说明相关笔记（一）

1 网页开发方式上的两个层次：◆HTML4.1 ◇结构：html4.0 ◇样式：css css2 ◇行为：js◆HTML5 ◇结构：html5 ◇样式：css3 ◇行为：js API 有所增强如地理定位 web存储拖拽重力感应硬件访问等2.HTML5◆HTML5狭义的概念上就是HTML4的升级版本，HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段，也就是 html5+css3...
复制链接

扫一扫

专栏目录