HTML5新增元素

图形元素

定义图形，比如图表和其他图像。该标签基于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="操作栏显/隐"/>&nbsp;

<input type="button" onclick="clickB()" value="增改栏显/隐"/>&nbsp;

<input type="button" onclick="clickC()" value="删查栏显/隐"/>&nbsp;

<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="显示所有数据"/>

&nbsp;&nbsp;&nbsp;&nbsp;

<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.代 ...

随机推荐

RabbitMQ简单应用の公平分发（fair dipatch）
公平分发(fair dipatch)和轮询分发其实基本一致,只是每次分发的机制变了,由原来的平均分配到现在每次只处理一条消息 1.MQ连接工厂类Connection package com.mmr.r ...
EasyGui的一个小例子
EasyGui的安装:首先下载easyGui安装包,地址链接:https://pan.baidu.com/s/1D8f_eXWn7l8xhcTuEsqZmA 密码:e5z5 安装步骤: 1.进入eas ...
Python换行符问题：\r\n还是\n？
今天写一个Python脚本去读取一个txt文件时,发现一个很有趣的现象: 如果这个文件是用atom编辑器写的,发现换行符是'\r'.这样一来去逐行读取数据就失效了,因为用open函数去打开该文件re ...
Go语言中的map
map是一个集合,可以使用类似处理数组和切片的方式迭代map中的元素.但map是无序的集合.无序的原因是map的实现使用了散列表. map的创建并初始化主要是两种方式: 1.内置的make函数 2.使 ...
SharePoint 2013 SqlException (0x80131904):找不到Windows NT 用户或组xxxx\administrator
过程描述: 在SharePoint 2013里配置创建搜索服务应用程序时报错: 配置 Search Service 应用程序期间遇到错误. System.Data.SqlClient.SqlExcep ...
spring3.1 profile 配置不同的环境
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素
纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DO ...
使用vue-cli初始化vue项目
在项目中使用vue我使用vue-cli脚手架搭建项目 1.先安装nodejs 2.使用npm install -g vue-cli (建议在使用这步前先安装nrm来切换npm的源利器,使得下载资源更快 ...
C/C++ 获取文件大小
在C语言中测试文件的大小,主要使用二个标准函数. 1.fseek 函数原型:int fseek ( FILE * stream, long int offset, int origin ); 参数说明 ...
用于主题检测的临时日志(c5ac07a5-5dab-45d9-8dc2-a3b27be6e507 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
这是一个未删除的临时日志.请手动删除它.(5051e554-d10d-4e48-b2ca-37c38a30153a - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

第五周学习总结-HTML5

HTML5新增元素

HTML5删除的元素

第五周学习总结-HTML5的更多相关文章

随机推荐

热门专题