前端html5+css3：超级实用的标签++（附源码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据列表</title>
	</head>
	<body>
		<form action="" method="get">
			<label for="item">选择你想要的内容：</label>
			<input type="text" list="items" name="item" id="item"/>
			    <datalist id="items">
			    	<option value="会玩手机的猫"></option>
			    	<option value="最爱鱼的!猫"></option>
			    	<option value="来自星星的猫"></option>
			    	<option value="天猫国际会玩猫"></option>
			    	<option value="咪了个猫"></option>
			    </datalist>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

2.label标签-关联控件

2.1 作用：

label标签和特定表单控件关联之后，当⽤户点击标签中的⽂本时，浏览器就会⾃动将焦点转到和该标签相关联的控件上。
在html中，<label>标签通常和标签⼀起使⽤，标签为input元素定义标注（标记）。它不会向⽤户呈现任何特殊UI效果。它同样适用于select标签以及textarea标签。

2.2 label标签显式关联：

通过label标签的for属性与指定表单元素的id绑定来实现关联表单

<label for="name">姓名</label>
<input type="text" id="name">

<label for="age">年龄</label>
<input type="number" id="age">

<span>性别</span>
<input type="radio" id="boy" name="age" value="男">
<label for="boy">男生</label>

<input type="radio" id="girl" name="age" value="⼥">
<label for="girl">女生</label>

2.3 label标签隐式关联：

隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含⼀个表单元素，如果包含多个只对第⼀个有效

<label >点击获取input焦点
    <input type="text">
</label>
<label >点击获取textarea焦点
    <textarea></textarea>
</label>

css3部分

1.scroll-behavior元素-平滑滚动

效果图：

说明：使用css的scroll-behavior: smooth;就可以实现页面的滑动效果，

html {禁用textarea文本框调整大小
scroll-behavior: smooth;
}

2.禁用textarea文本框调整大小

说明：你可以使用resize属性来防止textarea元素调整大小（或将其限制为只能在水平或者垂直一个方向上调整）。

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

效果1-可调整大小的文本框：

效果2-只能水平调整的文本框：

效果3-只能垂直调整的文本框：

3.::first-letter-首字下沉

可以使用::first-letter伪元素对段落添加首字下沉效果。

::first-letter {
  font-size: 250%;
}

效果图：

4.drop-shadow()-投影

你可以在透明图像上使用drop-shadow()滤镜效果。与使用box-shadow属性相比，它提供的阴影效果更好。

img {
filter: drop-shadow(0 0 3px #000);
}

效果图：

5.居中div元素

有时，可能很难在页面上居中div元素，但是使用此技巧的话，将易如反掌。只需要几行CSS代码，就可以在页面上居中放置div元素。

body {
display: grid;
place-items: center;
}

6.caret-color属性-改变输入框光标的颜色

你可以使用caret-color属性更改输入框光标的颜色

input {
caret-color: red;
}

7.`user-select`属性-禁止网页内容选中高亮

和技巧2有点像，你可以使用user-select属性来防止元素被用户选中高亮显示。

.no-highlight {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

8.限制输入框值的范围

比较小众的:in-range和:out-of-range伪类，可以帮助验证input元素的当前值在min和max属性指定的范围内。

input:in-range {
background: rgba(0, 255, 0, .25);
}

input:out-of-range {
background: rgba(255, 0, 0, .25);
}

效果：

9.图像叠加

object-fit属性指定元素的内容应该如何去适应指定容器的高度与宽度。你可以使用object-fit属性创建图像交叠。这在网站上创建稍微复杂一点的图像时，会很有用。

.image-overlay img:only-of-type:nth-child(1) {
object-fit: cover;
opacity: .4;
}

效果：

10.transition属性-动画过渡

你知道有一种无需使用关键帧就可以对元素进行动画处理的方法吗？答案就是transition属性，此属性允许你定义元素两种状态之间的过渡。主要用于悬停动画。

a {
  color: #0d6efd;
  text-decoration: none;
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}

a:hover {
  color: #0a58ca;
}

效果：