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