HTML5属性变化

最新推荐文章于 2022-03-15 23:22:59 发布

「已注销」

最新推荐文章于 2022-03-15 23:22:59 发布

阅读量345

点赞数

分类专栏：前端基础入门 html/html5 文章标签： html

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88915506

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html/html5

7 篇文章 1 订阅

订阅专栏

* input增加类型 *

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input标签属性变化</title>
</head>
<body>
<!-- email类型：较适用于手机端-->
<input type="email" name="email">

<!-- url类型：适用于iphone-->
<input type="url" name="url">

<!-- tel类型：适用于手机端-->
<input type="tel" name="tel">

<!-- number类型：可以用于PC端（0123456789-+e.），以及手机端-->
<input type="number" name="number">

</body>
</html>

<!-- Date Pickers类型：适用于pc端、以及手机端-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date</title>
</head>
<body>
date:<input type="date" name="date"><br>
month:<input type="month" name="month"><br>
week:<input type="week" name="week"><br>  <!--iphone5以后已经不支持week类型了-->
time:<input type="time" name="time"><br>
datetime:<input type="datetime" name="datetime"><br> <!--iphone6以后都不兼容了，直接唤起键盘；并且pc端也已经不兼容了-->
datetime-local:<input type="datetime-local" name="datetime-local"><br>
</body>
</html>

手机端： pc端：

除了手机端，还增加了pc端比较厉害的类型：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range</title>
</head>
<body>
<!-- range类型：如果没有设置最大最小值，则默认的是0~100 -->
<input type="range" name="range" min="1" max="10">

<!-- search类型 -->
<input type="search" name="search">

<!-- color类型：默认为黑色，当鼠标点击时会出现颜色选择框 -->
<input type="color" name="color">
</body>
</html>

range： color：

具体可参考《html5新增input类型总结》

* 表单属性扩展 *

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autocomplete</title>
</head>
<body>
<form action="lesson2_1 autocomplete.html" autocomplete="on"> 
	<!--默认autocomplete值为on：网页关闭再打开双击输入框，会出现之前填写历史记录-->
	<input type="text" name="text">
	<input type="email" name="email" autocomplete="off">
<!--autocomplete属性不仅仅可以用到form标签中，还可以用到input标签中：off则不会出现搜索历史-->
	<input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autofocus</title>
</head>
<body>

<!-- autofocus属性：当页面重新刷新时，鼠标会自动定位到该输入框 -->
<form action="lesson2_1 autocomplete.html" autocomplete="on">
	<input type="text" name="text">
	<input type="email" name="email" autocomplete="off" autofocus="autofocus">
	<input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multiple</title>
</head>
<body>
<form action="lesson2_1 autocomplete.html" autocomplete="on">
	<!-- 表示上传文件时可以同时选中多个文件 -->
	<input type="file" name="file" multiple="multiple">
	<!-- 可以填写多个邮箱，通过,号分隔，以数组形式传给后台-->
	<input type="email" name="email" autocomplete="off" autofocus="autofocus" multiple="multiple">
	<!-- 不添加multiple属性，也可以输入多个邮箱，但是传给后台时是以一个字符串格式，后台需要代码区分，号 -->
	<input type="email" name="email" autocomplete="off" autofocus="autofocus">
	<input type="submit">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeholder</title>
</head>
<body>
<form action="lesson2_1 autocomplete.html" autocomplete="on">
	<input type="text" name="text" placeholder="您好，请在这里输入您的用户名！">
	<input type="email" name="email" autocomplete="off">
	<input type="submit">
</form>
<!-- onFocus事件：当光标落在文本框中时发生的事件；
     onBlur事件：当光标失去焦点时发生的事件；-->
</body>
</html>

// 减少前端开发对表单校验的压力

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>required</title>
</head>
<body>
<form action="a.html">
	<input type="text" name="text" required="required">
	<input type="email" name="email" required="required">
	<input type="submit">
</form>
</body>
</html>

具体可参考《表单新增属性教程》

* 链接属性 *（不仅仅是超链接）

// 根据不同的分辨率引用不同的size

// target默认“_self”

【link标签中各个属性的意义：】

A：rel规定当前文档与被链接文档之间的关系；

B：sizes属性规定被链接资源的尺寸；

C：href规定被链接文档的位置；

D：media规定被链接文档将被显示在什么设备上

* 其他属性 *

// async，加载js文件的同时也会加载页面body其余内容

【注意：defer属性只能兼容IE浏览器，chrome浏览器暂不兼容；

async属性，兼容所有主流浏览器；

】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script</title>
<!-- 引入：JS（格式上是link和style标签的结合） -->
<script type="text/javascript">
document.write("www.imooc.com"); /*意思：在页面中写入www.imooc.com文字*/
document.write("<br>");
</script>
<!-- 引入一个外部JS文件 -->
<script type="text/javascript" src="lesson4_1.js"></script>
<script defer="defer" type="text/javascript" src="lesson4_1_defer.js"></script>
<script async="async" type="text/javascript" src="lesson4_1_async.js"></script>
</head>
<body>
<p>这里是Body里面的内容，我们看一下什么时候加载……</p>
</body>
</html>

// ol有序列表的开始数字为start，倒叙展示的仅仅是符号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ol</title>
</head>
<body>
<ol start="2" reversed="reversed">
	<li>Html</li>
	<li>Html5</li>
	<li>Css</li>
	<li>Css3</li>
	<li>JavaScript</li>
</ol>
</body>
</html>