HTML5+CSS3笔记(一)

最新推荐文章于 2023-02-02 19:07:15 发布

低调的小犬_Hansen

最新推荐文章于 2023-02-02 19:07:15 发布

阅读量231

点赞数 1

分类专栏： HTML5 文章标签： HTML5+CSS3

本文链接：https://blog.csdn.net/qq_38588845/article/details/99774854

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、H4与H5的区别

H5推出的理由及目标
1.web浏览器之间的兼容性很低
2.文档结构不够明确
3.web应用程序功能受到了限制

H5语法的改变
内容类型文件扩展名html 内容类型不变依然为text-html
doctype声明直接<!doctype html>
指定字符编码 <meta charset="UTF-8"/>
可以省略标记的元素
具有boolean值的属性
省略引号

二、新增非主体元素

header 元素	是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的 logo 图片
footer 元素	可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。
hgroup元素	标签用于对网页或区段（section）的标题进行组合，如果文章只有一个主标题，是不需要hgroup元素的。如果文章有主标题和子标题，就需要用hgroup元素。
address 元素	用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

三、新增主体元素

article 元素	代表文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
section元素	对于网站或应用程序中页面上的内容进行分块。
nav元素	可以作为页面导航连接组，其中的导航元素链接到其他页面或当前页面的其他部分。
aside元素	表示当前或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。
time、pubdate	用来无歧义、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它，这个元素就是 time 元素。pubdate则代表哪个是主体

四、表单新增元素与属性

form 属性（在 HTML4 中，表单内的从属元素必须书写在表单内部，而在 HTML5 中，可以把他们书写在页面上任何地方，然后为该元素指定一个 form 属性，属性值为该表单的 id，这样就可以声明该元素从属于指定表单了）

<form id="testform">
    <input type="text">
</form>
<textarea form="textform"></textarea>
//注意form的值与form元素的id的值要一样

formaction属性（在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。本来是写在form的action中的）

    <form id="testform">
        <input type="submit" name="s1" value="v1" formaction="test01.php">test01.php
        <input type="submit" name="s2" value="v2" formaction="test02.php">test02.php
        <input type="submit" name="s3" value="v3" formaction="test03.php">test03.php
    </form>

formmethod属性（在 HTML5 中，可以使用 formmethod 属性来对每一个表单元素分别指定不同的提交方法。）

 <form id='test'>
        <input type="submit" name="s1" value="v1" formmethod="POST" formaction="test01.php">test01.phpPOST
        <input type="submit" name="s2" value="v2" formmethod="GET" formaction="test02.php">test02.phpGET
 </form>

formenctype 属性（表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。）

formtarget属性（在HTML4中，表单元素具有1个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。
在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。值：_blank、_self、_parent、_top、framename）

autofocus属性（为文本框、选择框或者按钮控件加上autofocus属性，当画面打开时，该空间自动获得光标焦点。）

required 属性（ required 属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。）

control属性（在HTML5中，可以再标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。）

    <script>
    function setVal(){
        var label = document.getElementById("label");
        var textbox = label.control;
        textbox.value = '12345678';
    }
    </script>
    <form>
        <label id="label">
            <input id="txt_zip" maxlength="6">
            <small>请输入8位数字</small>
        </label>
        <input type="button"  value="设置默认值" onclick="setVal()">
    </form>

placeholder属性（placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。）

list属性（在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。）

    <form>
        <input type="text" name="greeting" autocomplete='on' list="greeting">
        <datalist id="greeting" style="display:none">
            <option value="H1">H1</option>
            <option value="H2">H2</option>
            <option value="H3" autocomplete='off'>H3</option>
        </datalist>
    </form>

autocomplete 属性（规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。）

pattern属性（对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。）

<form action="test.php" method="get">
国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
title="三个字母的国家代码" />
<input type="submit" />
</form>

indeterminate属性（按钮有三种状态）

    <input type="checkbox" indeterminateid="AD">属性测试
    <script>
    AD.indeterminate = true;
    </script>

五、HTML5 改良的 input 元素的种类

