第五周学习总结-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="操作栏显/隐"/>&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: 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?

原文地址:https://www.cnblogs.com/dream0-0/p/9460852.html

时间: 2024-10-09 15:08:47

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

201405644 嵌入式程序设计第五周学习总结

嵌入式课程设计第五周学习总结 标准 I/O 编程 标准 I/O 提供流缓冲的目的是尽可能减少使用 read()和 write()等系统调用的数量.标准 I/O 提供了 3 种类型 的缓冲存储.全缓冲.行缓冲.不带缓冲. 打开文件 打开文件有三个标准函数,分别为:fopen().fdopen()和 freopen().其中 fopen()可以指定打开文件的路径和模式,fdopen()可以指定打开的文件描述符和模式,而 freopen() 除可指定打开的文件.模式外,还可指定特定的 I/O 流. f

2014025689 《嵌入式系统程序设计》第五周学习总结

<嵌入式系统程序设计>第五周学习总结 一.6.5(标准I/O编程)主要涉及的函数及知识点 标准的I/O的三种缓冲存储:全缓冲.行缓冲.不带缓冲. 1. 全缓存:当填满标准I/O缓存后才进行实际的I/O操作 2. 行缓存:当输入或输出中遇到行结束符时,标准I/O库执行I/O操作 3. 不带缓存:标准I/O库不对字符进行缓冲 打开文件的三个标准函数:  fopen().fdopen()和 freopen(). -fopen()可以指定打开文件的路径和模式 函数原型:FILE * fopen(con

20145307《信息安全系统设计基础》第五周学习总结PT2

20145307<信息安全系统设计基础>第五周学习总结PT2: 教材学习内容总结 之前有第一部分学习总结: http://www.cnblogs.com/Jclemo/p/5962219.html 以下为第二部分 执行汇编命令:gcc –s xxx.c –o xxx.s反汇编命令:objdump –d xxx 64位处理器得到32代码的命令:gcc –m32 –s xxx.c Ltme: 1.三种操作数: 立即数:常数值.表示为$c标准表示的整数. 寄存器:表示某个寄存器的内容. 存储器:根据

信息安全设计基础第五周学习总结

信息安全系统设计基础第五周学习总结 [学习时间:10小时] [学习内容:第三章:程序的机器表示] 一.教材内容 1.X86 寻址方式的变化: 1 DOS时代的平坦模式,不区分用户空间和内核空间,很不安全: 2 8086的分段模式: 3 IA32的带保护模式的平坦模式 2.机器编程的两种抽象: 1)指令集体系结构(Instruction set architecture,ISA)——定义指令格式以及每条指令执行之后对状态的影响.大多数ISA将程序行为描述成按顺序执行的: 2)虚拟地址 3.一些处理

20145317《信息安全系统设计基础》第五周学习总结2

20145317<信息安全系统设计基础>第五周学习总结2 教材学习内容总结 X86 寻址方式经历三代: DOS时代的平坦模式,不区分用户空间和内核空间,很不安全. 8060的分段模式 IA32的带保护模式的平坦模式 程序编程 1.代码含义 gcc -01 -o p p1.c -01 表示使用第一级优化.优化的级别与编译时间和最终产生代码的形式都有关系,一般认为第二级优化-02 是较好的选择. -o 表示将p1.c编译后的可执行文件命名为p 2.机器级编程的两种抽象 指令集结构ISA 是机器级程

第五周学习进度总结

第五周学习进度总结   学习时间 新增代码行 博客量(篇) 知识总结 第五周 15h 125 2 新使用了结对编程方式,效率更高.又近一步加深了对C#语言的学习.

20145301第五周学习总结

20145301第五周学习总结 教材学习内容总结 第八章 8.1 语法与继承构架 什么是异常?在 Java 编程语言中,异常类定义程序中可能遇到的轻微的错误条件.可以写代码来处理异常并继续程序执行,而不是让程序中断. Java 提供了一种异常处理模型,它使您能检查异常并进行相应的处理.它实现的是异常处理的抓抛模型.使用此模型,您只需要注意有必要加以处理的异常情况.Java 提供的这种异常处理模型,代替了用返回值或参数机制从方法返回异常码的手段. 在 Java 中,所有的异常都有一个共同的祖先 T

Java第五周学习总结

20145307 <Java程序设计>第五周学习总结 教材学习内容总结 C8 使用try.catch打包System.in.read(),声明throws java.io.IOException. ·如果父类异常对象在子类异常前被捕捉,则catch子类异常对象的区块将永远不会被执行. ·catch括号中列出的异常不得有继承关系,否则会发生编译错误. ·在catch区块进行完部分错误处理之后,可以使用throw将异常再抛出. ·操作对象异常无法使用try.catch处理时,可由方法的客户端一句当

201671010117 2016-2017-2 《Java程序设计》Java第五周学习心得

Java第五周学习心得       通过这一周的学习,对继承有了一定的了解,但是不是很熟悉,老师上课按以前的方法讲解了第五节的懂得了更深入了一点,还需要多多敲代码来掌握的更深,因为方法突然的改变,还是有一点的不习惯,所以现在还在适应中,感觉部分知识掌握的不是很深入,还需要加强.