HTML：解锁网站设计的终极指南

当今数字时代，网站是企业和个人的必需品。而HTML是创建网站的基础，它赋予了网站结构、内容和交互性。本文将深入探讨HTML，提供一个全面的指南，帮助你掌握网站设计的关键。

什么是HTML？

HTML（超文本标记语言）是一种标记语言，用于描述网页的结构和内容。它由一组元素和属性组成，这些元素和属性定义了文本、图像、链接和其他网页组件。

HTML元素

HTML元素是构成网页基本构建块的标签。每个元素都有一个开始标签和一个结束标签，它们之间包含元素的内容。最常见的元素包括：

<head>：定义网页的元数据
<body>：包含网页的可见内容
<p>：创建段落
<a>：创建链接
<img>：插入图像

HTML属性

属性用于修改元素的行为或外观。每个元素可以具有多个属性，这些属性由名称和值对组成。例如，<img>元素可以具有src属性来指定图像文件的路径。

HTML结构

HTML文档遵循一个特定的结构，包括：

**文档类型声明：**指定所使用的HTML版本
**<head>元素：**包含元数据，如页面标题、描述和关键词
**<body>元素：**包含网页的可见内容

HTML交互性

虽然HTML本质上是静态的，但它可以与其他技术结合使用，如JavaScript和CSS，以创建交互式网站。例如，JavaScript可以用于验证表单输入或创建动画效果。

学习HTML

学习HTML相对容易，有许多在线资源和教程可供使用。以下是一些提示：

从基础开始，学习基本元素和属性
练习创建简单的网页
探索高级概念，如表格、表单和多媒体
使用代码编辑器和浏览器调试工具

掌握HTML的好处

掌握HTML有很多好处，包括：

**创建自己的网站：**设计和开发你的个人或商业网站
**提高就业能力：**HTML是许多技术工作的重要技能
**理解网络：**深入了解网页如何工作
**激发创造力：**用你的想象力创建视觉上引人注目的网站

结论

HTML是网站设计的基石。通过理解其基本原理、元素和结构，你可以解锁创建引人入胜且功能丰富的网页的能力。无论你是想建立自己的网站还是提升你的职业生涯，掌握HTML都是必不可少的。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

世界微尘里

吾宁爱与憎

- 2024.03.18 -

在互联网的世界中，表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物，表单都扮演着至关重要的角色。在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签。

HTML提供了一系列的表单标签，使得开发者能够轻松地创建出功能丰富的表单。今天我们就来深入探讨这些标签，了解它们的作用以及如何使用它们来构建一个有效的用户界面。

一、表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成。

表单域

表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器

表单控件

这些是用户与表单交云的各种元素，如<input>（用于创建不同类型的输入字段）、<textarea>（用于多行文本输入）、<button>（用于提交表单或执行其他操作）、<select>和<option>（用于创建下拉列表）等。

提示信息

这些信息通常通过<label>标签提供，它为表单控件提供了描述性文本，有助于提高可访问性。<label>标签通常与<input>标签一起使用，并且可以通过for属性与<input>标签的id属性关联起来。

这三个部分共同构成了一个完整的HTML表单，使得用户可以输入数据，并通过点击提交按钮将这些数据发送到Web服务器进行处理。

二、表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。下面就来介绍HTML中常用的表单元素。

1、<form>标签：基础容器

作用：定义一个表单区域，用户可以在其中输入数据进行提交。

<form action="submit.php" method="post">

其中action属性指定了数据提交到的服务器端脚本地址，method属性定义了数据提交的方式（通常为GET或POST）。

2、<input>标签：数据输入

<input>标签是一个单标签，用于收集用户信息。允许用户输入文本、数字、密码等。

<input type="text" name="username" placeholder="请输入用户名">

type属性决定了输入类型，name属性定义了数据的键名，placeholder属性提供了输入框内的提示文本。

<input>标签的属性

下面举个例子来说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用户名：<input type="text" value="请输入用户名"><br>
密码：<input type="password"><br>
性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
</form>
</body>
</html>

3、<label>标签：关联说明

