HTML5和CSS3一标签与属性

Posted 酒茶白开水

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5和CSS3一标签与属性相关的知识,希望对你有一定的参考价值。

代码下载地址

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)\\d9$"> <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\\d10$"> <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\\d10$">
        <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>

以上是关于HTML5和CSS3一标签与属性的主要内容,如果未能解决你的问题,请参考以下文章

精通HTML5+CSS3需要学啥?

CSS3主要知识点复习总结+HTML5新增标签

HTML5和CSS3五CSS3二

HTML5和CSS3五CSS3二

HTML5和CSS3五CSS3二

HTML5新特性CSS3新特性