HTML5和CSS3一标签与属性

最新推荐文章于 2024-05-23 16:52:46 发布

酒茶白开水

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量501

点赞数

分类专栏： HTML5CSS3 文章标签： css3 html5 html 标签属性

本文链接：https://blog.csdn.net/jiuchabaikaishui/article/details/125078584

版权

HTML5CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码下载地址

HTML5简介

html5不是新的语言，而是html的第五次重大修改——版本

支持：所有主流浏览器都支持（Chrome、Firefox、Safari等），IE9（不是全部支持是有选择的支持）及以上支持

改变了用户与文档的交互方式：多媒体（video、audio、canvas）

增加了新的特性：语义特性，本地存储特性，网页多媒体，二维/三维，特效（过度、动画）

相对HTML4：

抛弃了一些不合理不常用的标记和属性
新增了一些标记和属性——表单
从代码角度，HTML5网页结构代码更简洁

可以通过如下方式构建文档类型进行比较：

html:5 HTML5文档类型
html:xt XHTML过度文档类型
html:4s HTML4严格文档类型，完全按照HTML4解析

HTML5参考手册，这里例举了HTML众多标签并对HTML5抛弃和新增的进行了标注。

语义标签

HTML5中有部分标签语义性更强，更容易理解：

标签	作用
nav	导航
header	页眉
footer	页脚
main	主体内容
article	文章
aside	边栏（主体内容之外）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*重置内外边距*/
        *{
            padding: 0;
            margin: 0;
        }
        header{
            background-color: red;
            width: 100%;
            height: 64px;
        }
        nav{
            background-color: green;
            width: 100%;
            height: 44px;
        }
        main{
            background-color: blue;
            width: 100%;
            height: 500px;
        }
        /*子元素*/
        main > article{
            background-color: cyan;
            width: 80%;
            height: 100%;
            float: left;
        }
        main > aside{
            background-color: purple;
            width: 20%;
            height: 100%;
            float: right;
        }
        footer{
            background-color: yellow;
            width: 100%;
            height: 49px;
        }
    </style>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
    <!--主体-->
    <article>文章</article>
    <aside>边栏</aside>
</main>
<footer>尾部</footer>
</body>
</html>

如需兼容IE8等浏览器可以手动创建标签，默认标签的类型都是行级元素：

<script>
    // 手动创建标签，默认标签的类型都是行级元素
    document.createElement("header");
    document.createElement("nav");
    document.createElement("main");
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
</script>

引入第三方js：

<!--ie8一下不支持HTML5，引入以下文件就可以做到兼容-->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script>

行级元素在设置宽高时是无效的，将行级元素转化为块级元素：

        header{
            display: block;
            background-color: red;
            width: 100%;
            height: 64px;
        }

HTML5表单input标签新增的type属性

input属性列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    用户名：<input type="text" name="userName"> <br>
    密码： <input type="password" name="userPassword"> <br>
    <!--提供了默认的电子邮箱验证-->
    email：<input type="email" name="userEmail"> <br>
    <!--并不提供电话号码的验证，而是能够在移动端调用输入电话号码的数字键盘-->
    电话：<input type="tel" name="userTelephone"> <br>
    <!--提供合法网址验证-->
    网址：<input type="url" name="userUrl"> <br>
    <!--只能输入数字（包括小数）-->
    数量：<input type="number" name="userNumber" value="60" max="100" min="0"> <br>
    <!--提供更人性化的输入体验：有删除按钮-->
    商品名称：<input type="search">
    范围：<input type="range" value="50" max="100" min="0"> <br>
    颜色：<input type="color"> <br>
    时间：<input type="time"> <br>
    日期：<input type="date"> <br>
    时间日期：<input type="datetime-local"> <br>
    月份：<input type="month"> <br>
    星期：<input type="week"> <br>

    <input type="submit">
</form>
</body>
</html>

表单新增的属性

<form action="" id="myForm">
    <!--占位符、获取焦点、自动完成（必须提交之后才能记录、必须设置name，on/off打开/关闭）-->
    用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
    <!--必须输入、正则表达式-->
    手机号：<input type="tel" name="telephoneNumber" required pattern="^(\+86)?1(3|4|5|7|8)\d{9}$"> <br>
    <!--多个值-->
    文件：<input type="file" name="photo" multiple> <br>
    <!--输入多个值需要用逗号分隔-->
    email：<input type="email" name="email" multiple> <br>
    <input type="submit">
</form>
<!--指定表单id，将表单元素 数据加入到指定表单提交-->
地址：<input type="text" name="address" form="myForm">