它与输入字段如文本框、单选按钮、复选框等关联起来，以改善网页的可用性和可访问性。<label>标签有两种常见的用法：

1）包裹方式：

在这种用法中，<label>标签直接包裹住关联的表单元素。例如：

<label>用户名：<input type="text" name="username"></label>

这样做的好处是用户点击标签文本时，关联的输入字段会自动获取焦点，从而提供更好的用户体验。

2）使用for属性关联：

在这种用法中，<label>标签通过for属性与目标表单元素建立关联，for属性的值应与目标元素的id属性相匹配。例如：

<label for="username">用户名：</label><input type="text" id="username" name="username">

这样做的优势是单击标签时，相关的表单元素会自动选中（获取焦点），从而提高可用性和可访问性。

4、<select>和<option>标签：下拉选择

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。

注意点：

<select>中至少包含一对<option>
在<option>中定义selected=“selected”时，当前项即为默认选中项

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>标签：多行文本输入

当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签。

允许用户输入多行文本。

<textarea name="message" rows="5" cols="30">默认文本</textarea>

rows和cols属性分别定义了文本区域的行数和列数。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反馈：
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>

6、<button>标签：按钮控件

创建一个可点击的按钮，通常用于提交或重置表单。它允许用户放置文本或其他内联元素（如<i>、<b>、<strong>、<br>、<img>等），这使得它比普通的<input type="button">具有更丰富的内容和更强的功能。

<button type="submit">提交</button>

type属性为submit时表示这是一个提交按钮。

7、<fieldset>和<legend>标签：分组和标题

通常用于在HTML表单中对相关元素进行分组，并提供一个标题来描述这个组的内容。

<fieldset>标签：该标签用于在表单中创建一组相关的表单控件。它可以将表单元素逻辑分组，并且通常在视觉上通过围绕这些元素绘制一个边框来区分不同的组。这种分组有助于提高表单的可读性和易用性。

<legend>标签：它总是与<fieldset>标签一起使用。<legend>标签定义了<fieldset>元素的标题，这个标题通常会出现在浏览器渲染的字段集的边框上方。<legend>标签使得用户更容易理解每个分组的目的和内容。

代码示例：

<form>
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音乐</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">运动</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">阅读</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在这个示例中，我们使用了两个<fieldset>元素来组织表单的不同部分。第一个<fieldset>包含姓名和邮箱字段，而第二个<fieldset>包含三个复选框，用于选择用户的兴趣爱好。每个<fieldset>都有一个<legend>元素，用于提供标题。这样，用户在填写表单时可以更清晰地了解每个部分的内容。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

8、<datalist>标签：预定义选项列表

<datalist>标签是HTML5中引入的一个新元素，它允许开发者为输入字段提供预定义的选项列表。当用户在输入字段中输入时，浏览器会显示一个下拉菜单，其中包含与用户输入匹配的预定义选项。

使用<datalist>标签可以提供更好的用户体验，因为它可以帮助用户选择正确的选项，而不必手动输入整个选项。此外，<datalist>还可以与<input>元素的list属性结合使用，以将预定义的选项列表与特定的输入字段关联起来。

下面是一个使用<datalist>标签的代码示例：

<form>
<label for="color">选择你喜欢的颜色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="红色">
<option value="蓝色">
<option value="绿色">
<option value="黄色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>标签：计算结果输出

<output>标签是HTML5中引入的一个新元素，它用于显示计算结果或输出。该标签通常与JavaScript代码结合使用，通过将计算结果赋值给<output>元素的value属性来显示结果。

<output>标签可以用于各种类型的计算和输出，例如数学运算、字符串处理、数组操作等。它可以与<input>元素一起使用，以实时更新计算结果。

下面是一个使用<output>标签的示例：

<form>
<label for="num1">数字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">数字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">结果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1=parseInt(document.getElementById("num1").value);
var num2=parseInt(document.getElementById("num2").value);
var result=num1 + num2;
document.getElementById("result").value=result;
}
</script>

10、<progress>标签：任务进度展示

