HTML5的学习总结

悠悠 2022-01-29 11:09 277阅读 0赞

# HTML5的学习总结 #

## 一、什么是HTML5？ ##

1.支持Html5的浏览器包括[Firefox][]（火狐浏览器），[IE9][]及其更高版本，[Chrome][]（谷歌浏览器），[Safari][]，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或[Chromium][]（Chrome的工程版或称实验版）所推出的[360浏览器][360]、[搜狗浏览器][Link 1]、[QQ浏览器][QQ]、[猎豹浏览器][Link 2]等国产浏览器同样具备支持HTML5的能力

2.HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式

### （1） 回顾一下以前学过的知识： ###

#### 1.1 块级元素： ####

块级元素独占一行，从页面布局和外观显示来看，块级元素所处行的后面无法再放任何的内容，（**也就是说一行里面最多只可能存在一个“块级元素”**）  
一个网页的布局就类似于一篇报纸的排版。首先将网页分成大的模块。然后在模块里面再分成小的模块。所以块级元素多用于布局。

#### 1.2 行级元素： ####

只占一小块空间，在后面可以继续放内容行级元素也称为行内标签，内联标签（**也就是说一行里面可以存在多个行级元素**），使用块级元素将网页结构搭建好了后，使用行级元素来排版。

#### 1.3 行级元素和块级元素的区别： ####

**块级元素独占一行，比较霸道。而行级元素却可以多个元素共享一行。**  
块级元素支持高和宽，行级不支持高和宽。行级元素的高和宽由内容来决定。  
块级元素常常作为容器，可以容纳其他的行级元素和块级元素。行级元素一般用来组织内容。即容纳文字、图片、超链接。

#### 1.4 块级元素有哪些？ ####

div、p、h、hr、table 、ul、ol、form…

#### 1.5 行级元素有哪些？ ####

a、span、label、input、textarea、br、img…

### 怎么将行级元素转换为块级元素呢？ ###

\*\*解答：\*\*下面的main标签是行级元素（**也许你会有疑问：既然main是行级元素，那为什么下面的代码里面还写width，height属性呢？那是因为里面加了display:block,已经变成块级元素了，所以可以加宽高属性**），只需要在里面加上display: block;即可转换成块级元素

main{
               /*将行级元素转换为块级元素*/
                display: block;
                width: 100%;
                height: 500px;
                background-color: #ccc;
            }

### （2）如何处理兼容性问题呢？ ###

html5shiv.min.js:在默认情况下，IE8及以下的IE版本不支持HTML5,引入这个文件就可以做到兼容

## 二、HTML新增input标签的 type类型 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="">
        用户名：<input type="text" name="userName"> <br>
        密码：<input type="password" name="userPwd"> <br>
        
        邮箱：<input type="email"> <br>
        
        电话：<input type="tel"> <br>
        
        网址：<input type="url"> <br>
        
        数量：<input type="number" value="60" max="100" min="0"> <br>
        
        请输入商品名称：<input type="search"> <br>
        
        范围：<input type="range" max="100" min="0" value="50"> <br>
        颜色：<input type="color"> <br>
        
        
        时间：<input type="time"> <br>
        
        日期：<input type="date"> <br>
        
        日期时间：<input type="datetime"><br>
        
        日期时间：<input type="datetime-local"> <br>
        月份：<input type="month"> <br>
        星期：<input type="week">
        
        <input type="submit">
    </form>
    </body>
    </html>

看运行效果截图如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]

## 三、HTML5表单新增的其他属性 ##

属性：placeholder，autofocus，autocomplete，required，pattern，multiple，form，具体应用如下

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="" id="myForm">
        
        
        
        用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
        
        
        
        手机号：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
        
        文件：<input type="file" name="photo" multiple> <br>
        
        邮箱：<input type="email" name="email" multiple><br>   
        
        <input type="submit"> <br>
    </form>
    
    地址：<input type="text" name="address" form="myForm">
    </body>
    </html>

对上面autocomplete属性的解释：就相当于有如下图所示的提示功能  
![在这里插入图片描述][2020010917264978.png]

整个网页的显示如下：  
![在这里插入图片描述][20200109172727987.png]

## 四、表单新增元素dataList的讲解 ##

<datalist标签不仅可以选择，还应该可以输入，类似于下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="">
        
        
        
        专业：<input type="text" list="subjects"> <br>
        
        <datalist id="subjects">
            
            
            <option value="英语" label="不会"/>
            <option value="前端与移动开发" label="前景非常好"></option>
            <option value="java" label="使用人数多"></option>
            <option value="javascript" label="做特效"></option>
            <option value="c" label="不知道"></option>
        </datalist>
        
        网址：<input type="url" list="urls">
        <datalist id="urls">
            
            <option value="http://www.baidu.com" label="百度"></option>
            <option value="http://www.sohu.com"></option>
            <option value="http://www.163.com"></option>
        </datalist>
    </form>
    </body>
    </html>

运行结果截图如下：  
![在这里插入图片描述][20200109172843108.png]

## 五、HTML5新增的表单事件 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form action="">     
        用户名：<input type="text" name="userName" id="userName"><br>   //type="tel"，以pattern                                                                //上文第四点已 经讲过              电话：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
        <input type="submit">
    </form>
    <script> /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/ document.getElementById("userName").oninput=function(){ console.log("oninput:"+this.value); } /*onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次*/ document.getElementById("userName").onkeyup=function(){ console.log("onkeyup:"+this.value); } /*oninvalid:当验证不通过时触发*/ document.getElementById("userPhone").oninvalid=function(){ /*设置默认的提示信息*/ this.setCustomValidity("请输入合法的11位手机号"); } </script>
    </body>
    </html>

运行效果截图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]

**总结：** oninput是，只要内容变了就会触发。 而onkeyup只当键盘弹起才触发

## 六、HTML5的进度条 ##

<progress标签的作用就是进度条 ，不过感觉meter度量器好像和progress进度条没什么区别。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <progress max="100" value="50"></progress>
    
        
    
    <meter max="100" min="0" high="80" low="40" value="30"></meter>
    <meter max="100" min="0" high="80" low="40" value="60"></meter>
    <meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
    </body>
    </html>

运行效果截图：  
![在这里插入图片描述][20200109173005932.png]

[Firefox]: http://baike.baidu.com/view/3279.htm
[IE9]: http://baike.baidu.com/view/2298486.htm
[Chrome]: http://baike.baidu.com/view/1835504.htm
[Safari]: http://baike.baidu.com/view/110484.htm
[Chromium]: http://baike.baidu.com/view/404073.htm
[360]: http://baike.baidu.com/view/1949679.htm
[Link 1]: http://baike.baidu.com/view/2083809.htm
[QQ]: http://baike.baidu.com/view/2610930.htm
[Link 2]: http://baike.baidu.com/view/8467425.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20220129/a1efa37b7b8c49f9b373a0de10380b4e.png
[2020010917264978.png]: /images/20220129/df9fa5f8c1e24222a61c9c9c9ffb9594.png
[20200109172727987.png]: /images/20220129/ba34eb8b3f6c46af8e3524215cd25379.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20220129/f7da779b98b4423c96956dffeed33dbb.png
[20200109172843108.png]: /images/20220129/32c384ec30c0473b866bc248957a1836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20220129/a1ae3db969a545ada0c3f4e79a672db0.png
[20200109173005932.png]: /images/20220129/443df7f192084e0ba8d2943e012e7f2e.png