| 标签 | 描述 |
<canvas> | 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
| 标签 | 描述 |
<audio> | 定义音频内容 |
<video> | 定义视频（video 或者 movie） |
<source> | 定义多媒体资源 <video> 和 <audio> 字体 |
<embed> | 定义嵌入的内容，比如插件。 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
| 标签 | 描述 |
<datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<output> | 定义不同类型的输出，比如脚本的输出。 |
| 标签 | 描述 |
<article> | 定义页面的侧边栏内容 |
<aside> | 定义页面内容之外的内容。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框，比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义运行中的进度（进程）。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释（中文注音或字符）。 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节（section、区段）。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
<body>
<header>定义了文档的头部区域</header>
<div>
<article>定义页面的侧边栏内容</article>
<aside>定义页面内容之外的内容</aside>
</div>
<footer>定义 section 或 document 的页脚</footer>
</body>
<script src="../js/html5shiv.min.js"></script>
| 属性 | 值 | 描述 |
high | number | 定义度量的值位于哪个点，被界定为高的值。 |
low | number | 定义度量的值位于哪个点，被界定为低的值。 |
max | number | 定义最大值。默认值是 1。 |
min | number | 定义最小值。默认值是 0。 |
optimum | number | 定义什么样的度量值是最佳的值。 如果该值高于 "high" 属性，则意味着值越高越好。 如果该值低于 "low" 属性的值，则意味着值越低越好。 |
value | number | 定义度量的值 |
autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on">
autofocus定位文本框焦点：<input type="text" autofocus> <br>
placeholder设置文本框默认提示：<input type="text" placeholder="请输入***"><br>
email邮件类型自带验证和提示：<input type="email"> <br>
required属性设置非空特性：<input type="tel" required><br>
pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>
multiple多文件选择：<input type="file" multiple><br>
<input type="submit" value="提交"/>
</form>
<script>
/*oninput可以监听用户的每一次输入*/
document.getElementById("name").oninput=function(){
console.log(this.value);
}
/*监听键盘弹起，每一个键盘弹出触发一次*/
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
/*当指定表单元素验证不通过时触发*/
document.getElementById("phone").oninvalid=function(){
console.log("验证不通过");
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
body{
max-width:600px;
margin: 0 auto;
}
form{
width:100%;
}
form fieldset{
padding:20px 20px 10px;
}
form fieldset label{
font-weight:bold;
line-height:20px;
}
form input,
form meter{
width:100%;
margin:10px 0;
display: block;
height:30px;
border: 1px solid #ccc;
padding-left:5px;
}
form meter{
width:100%;
border: none;
padding-left:0;
}
.btn{
width:100%;
height: 40px;
margin-top: 20px;
}
</style>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入姓名" required>
<label for="phone">手机号码：</label>
<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
<label for="email">邮箱地址：</label>
<input type="email" name="email" id="email">
所属学院：
<input type="text" list="school" name="college" id="college" placeholder="请选择">
<datalist id="school">
<option>移动与前端开发学院</option>
<option>IOS</option>
<option>andriod</option>
<option>c++</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
<label for="level">基础水平</label>
<!--通过low/high的值来设置meter的颜色-->
<meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></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" name="submit" id="submit" class="btn">
</fieldset>
</form>
<script>
/*通过score成绩的输入，动态修改meter的颜色*/
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
<audio src="../mp3/See.mp3" controls autoplay></audio>
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
<video src="../mp3/561902ae6ac6e6649.mp4" controls></video>
<div class="tabs">
<div>
<a href="javascript:;" data-target="local">国内新闻</a>
<a href="javascript:;" data-target="global">国际新闻</a>
<a href="javascript:;" data-target="sports">体育新闻</a>
<a href="javascript:;" data-target="funny">娱乐新闻</a>
</div> <section class="cont active" id="local">
<ol>
<li>习近平向2名晋升为上将军官颁发命令状</li>
<li>郭声琨了解指导公安消防部队抗洪工作</li>
<li>媒体：曾任职中办的这位官员仕途有变</li>
<li>广西警方端掉地下兵工厂缴获大批炮弹</li>
<li>她完美诠释奇葩考题夺金牌</li>
<li>中国奥运选手在里约多次遭抢劫</li>
</ol>
</section>
<section class="cont active" id="global">
<ol>
<li>河南再次发生矿难，死伤人数超过100</li>
<li>禽流感次发生蔓延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广减产绝收发</li>
<li>禽流感在全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>河南再次发生矿难，死伤人数超过10</li>
<li>禽流感在全国多处农作物农延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延，温家宝指示</li>
<li>南方大农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
<li>四川原副省长李成云被查 5年前曾违纪又复出</li>
<li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>
<li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
<li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
<li>国子监大街门匾现错字 已悬挂近10年(图)</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
</div>
<script>
(function(key){
//1.获取所有a标签
var allA=document.querySelector(".tabs").querySelector("div:first-child").querySelectorAll("a");
//初始化操作
for(var i=0;i<allA.length;i++){
if(i==key){
allA.classList.add("active");
var active=allA.dataset["target"];
document.querySelector("#"+active).style.display='block';
}
//2.循环遍历所有的a标签，为其添加点击事件
allA.onclick=function(){
//3.判断当前是否是当前已激活的页，如果是，则不进行处理
if(this.classList.contains("active")){
return;
}
//4.否则，则需要找到当前a标签对应的data-target属性，利用这个属性找到对应id的section进行样式的设置，让其显示
//4.1先移除之前a标签的active类样式
var aActive=document.querySelector(".active");
aActive.classList.remove("active");
//4.2让之前显示的section隐藏
var currentTarget=aActive.dataset["target"]; document.querySelector("#"+currentTarget) .style.display ="none";
//4.3为其添加active样式
this.classList.add("active");
//4.4获取当前被点击的a标签的data-target属性
var value=this.dataset["target"];
//4.5让对应id的section显示--添加active类样式即可
document.querySelector("#"+value).style.display="block";
};
}
})(0);
</script>
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |