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属性
<!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一标签与属性的主要内容，如果未能解决你的问题，请参考以下文章