HTML5 属性变化_external html-CSDN博客

本文链接：https://blog.csdn.net/weixin_41964994/article/details/81814141

Input

email url number range Date picker search color tel

表单属性

autocomplete autofocus multiple placeholder re

链接属性

<link>的size 属性 <base> 的 target 属性超链接<a>

其他属性

script ol html style

一：Input属性

<body>
date: <input type="date" name="date"><br>
month: <input type="month" name="month"><br>
week: <input type="week" name="week"><br>
time: <input type="time" name="time"><br>
datetime: <input type="datetime" name="datetime"><br>
datetime-local: <input type='datetime-local' name="datetime-local"><br>
</body>

Range Input 类型

<input type="range" name="range" min="1" max="10">

Search Input 类型

<input type="search" name="search">

Color Input 类型

<input type="color" name="color">

二：表单属性

1.autocomplete属性
form 或 input 域应该拥有自动完成功能[根据上次填写情况自动补全]

PS:autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签:
text, search, url, telephone, email, password, datepickers, range, color。

<form autocomplete="on“></form>

2.autofocus属性规定在页面加载时，域自动地获得焦点

PS:autofocus 属性适用于所有 <input> 标签的类型。 <input autofocus="autofocus" />

3.multiple属性规定输入域中可选择多个值

PS:multiple 属性适用于以下类型的 <input> 标签:email 和 file。 <input type="file" multiple="multiple" />

4.placeholder属性提供一种提示(hint)，描述输入域所期待的值

PS:placeholder 属性适用于以下类型的 <input> 标签: text, search, url, telephone, email, password

<input type="search" placeholder="Search Content" />

5.required属性规定必须在提交之前填写输入域(不能为空)

PS:required 属性适用于以下类型的 <input> 标签:
text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file

<input type="text" required="required" />

【减少前端开发人员写表单验证的压力】

    <!-- autocomplete='on/off' 自动补全
    autofocus='autofocus' 自动获取焦点元素
    multiple='multiple' 输入域中可以输入多个值
    placeholder="请输入名字"   输入框中的提示语
    required='required'  当输入框没有填写信息时会提示信息-->
    <form action="" autocomplete="on">
        <input type="text" name="text" multiple='multiple' placeholder="请输入名字" required='required'>
        <input type="email" name="email" autocomplete="off" autofocus='autofocus' multiple='multiple' required='required'>
        <input type="submit">
    </form>

三：链接属性

size
<link rel=“icon” href=“icon.gif” type=“image/gif” size=“16x16”>【size值也有 32*32 8*8】【type值有jpeg/ png】

【根据设备不同的分辨率引用不同的size】

target
<base href=“http://localhost/” target=“_blank”>

【<base>标签写在<head></head>标签内，不添加 target 属性默认_self】

超链接

a:media="handhelp" (表示对设备进行优化，handhelp对“手持“设备进行支持，tv对”电视“设备进行支持);

a:hreflang="zh" (设置语言，这里设置语言是中文)

a:ref=“external” (设置超链接的引用，这里超链接为外部链接)。

四：其他属性

Script

defer: 加载完脚本后并不执行，而是等整个页面加载完之后再执行 <script defer src=“URL”></script>

async: 加载完脚本后立刻执行，不用等整个页面都加载完，属于异步执行
<script async src=“URL”></script>

ol 有序列表

start —— 起始值

reversed —— 倒叙排列

<ol start=“10” reversed>

<li>Html</li>

<li>Css</li>

<li>JavaScript</li>

</ol>

html manifest=“cache.manifest”(定义页面离线应用文件) <html manifest=“cache.manifest”>

*style scoped:内嵌CSS