第五周学习总结-HTML5
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:;
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的更多相关文章
- 20145213《Java程序设计》第五周学习总结补充
20145213<Java程序设计>第五周学习总结补充 教材学习内容总结 欠的账都是要还的!第九章的内容躲过对酒当歌的夜,躲不过四下无人的街.由于第五周贪玩,疏忽冷落了Collection ...
- 20145213《Java程序设计》第五周学习总结
20145213<Java程序设计>第五周学习总结 教材学习内容总结 "素衣莫起风尘叹,犹及清明可到家."每每念此,不得不心疼自己.古人清明长假都进城耍了,还担心自己清 ...
- 20145337 《Java程序设计》第五周学习总结
20145337 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 JAVA中的所有错误都会被包装成对象,如果你愿意,可以尝试执行并捕捉代表错误的对象后做一些处理.使用了try ...
- 20145218 《Java程序设计》第五周学习总结
20145218 <Java程序设计>第五周学习总结 教材学习内容总结 异常 程序中总有些意想不到的状况所引发的错误,如果不对异常进行正确的处理,则可能导致程序的中断执行,造成不必要的损失 ...
- 《Java程序设计》第五周学习总结
20145224 <Java程序设计>第五周学习总结 教材学习内容总结 第八章异常处理 8.1.1使用try.catch ·教材范例用户连续输入整数,输入0结束后显示输入数的平均值(代码如 ...
- 20155304 2016-2017-2 《Java程序设计》第五周学习总结
20155304 2016-2017-2 <Java程序设计>第五周学习总结 教材学习内容总结 第八章 try catch JVM会先尝试执行try区块中的内容,若发生错误且与catch后 ...
- 201521123072《java程序设计》第五周学习总结
201521123072<java程序设计>第五周学习总结 标签(空格分隔): java学习 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码 ...
- 201521123038 《Java程序设计》 第五周学习总结
201521123038 <Java程序设计> 第五周学习总结 1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.ja ...
- 201521123061 《Java程序设计》第五周学习总结
201521123061 <Java程序设计>第五周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 1.代 ...
随机推荐
- shiro 和 跨域过滤器冲突
在web.xml 中 cros要写在shiro 的配置前面,如下,不然会先过shiro 过滤器就产生跨域问题, 参考web.xml 的过滤器加载顺序 <!-- 跨域请求 --> <f ...
- Protobuf学习
https://www.jianshu.com/p/2265f56805fa https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.ht ...
- 用Tesseract训练验证码遇到的问题
1.准备验证码图片 import os from urllib.request import urlretrieve urlPath='http://www.189.cn/portal/captcha ...
- ListBox滚动条 刷新列表之后 指定位置(置顶或滚动到最后)
参数ObservableCollection<T>类型 滚动条在最上 ListBox.ScrollIntoView(ListBoxOC[0]);滚动条在最下 ListBox.ScrollI ...
- qunee 开发清新、高效的拓扑图组件 http://www.qunee.com/
qunee 开发清新.高效的拓扑图组件 http://www.qunee.com/ RoadFlow: http://www.cqroad.cn/ 村暖花开
- rsync+inotify实现实时同步案例【转】
1.1 inotify介绍 inotify是一种强大的.细粒度的.异步的文件系统事件控制机制.linux内核从2.6.13起,加入了inotify支持,通过inotify可以监控文件系统中添加.删除. ...
- python性能分析之line_profiler模块
line_profiler使用装饰器(@profile)标记需要调试的函数.用kernprof.py脚本运行代码,被选函数每一行花费的cpu时间以及其他信息就会被记录下来. 安装 pip3 insta ...
- smarty半小时快速上手教程
一:smarty的程序设计部分: 在smarty的模板设计部分我简单的把smarty在模板中的一些常用设置做了简单的介绍,这一节主要来介绍一下如何在smarty中开始我们程序设计.下载Smarty文件 ...
- Redis(转)
传统MySQL+ Memcached架构遇到的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量 ...
- boost::function 介绍
本片文章主要介绍boost::function的用法. boost::function 就是一个函数的包装器(function wrapper),用来定义函数对象. 1. 介绍 Boost.Func ...