<progress>标签是HTML5中用于表示任务完成进度的一个新元素。它通过value属性和max属性来表示进度，其中value表示当前完成的值，而max定义任务的总量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress=document.getElementById("fileDownload");
for (var i=0; i <=100; i++) {
setTimeout(function() {
progress.value=i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我们创建了一个名为"fileDownload"的<progress>元素，并设置了初始值为0，最大值为100。我们还添加了一个按钮，当用户点击该按钮时，会触发名为"startDownload"的JavaScript函数。这个函数模拟了一个文件下载过程，通过循环逐步增加<progress>元素的value属性值，从而显示下载进度。

11、<meter>标签：度量衡指示器

<meter>标签在HTML中用于表示度量衡指示器，它定义了一个已知范围内的标量测量值或分数值，通常用于显示磁盘使用情况、查询结果的相关性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>内存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在这个示例中，我们使用了两个<meter>标签来分别显示CPU和内存的使用率。value属性表示当前的测量值，min和max属性分别定义了测量范围的最小值和最大值。通过这些属性，<meter>标签能够清晰地显示出资源的使用情况。

需要注意的是，<meter>标签不应该用来表示进度条，对于进度条的表示，应该使用<progress>标签。

12、<details>和<summary>标签：详细信息展示

<details>和<summary>标签是HTML5中新增的两个元素，用于创建可折叠的详细信息区域。

<details>标签定义了一个可以展开或折叠的容器，其中包含一些额外的信息。它通常与<summary>标签一起使用，<summary>标签定义了<details>元素的标题，当用户点击该标题时，<details>元素的内容会展开或折叠。

示例：

<details>
<summary>点击查看详细信息</summary>
<p>这里是一些额外的信息，用户可以点击标题来展开或折叠这些信息。</p>
</details>

在这个示例中，我们使用了<details>标签来创建一个可折叠的容器，并在其中添加了一个<summary>标签作为标题。当用户点击这个标题时，容器的内容会展开或折叠。

总结：

HTML表单标签是构建动态网页的基石，它们使得用户能够与网站进行有效的交互。

通过合理地使用这些标签，开发者可以创建出既美观又功能强大的表单，从而提升用户体验和网站的可用性。所以说，掌握这些标签的使用，对于前端开发者来说是至关重要的。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

HP创建动态交互性站点的强有力的服务器端脚本语言，作为WEB领域的首选开发语言，因其部署简单、语法简单、开发效率高而广受开发者的喜爱。全世界80%的网站都使用PHP来开发。

但正因为这样的方便简单，很多PHP工程师都停留在使用的阶段，而没有真正的去了解过PHP的工作原理，这无疑是让大家不能深入理解到PHP的执行工作原理，结果就会导致无法对项目后期做出合理的性能优化方案

我们不要做到： “知其然而不知其所以然”

项目运行环境的组成部分

运行环境是一个程序语言必须条件，它是执行基础设施。

例如：打篮球需要篮球场、唱歌需要麦克风。如果没得这些条件将不能完成工作事项

PHP的执行环境可按照操作系统来划分，分别是Windows、linux、Mac系统等。虽然系统名称不一样，但是系统上面需要使用的软件都是一样的。分别是Apache、nginx、mysql、php

注：操作系统都是基于Unix内核开发出来的。Unix是基于C开发的

Apache和nginx都是web服务器，用于接收用户从电脑、手机软件和网页发送的http请求，可以理解为仓库的入口。
mysql是关系型的数据库，用于存储整个网站的数据内容，例如：用户信息、商品信息等。可以理解为存储商品的仓库。
PHP就是执行PHP代码的解释器，用于完成这个http请求需要所做的工作内容。可以理解为在仓库作业的工作人员。
php是nginx和mysql的中间枢纽中心，接入用户请求指令，找到对应的数据。在返回给发送方。

正是因为这系统和软件的关系，就分别产生了Windows简称的wamp、wnmp和linux下面的lanp、lnmp。就是把软件名称取其首字母组合生成。

如何接入PHP请求

用户请求接入需nginx来做，它是项目的操作入口。当我们把请求发生到nginx之后。

拿出nginx的参数配置：

server {
 listen 80; #监听80端口，接收http请求
 server_name www.example.com; #一般存放网址，表示配置的哪个项目
 root /home/wwwroot/public; # 存放代码的根目录地址或代码启动入口
 index index.php index.html; #网站默认首页
 
 #当请求网站的url进行location的前缀匹配且最长匹配字符串是该配置项时，按顺序检查文件是否存在，并返回第一个找到的文件
 location / {
 #try_files，按顺序检查文件是否存在，返回第一个找到的文件
 #$uri代表不带请求参数的当前地址
 #$query_string代表请求携带的参数
 try_files $uri $uri/ /index.php?$query_string; #按顺序检查$uri文件，$uri地址是否存在，如果存在，返回第一个找到的文件；如果都不存在，发起访问/index.php?$query_string的内部请求，该请求会重新匹配到下面的location请求
 }
 
 #当请求网站的php文件的时候，反向代理到php-fpm去处理
 location ~ \.php$ {
 include fastcgi_params; #引入fastcgi的配置文件
 fastcgi_pass 127.0.0.1:9000; #设置php fastcgi进程监听的IP地址和端口
 fastcgi_index index.php; #设置首页文件
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; #设置脚本文件请求的路径
 }
}

nginx有如下步骤：

nginx会根据过来的http请求头里的Host字段里的值，来判断使用哪个server{}。如果请求头里没有Host字段，或者Host字段里的值，和Nginx配置文件里的server{}里的{server_name}都不匹配，则使用第一个server{}，来处理这个请求
nginx 会首先测试 HTTP 请求的 IP 地址和端口号是否与 server.listen 中的 IP:Port 一致，然后再测试 "Host" 请求头字段的值是否与 server.server_name 中的 name 一致。如果都没有一致，则选择 default_server 进行处理。
nginx 首先查找最详细具体的 prefix location 记录，根据请求文件的来进行规则的匹配。

例如： toutiao.com /index.php 请求匹配了 / 并且匹配 "\.php$"，因此，根据 location 的配置，将该请求发送给 localhost:9000 的 FastCGI 服务器.

fastcgi_param 参数设置了 SCRIPT_FILENAME 值为 /home/wwwroot/public/index.php，由该 fastcgi server 执行该文件。其中：$document_root 为 root 指定的配置，$fastcgi_script_name 为请求 URI，如这里为 /index.php

最终根据规则的匹配把请求发生给PHP，然后再来解析PHP代码

PHP请求执行是谁来做？

nginx和php是2个软件，它们的之间的通信不在用普通的http协议来发送数据，因为nginx是web服务器，php是应用服务器，启动后由PHP-FPM来管理进程。nginx和php-fpm之间的传输协议采用fast-cgi，而不是默认的http协议。

fastcgi协议

fastcgi协议用来确定webserver（例如nginx），也就是内容分发服务器传递过来什么数据，什么样格式的数据

php-fpm进程管理器

php-fpm是对fastcgi协议的实现，是进程管理器，启动时包括master和worker进程俩部分，master进程监听端口，接收来自webserver请求，worker进程一般具有多个，每个worker进程都有一个cgi进程解释器，用来执行php代码

完整工作流程解析

用户发送请求会从解析域名开始，然后再发送服务器、执行响应结果。完成流程如下

用户输入域名访问网址 ---> 域名进行DNS解析 ---> 拿到对应IP服务器和端口 ---> nginx监听到对应端口的请求 ---> nginx对url进行location匹配 ---> 执行匹配location下的规则 ---> nginx转发请求给php的进程 ---> php-fpm的master进程监听到nginx请求 ---> master进程将请求分配给其中一个闲置的worker进程 ---> worker进程执行请求 ---> worker进程执行结果通过标准输出 stdout 返回给nginx ---> nginx通过HTTP 协议html返回给客户端 ---> 客户端在解析dom树，最终呈现页面

如有感悟，欢迎关注(*￣︶￣)

在线咨询

上一篇：「基础」Fiddler基本信息
下一篇：H5游戏开发指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商