表单新增的元素

<form action="">
    专业：
    <select name="" id="">
        <option value="1">iOS</option>
        <option value="2">android</option>
        <option value="3">web前端</option>
    </select>
    <br>

    <!--不仅可以输入，还可以选择，通过datalist创建选择列表-->
    <!--建立输入框与datalist的关联，list="datalist的id号"-->
    专业：<input type="text" list="subjects">
    <datalist id="subjects">
        <!--选项值，value：具体的值，label：提示信息，辅助值-->
        <!--option可以试单标签也可以试双标签 -->
        <option value="iOS" label="精通"/>
        <option value="android" label="熟悉"></option>
        <option value="web前端" label="了解"></option>
    </datalist>
    <br>

    <!--如果input的type类型是url，那么value值必须添加-->
    网址：<input type="url" list="urls">
    <datalist id="urls">
        <option value="https://www.baidu.com"></option>
        <option value="https://www.sohu.com"></option>
    </datalist>
</form>

表单新增事件

<body>

<form action="">
    用户名：<input type="text" name="username" id="username"> <br/>
    电话：<input type="tel" name="telephone" id="telephone" pattern="^1\d{10}$"> <br/>
    <input type="submit">
</form>
<script>
    /*oninput：监听指定元素内容的变化，只要改变就会触发*/
    document.getElementById("username").oninput = function () {
        console.log("oninput" + this.value);
    }
    /*onkeyup：监听键盘，键的弹起都会触发一次*/
    document.getElementById("username").onkeyup = function () {
        console.log("onkeyup" + this.value);
    }
    /*oninvalid：验证不通过时触发*/
    document.getElementById("telephone").oninvalid = function () {
        /*设置提示信息*/
        this.setCustomValidity("请输入11位手机号码")
    }
</script>
</body>

进度条

<!--max:最大值；value:当前值-->
<progress max="100" value="18"></progress> <br>

<!--度量器:衡量当前进度值-->
<!--high:规定较高的值；low:规定的较低的值；max:最大值；min:最小值；value:当前值-->
<meter max="100" min="0" low="20" high="80" value="10"></meter> <br>
<meter max="100" min="0" low="20" high="80" value="50"></meter> <br>
<meter max="100" min="0" low="20" high="80" value="90"></meter> <br>

表单总结案例

<body>

<form action="">
    <fieldset>
        <legend>学生档案</legend>
        <label for="userName">姓名：</label>
        <input type="text" name="userName" id="userName" placeholder="请输入姓名">
        <label for="phoneNum">手机号码：</label>
        <input type="tel" name="phoneNum" id="phoneNum" pattern="^1\d{10}$">
        <label for="email">电子邮箱：</label>
        <input type="text" name="email" id="email" required>
        <label for="school">所属专业：</label>
        <input type="text" name="school" id="school" list="schoolList" placeholder="请选择">
        <datalist id="schoolList">
            <option value="土木工程"></option>
            <option value="软件工程"></option>
            <option value="国际贸易"></option>
        </datalist>
        <label for="score">入学成绩：</label>
        <input type="number" name="score" id="score" min="0" max="100" value="0">
        <label for="level">基础水平</label>
        <meter id="level" min="0" max="100" low="59" high="80" value="0"></meter>
        <label for="inTime">入学日期：</label>
        <input type="date" name="inTime" id="inTime">
        <label for="leaveTime">毕业日期：</label>
        <input type="date" name="leaveTime" id="leaveTime">
        <input type="submit">
    </fieldset>
</form>

<script>
    document.getElementById("score").oninput = function () {
        document.getElementById("level").value = this.value
    }
</script>

</body>

多媒体标签

<body>
<!--audio标签
src：音频文件路径
controls：播放控制面板
autoplay：自动播放
loop：循环
-->
<audio src="mp3/y857.wav" controls autoplay loop></audio> <br/>

<!--video标签
src：视频文件路径
controls：播放控制面板
autoplay：自动播放
loop：循环
width：宽度（一般只设置宽度或者高度，如果同时设置视频不会调整到非等比的宽高，）
height：高度
poster：视频播放前的封面，默认为当前视频的第一帧画面
-->
<video src="mp3/1653902590493958.mp4" controls width="108" height="108" poster="images/huliena.jpeg"></video> <br/>

<!--source标签
不同浏览器支持的视频格式不一样，准备多个视频格式文件供浏览器选择。
-->
<video controls>
    <source src="mp3/1653902590493958.flv" type="video/flv">
    <source src="mp3/1653902590493958.mp4" type="video/mp4">
    当前浏览器不支持
