HTML5属性变化汇总

「爱情、让人受尽委屈。」 2021-11-17 01:01 649阅读 0赞

> ##### 一、input新增type类型 #####

*  **新增了：email、url、tel、number（主要针对移动端）**

*  **新增了Date Picker Input类型**，就是关于日历的  
    **date**(选取日、月、年)、**month**(选取月、年)、**week**(选取周、年)、**time**(选取小时和分钟)、**datetime-local**(选取小时和分钟、日、月、年)、（主要针对移动端）

例如date类型的：

![在这里插入图片描述][20190729173951633.png]效果图如下：  
![在这里插入图片描述][20190729164231233.gif]

*  **针对PC端增加这几个重要input属性：range（表示范围）、search(搜索引擎，自动匹配，还会在后面出现×进行删除)、color（会提供颜色设置插件）**

![在这里插入图片描述][201907291742247.png]三个的效果图：

![在这里插入图片描述][20190729174428830.gif]

> ##### 二、表单新增属性 #####

*  **autocomplete属性，属性值有on和off**;它可以将提交过的数据记录下来，当你再次输入时会给提示，就不用全部重新输入了

![在这里插入图片描述][20190729195525245.png]效果图：

![在这里插入图片描述][20190729170537392.gif]

*  **autofocus属性**，属性值就是本身;当页面加载完后光标会自动聚焦到某个指定输入框

<form action="#" method="get">
         <input type="text">
         <input type="tel" autofocus="autofocus">//自动聚焦到这个输入框
         <input type="submit">
     </form>

![在这里插入图片描述][20190729195754236.png]效果图：  
![在这里插入图片描述][20190729171852422.gif]

*  **mutiple属性**，它规定输入域可以选择**多个值**。适用于的input标签类型是email和file

![在这里插入图片描述][20190729195846279.png]type为file时选择多个文件的效果图：  
![在这里插入图片描述][20190729195117548.gif]  
![在这里插入图片描述][20190729200026471.png]一次性提交多个邮件的效果图：  
![在这里插入图片描述][20190729195406471.gif]  
上面写的多个邮箱是以逗号分割开的，提交给后台后是以数组的形式呈现的。如果没有写multiple属性，还像上面一样一次性写多个邮箱，提交给后台的就是一个完整的字符串，后台还需要自己分辨

*  **placeholder属性： 提供一种提示，描述输入域所期待的值**

![在这里插入图片描述][20190729202646445.png]效果图：  
![在这里插入图片描述][20190729201927985.gif]

*  **required属性：** 规定在提交之前必须填写输入域

![在这里插入图片描述][20190729202706943.png]效果图：  
![在这里插入图片描述][20190729202610520.gif]  
如图所示可知不填内容提交时会提示必须填入内容

> ##### 三、链接标签属性 #####

*  **sizes**:在引入图片图标时会用到，用来设置图片大小

*  **target:规定在何处打开链接**  
    \_blank 在新窗口中打开。  
    \_self 默认。在相同的框架中打开。  
    \_parent 在父框架集中打开。  
    \_top 在整个窗口中打开。  
    framename 在指定的框架中打开。
 *  **超链接属性**  
    (1) media:表示对设备进行优化。media=""(handheld对手持设备进行支持/tv对电视设备进行支持)。这样就表示超链接链接到的地方是关于手持设备的还是电视设备，就可以对链接到的网页进行归类  
    (2)hreflang=“zh”(zh表示中文，设置链接到目标网页的语言)：这样可以提前告诉浏览器目标网页是什么语言，浏览器就能够知道以什么的编码来加载页面，可以提高性能  
    (3)rel=“external”(设置超链接的引用，作为该链接的一个说明  
    例如:< link rel=“stylesheet” href=“url” type=“text/css”>rel说明链接到的文档是样式类型

> ##### 四、ol标签属性 #####

给无序列表新增了 **start(起始值)、reverse(倒叙排列)** 属性  
用法如下：

<ol start="5" reversed>
            <li>javascript</li>
            <li>html</li>
            <li>css</li>
        </ol>

![在这里插入图片描述][20190802145148745.png]

> ##### 五、html和css属性 #####

1、html新增属性：  
**manifest=“cache.manifest”：定义页面离线应用文件**  
比如说一个页面是由下面三个文件组成的，在联网的情况下，我们可以打开html,但是断网了我们可能就打不开了，但是我们可以把下面三个文件写在index.manifest文件中，当在有网的情况下浏览器会自动把这几个文件下载到本地，这样断网也可以浏览  
![在这里插入图片描述][20190802151008616.png]  
2、css新增属性  
**scoped：内嵌css**，有了该属性就不一定要把style标签写在head标签里面，body的任何地方也可以写  
![在这里插入图片描述][20190802150626490.png]

[20190729173951633.png]: /images/20211116/f969eb534f8a4cfc9784db29287c1ea9.png
[20190729164231233.gif]: /images/20211116/5f846c1cfcc34a3fa947f4e2026d6b10.png
[201907291742247.png]: /images/20211116/e0f8520c9a4e4b6eaf844c56dc47f0a7.png
[20190729174428830.gif]: /images/20211116/88f126a7c2fe41979c4532251bfc7b1d.png
[20190729195525245.png]: /images/20211116/9331630fe9e14a89ba5f7c6a41f44ab6.png
[20190729170537392.gif]: /images/20211116/651be8f7347a4a5dbc3d82fd71f44e70.png
[20190729195754236.png]: /images/20211116/457802ae3ea74d11aade56678108967d.png
[20190729171852422.gif]: /images/20211116/775789f549584e21b59f3d3757d6c607.png
[20190729195846279.png]: /images/20211116/3252b551b383456babfe98ae5058745a.png
[20190729195117548.gif]: /images/20211116/b24e5a5910694ed6b026fe8c6c0b67b6.png
[20190729200026471.png]: /images/20211116/7c7e7168efa4481492806397f117cd93.png
[20190729195406471.gif]: /images/20211116/739c0a7893344d028459631e585536d9.png
[20190729202646445.png]: /images/20211116/3cc5480a447d4592af276b6963f526c3.png
[20190729201927985.gif]: /images/20211116/39d6f6c21f9444ca8d633fe5dee45747.png
[20190729202706943.png]: /images/20211116/32f8910297d147fca89fbdb1e66e82f2.png
[20190729202610520.gif]: /images/20211116/d4a559acdf63450eafa9973ad72dfcd1.png
[20190802145148745.png]: /images/20211116/97e92ff3b32b41a89f675ac18a58af6e.png
[20190802151008616.png]: /images/20211116/1bb0f0db166d4971a829c301bf96cc3e.png
[20190802150626490.png]: /images/20211116/a27cce7f3e7a4e43a245a5414bf6e067.png