2018年8月12日
暑假第五周，我把HTML剩余的一些标签和用法看完了并学了一些HTML5的标签及用法。
HTML5比HTML多了一些元素，也删去了一些元素。
HTML5新增元素
图形元素
<canvas> | 定义图形，比如图表和其他图像。该标签基于JavaScript的绘图API |
新多媒体元素
<audio> | 定义音频内容。必须有controls属性。目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。直接加文字内容，音频不支持时显示文字。 |
<video> | 定义视频（video或者movie），有width、height属性。必须有controls属性。直接加文字内容，视频不支持时显示文字。 |
<source/> | 定义多媒体资源<video>和<audio>。浏览器选择能播放的使用。 <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> |
<embed/> | 定义嵌入的内容，比如flash、插件。属性有height、src、type、width |
<track/> | 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道。这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。 |
新表单元素
<datalist> | 定义选项列表。请与input元素配合使用该元素，来定义input可能的值。 |
<keygen/> | 规定用于表单的密钥对生成器字段。该标签在新的 Web 标准中已废弃，Internet Explorer不支持keygen标签。 |
<output> | 定义不同类型的输出，比如脚本的输出。 |
新的语义和结构元素
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。起到空格作用？目前，只有Firefox和Chrome浏览器支持该标签。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮。目前，只有IE 9支持该标签。 |
<details> | 用于描述文档或文档某个部分的细节。与<summary>一起用。目前，只有Chrome和Safari 6支持该标签。 |
<summary> | 标签包含 details 元素的标题。 |
<dialog> | 定义对话框，比如提示框。目前，只有Chrome和Safari 6支持该标签。 |
<mark> | 定义带有记号的文本。Internet Explorer 8 及更早版本不支持该标签。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。样式相似于进度条。 |
<progress> | 定义任何类型的任务的进度。IE 9与之前的IE 浏览器不支持该标签 |
<ruby> | 定义 ruby 注释（中文注音或字符）。IE 8与之前的IE 浏览器不支持该标签 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
为了能让旧版本的浏览器正确显示以下元素，可以在head标签里设置 CSS 的 display 属性值为 block:
<style>
header, section, footer, aside, nav, main, article, figure {
display: block;
}
</style>
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义 <figure> 元素的标题。<figure>内 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义文档的头部区域。不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。在一个文档中可以定义多个 <header> 元素。 |
<nav> | 定义导航链接的部分。 |
<section> | 定义文档中的节（section、区段）。 |
<main> | 代表文档的主内容区,一个页面中只能有一个main元素。不能将<main>元素放在<article>、<aside>、<header>、<footer>、<nav>、<html>元素里。 |
HTML5删除的元素
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
本周学习时间将近20小时，周六日休息、复习，花在代码上的时间每天接近1小时。本周问题比较多，但是百度一搜都能找到解决方法。
本周利用localStorage和sessionStorage制作出来一个十分简陋的学生信息录入存储系统，下一周开始正式学习CSS和JavaScript，顺便利用CSS和JavaScript美化这个静态网页。
下面附上这个非常简陋的网页源代码
HTML源代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>学信系统</title><link rel="stylesheet" type="text/css" href="studentSystem.css"/></head><body><table><tr><td><div id="result" class="frame"><br/><br/><br/><br/><br/><br/><br/>显示结果区域</div></td><td><div id="e" style="display:">首先需要检测当前浏览器是否支持网页存储:<input type="button" onclick="check()" value="开始检测"/></div><div id="d" style="display:none"><input type="button" onclick="clickA()" value="操作栏显/隐"/> <input type="button" onclick="clickB()" value="增改栏显/隐"/> <input type="button" onclick="clickC()" value="删查栏显/隐"/> <a href="javascript:location.reload()"><button type="button" onclick="sessionStorageClean()">刷新页面</button></a></div><!-- 显示所有数据/清空所有数据/刷新页面 --><br/><div id="a" style="visibility:hidden"><input type="button" onclick="showAll()" value="显示所有数据"/> <input type="button" onclick="localStorageClean()" value="清空所有数据"/></div><br/><!-- 增/改 --><div id="b" style="visibility:hidden"> <label for="number">学号：</label> ?<input type="text" id="number" name="number" class="text"/><br/> ?<label for="name">姓名：</label> ?<input type="text" id="name" name="name"/><br/><label for="age">年龄：</label> ?<input type="text" id="age" name="age"/><br/><label for="sex">性别：</label><input list="s" id="sex" name="sex"><datalist id="s"> ?<option value="男"> ?<option value="女"></datalist><br/><label for="score">成绩：</label> ?<input type="text" id="score" name="score"/><br/><input type="button" onclick="save()" value="增加"/><input type="button" onclick="update()" value="修改"/></div><br/><!-- 删/查 --><div id="c" style="visibility:hidden"> ?<label for="das">输入学号进行删除/查找：</label> ?<input type="text" id="das" name="das"/> ?<br/><input type="button" onclick="del()" value="删除"/><input type="button" onclick="find()" value="查找"/></div></td></tr><tr><td colspan="2" style="text-align:center;">This website is made by 星辰!</td></tr></table></body><script type="text/javascript" src="studentSystem.js"></script></html>
CSS源代码
@charset "UTF-8";div{ ???border: 2px dashed #ccc; ???width:400px; ???text-align:center;}table { ???border-collapse: collapse;}th{ ?position: -webkit-sticky; ?position: sticky; ?top: 0; ?font-size:1.1em; ?background-color:#A7C942; ?color:#ffffff;}div th,td{ ???border: 1px solid black; ???word-break: break-all; ???width:80px;}.frame{ ???height:320px; ???overflow:auto; ???overflow-x:auto;}#e{ ???position:absolute; ???top:150px;}JavaScript源代码
if(sessionStorage.checkBrower == "checked"){ ???hideCheck(); ???showControlBar();}function check(){ ???if(sessionStorage.checkBrower == "checked") ??????{ ?????????hideCheck(); ??????} ???else ???{ ???????sessionStorage.checkBrower = "checked"; ???} ???result = document.getElementById("result"); ???if(typeof(Storage)!="undefined") ???{ ???????result.innerHTML="<br/><br/><br/><br/><br/><br/><br/>当前浏览器支持网页存储!"; ???????showControlBar(); ???????hideCheck(); ???} else { ???????result.innerHTML="<br/><br/><br/><br/><br/><br/><br/>当前浏览器不支持网页存储，所以此网页无法使用！"; ???}}function hideCheck(){ ???document.getElementById("e").style.display="none";}function showControlBar(){ ???document.getElementById("d").style.display="";}function clickA(){ ???if (sessionStorage.clickcountA) ???{ ???????sessionStorage.clickcountA=Number(sessionStorage.clickcountA)+1; ???} ???else ???{ ???????sessionStorage.clickcountA=1; ???} ???if(Number(sessionStorage.clickcountA)%2==0) ???{ ???????hideA(); ???} ???else ???{ ???????showA(); ???}}function showA(){ ???document.getElementById("a").style.visibility="visible";}function hideA(){ ???document.getElementById("a").style.visibility="hidden";}function clickB(){ ???if (sessionStorage.clickcountB) ???{ ???????sessionStorage.clickcountB=Number(sessionStorage.clickcountB)+1; ???} ???else ???{ ???????sessionStorage.clickcountB=1; ???} ???if(Number(sessionStorage.clickcountB)%2==0) ???{ ???????hideB(); ???} ???else ???{ ???????showB(); ???}}function showB(){ ???document.getElementById("b").style.visibility="visible";}function hideB(){ ???document.getElementById("b").style.visibility="hidden";}function clickC(){ ???if (sessionStorage.clickcountC) ???{ ???????sessionStorage.clickcountC=Number(sessionStorage.clickcountC)+1; ???} ???else ???{ ???????sessionStorage.clickcountC=1; ???} ???if(Number(sessionStorage.clickcountC)%2==0) ???{ ???????hideC(); ???} ???else ???{ ???????showC(); ???}}function showC(){ ???document.getElementById("c").style.visibility="visible";}function hideC(){ ???document.getElementById("c").style.visibility="hidden";}//增 function save(){ ?????var number = document.getElementById("number").value; ???var str = localStorage.getItem(number); ???if(str == null){ ???????var student = new Object; ???????student.name = document.getElementById("name").value; ???????student.age = document.getElementById("age").value; ???????student.sex = document.getElementById("sex").value; ???????student.score = document.getElementById("score").value; ???????if(number != "" && student.name != "" && student.age != "" && student.sex != "" && ???????student.score != ""){ ???????????var str = JSON.stringify(student); ???????????localStorage.setItem(number,str); ???????????showAll(); ???????????}else{ ???????????????alert("数据某项为空!请填写完整!"); ???????????} ???????}else{ ???????????alert("此数据已存在!无需添加!"); ???}}//删function del(){ ???var number = document.getElementById("das").value; ???var str = localStorage.getItem(number); ???if(str == null){ ??????????alert("此数据不存在!无法删除!"); ???}else{ ???????localStorage.removeItem(number); ???????showAll(); ???}}//改function update(){ ?????var number = document.getElementById("number").value; ???var str = localStorage.getItem(number); ???if(str == null){ ??????????alert("此数据不存在!无法修改!"); ???}else{ ???????var student = new Object; ???????student.name = document.getElementById("name").value; ???????student.age = document.getElementById("age").value; ???????student.sex = document.getElementById("sex").value; ???????student.score = document.getElementById("score").value; ???????if(number != "" && student.name != "" && student.age != "" && student.sex != "" && ???????student.score != ""){ ???????????var str = JSON.stringify(student); ???????????localStorage.setItem(number,str); ???????????showAll(); ???????}else{ ???????????alert("数据某项为空!请填写完整!"); ???????} ???????}}//查 ?function find(){ ????var result = document.getElementById("result"); ???var search = document.getElementById("das").value; ?????var str = localStorage.getItem(search); ???if(str == null){ ???????alert("此数据不存在!"); ???}else{ ??????????var student = JSON.parse(str); ??????????var table = "<table border=‘1‘>"; ???????table += "<tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr>"; 7 ???????table += "<tr><td>" + search + "</td><td>" + student.name + "</td><td>" + student.age ???????+ "</td><td>" + student.sex + "</td><td>" + student.score + "</td></tr></table>"; ???????result.innerHTML = table; ???}}//显示所有数据function showAll(){ ?????var list = document.getElementById("result"); ?????if(localStorage.length>0){ ????????var result = "<table border=‘1‘>"; ?????????result += "<tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th></tr>"; ?????????for(var i=0;i<localStorage.length;i++){ ?????????????var number = localStorage.key(i); ?????????????var str = localStorage.getItem(number); ?????????????var student = JSON.parse(str); ?????????????result += "<tr><td>" + number + "</td><td>" + student.name + "</td><td>" + ???????????student.age + "</td><td>" + student.sex + "</td><td>" + student.score + "</td></tr>"; ???????} ????????result += "</table>"; ?????????list.innerHTML = result; ?????}else{ ?????????list.innerHTML = "<br/><br/><br/><br/><br/><br/><br/>数据为空!"; ???????alert("数据为空!"); ???} ?}//清空数据function localStorageClean(){ ???localStorage.clear(); ???document.getElementById("result").innerHTML = "<br/><br/><br/><br/><br/><br/><br/>数据为空!"; ???alert("成功清空所有数据！");}function sessionStorageClean(){ ???sessionStorage.removeItem(‘clickcountA‘); ???sessionStorage.removeItem(‘clickcountB‘); ???sessionStorage.removeItem(‘clickcountC‘);}顺便吐个槽，Edge浏览器真的难用，这个简陋的网页里“检查是否支持”功能Edge死活用不了，按理说应该支持啊，是我电脑有问题还是Edge不支持JavaScript？
第五周学习总结-HTML5
原文地址：https://www.cnblogs.com/dream0-0/p/9460852.html