</video>

</body>

获取元素

<body>

<ul>
    <li class="red">红</li>
    <li class="green">绿</li>
    <li class="blue" id="blue">蓝</li>
</ul>

<script>
    /*获取li标签*/
    window.onload = function () {
        /*getElementsByTagName：获取的是数组
            使用索引不直观，一般数据都是后台
        */
        var liValue = document.getElementsByTagName("li")[1];
        console.log(liValue);

        /*querySelector：查询选择器（传入选择器名称）
            获取单个元素，如果获取的元素不止一个，返回满足条件的第一个
            参数要求：类选择器必须添加.；id选择器必须添加#；否则会当成标签处理
        */
        var quryLi = document.querySelector("li");
        console.log(quryLi)
        var greenLi = document.querySelector(".green");
        console.log(greenLi)
        var blueLi = document.querySelector("#blue");
        console.log(blueLi)

        /*querySelectorAll：获取满足条件的所有元素-数组*/
        var allLi = document.querySelectorAll("li")
        console.log(allLi)
    }
</script>

</body>

操作元素类样式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .blue {
            color: blue;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<ul>
    <li>第一个</li>
    <li class="blue">第二个</li>
    <li>第三个</li>
    <li class="red">第四个</li>
</ul>

<input type="button" value="获取第二个元素li样式" id="items">
<input type="button" value="设置第三个li元素样式" id="classname"> <br/>
<hr>
<input type="button" value="为第一个li元素添加样式" id="add">
<input type="button" value="为第二个li元素移除样式" id="remove">
<input type="button" value="为第三个li元素更换样式" id="toggle">
<input type="button" value="判断第四个li元素是否包含某个样式" id="contains">

<script>
    window.onload = function () {
        document.querySelector("#items").onclick = function () {
            /*classList.item：获取元素已经添加的样式，通过参数来确定取添加的第几个样式*/
            var value = document.querySelectorAll("li")[1].classList.item(0);
            console.log(value);
        }
        document.querySelector("#classname").onclick = function () {
            /*className：设置元素样式，可以设置多个但是会覆盖掉原有样式*/
            document.querySelectorAll("li")[2].className = "red underline";
        }

        /*add：为元素添加指定名称的样式，一次只能添加一个样式*/
        document.querySelector("#add").onclick = function () {
            /*classList：当前元素所有样式列表-数组*/
            document.querySelector("li").classList.add("red");
            document.querySelector("li").classList.add("underline")
        }
        /*remove：为元素移除指定名称的样式（而不是属性），一次只能移除一个样式*/
        document.querySelector("#remove").onclick = function () {
            document.querySelector(".blue").classList.remove("blue");
        }
        /*toggle：切换元素样式，之前元素没有指定名称的样式就添加，否则移除。*/
        document.querySelector("#toggle").onclick = function () {
            document.querySelectorAll("li")[2].classList.toggle("green")
        }
        /*contains：判断元素是否包含指定名称的的样式，返回true/false*/
        document.querySelector("#contains").onclick = function () {
            var isContains = document.querySelectorAll("li")[3].classList.contains("red");
            console.log(isContains);
        }
    }
</script>

</body>
</html>

自定义属性

<body>

<!--定义：
规范：
1、data-开头
2、data-后必须有一个字符，多个单词使用-连接
建议：
1、名称应都使用小写
2、名称中不要包含任何特殊符号
3、名称不要使用纯数字
-->
<p data-text-property="这是标题">这是文本</p>

<!--取值-->
<script>
    window.onload = function () {
        /*获取自定义属性值：
            将data-后面的单词使用驼峰命名法连接否则无法取到值
        */
        var value = document.querySelector("p").dataset["textProperty"];
        console.log(value);
    }
</script>

</body>

酒茶白开水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5和CSS3一标签与属性

html5不是新的语言，而是html的第五次重大修改——版本支持：所有主流浏览器都支持（Chrome、Firefox、Safari等），IE9（不是全部支持是有选择的支持）及以上支持改变了用户与文档的交互方式：多媒体（video、audio、canvas）增加了新的特性：语义特性，本地存储特性，网页多媒体，二维/三维，特效（过度、动画）相对HTML4：可以通过如下方式构建文档类型进行比较：HTML5参考手册，这里例举了HTML众多标签并对HTML5抛弃和新增的进行了标注。HTML5中有部分标签语义性更强，更
复制链接

扫一扫