新增的input元素种类中的url类型、email类型、date类型、time类型、datetime类型和datetime-local类型、month类型、week类型、number类型、range类型、search类型、tel类型和color类型、output元素的追加，包含表单的验证

<form action="">
    url:<input type="url" name="url" value="https://mp.csdn.net/postlist/list/enable"><br>
    email:<input type="email" name="email" value="312@qq.com"><br>
    date:<input type="date" name="data" value="2011-1-1"><br>
    time:<input type="time" name="time" value="10:00"><br>
    datetime:<input type="datetime" name="datetime" value=""><br>
    datetimelocal:<input type="datetime-local" name="datetimelocal"><br>
    month:<input type="month" name="month"><br>
    week:<input type="week" name="week"><br>
    number:<input type="number" name="number" value="15" step="3" min="10" max="80"><br>
    range:<input type="range" name="range" value="10" min="0" max="100" step="5" id="range"><br>
    output:<output id="output">10</output><br>
    search:<input type="search" name="search"><br>
    tel:<input type="tel" name="tel"><br>
    color:<input type="color" name="color" id="color"><span id="color_value">#000000</span><br>
    <input type="submit" value="提交">
</form>
<script>
// range与output
range.onchange = function(){
    output.innerHTML = this.value;
}

// color
var oColor = document.getElementById('color');
oColor.onchange = function(){
    oColor.textContent = this.value;
    document.body.style.backgroundColor = oColor.textContent;
    color_value.innerHTML = oColor.textContent;
}
</script>

六、HTML5 增强的页面元素

HTML5增强页面元素，包含figure、figcaption、details、summary和mark元素、progress和meter元素、ol、dl、cite和small元素。其中主要对ol进行详细讲解包含新增的start和reversed属性（ol li不写代码了）。

<!-- <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。 -->
<figure>
    <img src="phone.png" alt="小图标">
    <img src="qq.png" alt="小图标">
    <figcaption>小图标</figcaption>
    用作文档中插图的图像，带有一个标题 
</figure>
=========================================
<!-- details与summary的使用 -->
<details id="detail" open>
    <!-- open是其一个参数，保持打开状态 -->
    <summary>水果</summary>
    <p>苹果</p>
    <p>香蕉</p>
    <p>草莓</p>
</details>
=========================================
<!-- mark标记的使用 -->
<p><mark>我</mark>最<mark>喜欢</mark>的水果是像弯弯月儿般的<mark>香蕉</mark></p>
=========================================
<!-- progress 的使用-->
<section>
    <p>完成的百分比<progress id="p" max="100" value=""></progress><span id="ospan">0</span>%</p>
    <input type="button" value="战斗" id="progress">
</section>
<script>
progress.onclick = function(){
    var i = 0;
    var otime = setInterval(function(){
        i++;
        p.value = i;
        ospan.innerHTML = i;
        if(i>=100)
            clearInterval(otime);
        console.log(i);
    },50);
   
}
</script>
==================================================
<!-- meter的使用 -->
<br><meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>

七、拖拽

draggable ：true

拖拽元素(被拖拽的元素)事件 :

ondragstart : 拖拽的一瞬间触发

ondrag : 拖拽前、拖拽结束之间，连续触发

ondragend : 拖拽结束触发

目标元素(拖拽元素被拖到的地方)事件 :

ondragenter : 进入目标元素触发

ondragover : 进入目标、离开目标之间，连续触发

ondragleave : 离开目标元素触发

ondrop :在目标元素上释放鼠标触发

默认状态下，一个元素不能放另一元素的上面，需要在ondragover事件里面阻止默认事件

