HTML中五个实用功能(示例[案例])_网页缩放html-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_78977167/article/details/135511948

引言

本期博文将层层递进，项目由浅入深，从本期最基础的“网页缩放配置(技术基础)”到与家人共团圆的别致的“烟花秀(完整示例)”，希望这些示例(案例)可以帮助到您完善您的网站！同时也希望您看到最后的烟火时新的一年可以开开心心、快快乐乐哒(*^▽^*)

一、网页缩放配置(技术基础)

<meta 
name="viewport" 
content="width=device-width,
intial-scale=0,
maximum-scale=0,
user-scalable=yes,
shrink-to-fit=no"
>

说明
这是一个用于设置网页视口（viewport）的HTML <meta> 标签。视口是用户在网页上看到的可见区域，而这个标签的目的是为了确保网页在各种设备上能够以合适的方式显示。

让我们逐个解释这个<meta>标签中的属性：

width=device-width:

这个属性设置视口的宽度等于设备的宽度。这确保网页在移动设备上不会缩小到一个默认的宽度，而是会根据设备的实际宽度进行调整。

initial-scale=0:

这个属性设置初始的缩放级别为0。这可以被认为是一个“禁用缩放”的设置，确保用户最初加载页面时不会自动缩放。

maximum-scale=0:

这个属性设置最大的缩放级别为0。这同样是为了限制用户对页面的缩放能力，保持一个不可缩放的状态。

user-scalable=yes:

这个属性允许用户手动缩放页面。尽管前面两个属性限制了初始和最大缩放级别，但这个属性允许用户通过手势进行缩放。

shrink-to-fit=no:

这个属性通常用于禁止自动缩小适应。在一些移动浏览器中，当页面加载时，可能会自动缩小内容以适应屏幕，这个属性的设置可以禁止这种行为。

综合来说，这里<meta>标签的作用是为了确保网页在移动设备上以设备宽度为基准进行显示，同时限制了初始和最大的缩放级别，允许用户手动缩放，并禁止自动缩小适应。这有助于提供更一致和可控的移动端用户体验。

二、HTML全选与反选(含示例)

做表单的朋友们对全选与反选我相信已经非常熟悉了。如果你是第一次学做表单，那全选与反选编写是你做表单控件的第一选择，它基本为你提供了编写“注册”或“登录”的可供选项，让您的网站更具现代化；当然，如果真要论现代化的话你还是需要通过Div来进行操作改变样式，希望您对下面全选与反选的示例有一定的探索：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选与反选示例</title>
	</head>
	<body>
		<ul>最爱美食</ul>
		<input id="all" type="checkbox">全选
		<ul>
			<input type="checkbox" class="all_check">佛跳墙
			<input type="checkbox" class="all_check">手擀面
			<input type="checkbox" class="all_check">馄饨
			<input type="checkbox" class="all_check">饺子
			<input type="checkbox" class="all_check">酸菜包子
		</ul>
		
		<script>
			let all = document.getElementById("all")
			let input_arr = document.querySelectorAll("ul>input")
			
			all.onclick = function(){
				if(all.checked == true){
					for(input of input_arr){
						input.checked = true
					}
				}else{
					for(input of input_arr){
						input.checked = false
					}
				}
			}
		</script>
	</body>
</html>

三、

要在HTML中实现鼠标悬停时图片放大的效果，需要使用CSS和JavaScript来完成。

首先，创建一个HTML文件，包含一张图片和相应的CSS和JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大效果</title>
    <style>
        .image-container {
            position: relative;
            overflow: hidden;
            width: 200px; /* 设置图片容器的宽度 */
            height: 200px; /* 设置图片容器的高度 */
        }
        .image-container img {
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }
        .image-container:hover img {
            transform: scale(1.2); /* 图片放大1.2倍 */
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="图片">
    </div>
    <script>   // 如果要使用JavaScript动态加载图片，可以使用以下代码————const imageContainer = document.querySelector('.image-container');————const image = document.createElement('img');————imag