HTML5新增标签及新增属性_html5新增了很多属性,( )的值则表示一个占位符,-CSDN博客

本文链接：https://blog.csdn.net/qq_40947819/article/details/104148649

一、 HTML5出现及与之前版本的异同点

HTML5是2008年出现的
！+ TAB生成html5的框架结构

<!DOCTYPE html> //文档类型写法

<meta charset="UTF-8"> //字符集写法

二、HTML5新增标签

具体的HTML5新增标签的学习可以在w3cschool中学习
常见的HTML5新增标签如下：

<header></header> //定义文档的页眉头部
<nav></nav> //定义导航部分
<footer></footer> //定义文档的尾部
<article></article> //定义文章
<section></section> //定义节、段、区域
<aside></aside> //定义侧边
<datalist></datalist> //定义选项列表，与input配合使用，实现下拉框的效果，并且可以实现在输入首个字的时候实现筛选的功能
<fieldset></fieldset> //可将表单内的相关元素分组，与legnend配合使用，legend用来定义标题

datalist的使用要配合input标签进行使用
<input type="text" value="请输入明星" list="star">  // input中使用list属性来实现与datalist的连接
	<datalist id="star">     // datalist中使用id属性来实现与input的连接
		<option value="范冰冰"></option>
		<option value="范爷"></option>
		<option value="刘若英"></option>
		<option value="周冬雨"></option>
		<option value="周笔畅"></option>
		<option value="关晓彤"></option>
		<option value="关关"></option>
	</datalist>

datalist实现效果

	<fieldset>
		<legend>用户登录页</legend>
		<form action="">
			用户名：<input type="text" name="name"><br><br>
			密   码：<input type="password" name="password"><br><br>
			邮   箱：<input type="email"><br><br>
			手   机：<input type="tel" name=""><br><br>
			数   字：<input type="number" name=""><br><br>
			网   址：<input type="url"><br><br>
			搜   索：<input type="search"><br><br>
			滑   块：<input type="range"><br><br>
			时   间：<input type="time"><br><br>
			日   期：<input type="date"><br><br>
			月     ：<input type="month" name=""><br><br>
			周     ：<input type="week"><br><br>
			颜   色：<input type="color">
			<input type="submit" value="提交">
		</form>
	</fieldset>

三、HTML5的input标签新增type类型

具体的实现效果如上图2
邮箱：type="email"
手机：type="tel"
数字：type="number" //之能填写数字，文本框后面有上下箭头，可以实现数字的加减
网址：type="url"
搜索：type="search"  //文本框最后有×，可以删除内容
滑块：type="range" //可以配合js实现音量控制等功能
时间：type="time" //时分
日期：type="date" //年月日
月：type="month" //年月
周：type="week" 
颜色：type="color"

四、HTML5的input标签新增属性值

placeholder  占位符，提示信息
autofocus  自动获取焦点
multiple   多文件上传
autocomplete 表单是否应用自动记录完成功能 值为on/off，默认为off  ，可以实现记录你之前提交过的用户名/身份证号等，输入首个字提示补全
使用时有两个必要条件：需要提交按钮、需要name值
required  不能为空
accesskey  设置accesskey="k"，可以实现alt+k快捷键自动获取焦点，k可以是其他字母

用户名：<input type="text" placeholder="请输入用户名"><br><br>       //placeholder的使用

	<input type="text" autofocus placeholder="自动获取焦点"><br><br>    //autofocus 的使用
	
	上传图片：<input type="file" multiple> <!-- 多文件上传 -->        //multiple的使用
		
	//autocomplete 的使用
	<form action="">
		<input type="text" autocomplete name="user">
		<input type="submit">
	</form>
	
	 //accesskey的使用
	<input type="text" accesskey="k">