上代码主要看代码注释：

    <style>
    #start{
        width:180px;
        height:200px;
        background: #498;
        float:left;
    }
    #end{
        width:180px;
        height:200px;
        background: #ccc;
        float:right;
    }
    </style>

    <!-- 原始元素 -->
    <!-- <div id='start' draggable="true"></div> -->
    <img src="tim0g.jpg" id="start" alt="" draggable="true" width="180" height="200">
    <!-- 目标元素 -->
    <div id="end"></div>

    <script>
    var oStart = document.getElementById('start');
    var oEnd = document.getElementById('end');
    oStart.ondragstart = function(e){
    // 拖拽的一瞬间触发 
        var e = e || window.event;
        e.dataTransfer.setData("imgId","start")
        //设置数据,其中imgId是自命名，start为图片的id
    }
    // oStart.ondrag = function(e){
    // 拖拽前、拖拽结束之间，连续触发      
    // }
    
    // oStart.ondragend = function(e){
    // 拖拽结束触发
    // }

    // oEnd.ondragenter = function(e){
    // 进入目标元素触发
    // }
    oEnd.ondragover = function(e){
    // 进入目标、离开目标之间，连续触发
        var e = e || window.event;
        e.preventDefault();//阻止浏览器默认事件
        // console.log(e);       
    }
    oEnd.ondrop = function(e){
    // 在目标元素上释放鼠标触发

        var e = e || window.event;
        e.preventDefault();//阻止浏览器默认事件
        
        var img = document.getElementById(e.dataTransfer.getData("imgId"));
        e.target.appendChild(img);//可以拖放多个到目标
    }
    </script>

案例：将本地图片拖拽上传（看代码注释）

<div id="target" style="width:500px;height:500px;background:#ccc;"></div>
<div id="info"></div>

   <script>
    window.onload = function(){
        var imcontainer = document.getElementById('target');

        imcontainer.ondragover = function(e){
        // 进入目标、离开目标之间，连续触发
            var e = e || window.event;
            e.preventDefault();//默认浏览器阻止事件
        }
        imcontainer.ondrop = function(e){
        // 在目标元素上释放鼠标触发
            var e = e || window.event;
            e.preventDefault();
            // showObj(e.dataTransfer.files);
            var f = e.dataTransfer.files[0];//获取文件第0个元素
            // console.log(f);
            var fileRead = new FileReader();
            //因为FileReader是个对象，所以要创建对象实例
            fileRead.onload = function(e){
                // showObj(e.target);//创建完成后target才可以使用
                imcontainer.innerHTML = "<img src=\"" + fileRead.result + "\">";
                // result为base64加密过的图片
            }
            fileRead.readAsDataURL(f);
            //readAsDataURL方法可以将读取到的文件编码成Data URL
        }
    }

    // 用于查看对象有哪些属性
    function showObj(obj){
        var s = "";
        for(var k in obj){
            s += k + ":" + obj[k] + "<br>";
        }
        info.innerHTML = s;
    }
    </script>

八、localStorage与sessionStorage

localStorage存在本地，浏览器关闭依然存在。

而sessionStorage浏览器关闭，sessionStorage消失。

下面分别是代码：

localStorage的：

    <textarea  name=""id="ta" cols="30" rows="10">dasd</textarea>
    <input type="button" id="btn" value="提交">

    <script>
    window.onload = function(){
        var ta = document.getElementById('ta');
        if(localStorage.text){
            ta.value = localStorage.text;
            //第一次是空的，当第二次输入时候判断为true
        }
        btn.onclick = function(){
            // console.log(localStorage.text);
            localStorage.text = ta.value;//localStorage存在本地，浏览器关闭依然存在
        }
    }
    </script>

sessionStorage的：

    <span id="count">0</span>
    <button id="btn">+</button>

    <script>
    var num = 0;
    if(sessionStorage.num){
        num = sessionStorage.num;
    }else{
        num = 0;
    }
    btn.onclick = function(){
        num++;
        sessionStorage.num = num;//浏览器关闭，sessionStorage消失
        count.innerHTML = num;
    }
    </script>

低调的小犬_Hansen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML5+CSS3笔记(一)

一、H4与H5的区别H5推出的理由及目标 1.web浏览器之间的兼容性很低 2.文档结构不够明确 3.web应用程序功能受到了限制 H5语法的改变内容类型文件扩展名html 内容类型不变依然为text-html doctype声明直接<!doctype html> 指定字符编码 <meta charset="U...
复制链接

扫一扫