HTML5基本属性标签

最新推荐文章于 2021-06-04 11:26:27 发布

借汝之光，得以光明

最新推荐文章于 2021-06-04 11:26:27 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端开发文章标签： datalist标签 accesskey属性 autofocus属性 autocomplete属性

本文链接：https://blog.youkuaiyun.com/weixin_44588495/article/details/94748454

Web前端开发专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了HTML5中鲜为人知但极具实用价值的特性，包括a标签的锚点功能、图片区域链接划分、accesskey快捷键设置、contentEditable编辑属性、spellcheck拼写检查、readonly只读属性、optgroup选项分组、fieldset与legend布局、form属性动态提交、autofocus自动聚焦、list与datalist下拉菜单等。这些特性不仅丰富了网页的表现形式，还极大地提升了用户体验。

1、关于a标签

这里的a标签有一个很重要的功能就是锚点，这里的锚点不光可以在同一个页面中跳转，也可以跳转到对应页面的id位置。

<a href="../html/test.html#demo"></a>

a标签中download属性，可控制让用户下载目标链接所指向的资源。这里的href指定的是资源的位置路径，download属性里面是

<a href="images/logo.jpg" download="java.jpg" type="image/jpeg">下载图片</a>

2、将img图片分成几个块（链接）

在这里有一个usemap属性，可以是map的name值，这时不用加#，如果用的是id就需要加#，其中area标签表示的每一个区域，这里的shape属性有三个值：rect、circle、poly，对应着矩形、圆形、和多边形。coords属性：

	<img src="images/logo.jpg" width="300" height="120" border="0" alt="" usemap="#test">
	<map name="test" id="test">
		<area shape="rect" coords="10,10,100,100" href="" alt="">
		<area shape="circle" coords="27,55,10" href="" alt="">
		<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="" alt="">
	</map>

3、accesskey属性

该属性可以设置快捷键，下面就是alt+设置的值，这里火狐不支持。

<input type="text" accesskey="p">

4、contentEditable属性

可编辑属性：适用于table、div等。

<div style="width: 100px;height: 100px;border: 1px solid black" contenteditable="true"></div>

在这里插入图片描述

5、designMode属性

这个是一个全局属性，设置的contentEditable，可以这样理解

<body onclick="document.designMode='on'">
	
	<div style="width: 100px;height: 100px;border: 1px solid black"></div>
</body>

6、spellcheck属性

自动检查单词拼写是否错误

<textarea name="" id="" cols="30" rows="10" spellcheck="spellcheck"></textarea>

在这里插入图片描述

7、readonly属性

只读属性

<textarea name="" id="" cols="30" rows="10" readonly="">只读属性</textarea>

在这里插入图片描述

8、optgrounp标签

<form action="">
		<select name="" id="" multiple="multiple">
			<optgroup label="数字">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</optgroup>
			<optgroup label="字母">
				<option value="a">a</option>
				<option value="b">b</option>
				<option value="c">c</option>
			</optgroup>
		</select>
	</form>

在这里插入图片描述

9、fieldset和legend标签

  	<form action="">
		<fieldset name="basic">
			<legend>基本信息</legend>
			<input type="text">
			<input type="text">
		</fieldset>
	</form>

在这里插入图片描述

10、form属性

这里的form属性的值是对应form标签钟的id的值

	<form action="" id="add" method="get">
		<input type="submit">
	</form>
	<textarea name="" id="" cols="30" rows="10" form="add"></textarea>

11、formaction属性

该属性对于提交，可以制定不同的服务器url，例如注册和登陆，实际上对应着不同的url

	<form action="" id="add" method="get">
		<label for="username">用户名</label><input type="text" id="username" name="username"><br>
		<label for="password">密码</label><input type="text" id="password" name="password"><br>
		<input type="submit" formaction="register" value="注册">
		<input type="submit" formaction="login" value="登陆">
	</form>

在这里插入图片描述

12、 formxxx属性

formenctyoe：动态改变表单的编码。
formmethod：动态设置提交方法，get、post
formtarget：动态改变提交后的跳转方式。

13、autofocus属性

打开浏览器之后，自动的获取焦点。

	<form action="" id="add" method="get">
		<input type="text" autofocus="autofocus">
	</form>

在这里插入图片描述

14、list属性和datalist标签

这里实现了一个下拉菜单并且是可写可选择的。autocomplete属性表示是否自动补全。

	<form action="" id="add" method="get">
		请输入图书：<input type="text" name="name" list="books" autocomplete="off">
		<input type="submit" value="购买">
	</form>
	<datalist id="books">
		<option value="javase">javase</option>
		<option value="javaee">javaee</option>
		<option value="android">android</option>
	</datalist>

在这里插入图片描述