前言
HTML（HyperText Markup Language）也叫作超文本标记语言，这个超文本意思就是除了文本以外，它还能表示图像，链接，等等信息。
从某种角度来看，它甚至称不上代码，而且极其简单，基本都只是记忆性内容，所以很容易被还在学后端的新手（没错，就是我自己）所忽视。但是当真正开始写前端代码时，却又无从下手，写这篇博客是给笔者自己提个醒，不要对前端太敷衍。
HTML的基本结构
- HTML文档通常包括声明，用于指定文档的HTML版本。
- 文档的主体内容包含在标签内。
- 标签用于包含文档的元信息，如标题、字符集设置、链接到外部资源等。
- 标签包含网页的可见内容，如文本、图像、链接等。
这里以Vscode为编辑器来对html文件进行操作，顺便说一下HTML常用注释是<!-- 注释内容 -->而不是//
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<p>网页内容</p>
</body>
</html>
运行结果
这是最简单的结构示例。
<!DOCTYPE html>：这是HTML5的文档类型声明，告诉浏览器当前文档是使用HTML5编写的。HTML4的声明很复杂且已过时，不用去研究。
<head></head>：这对标签包含了文档的元信息，如标题、字符集设置、链接到外部资源等。
<title></title>：这里面是定义网页标题的，也就是图片中左栏的中的标题（多数浏览器这个是在上方的，但我比较喜欢竖栏）。
常见标签页标题长这样：
<body></body>：这里面是定义网页内容的,也就是运行结果图片中白色的部分，这也是呈现给用户内容最多的地方。
<html></html>：除了HTML版本声明外，其他的内容都要被它包裹进来。
头结构的常见的一些配置
<meta>标签：配置页面元数据，如网页的关键字、描述、编码方式等。例如：
<!-- UTF-8编码模式-->
<meta charset="UTF-8">
<!--通过设置关键词，可以让搜索引擎更好地识别和理解网页内容，提高网页在搜索
结果中的排名。在上面的例子中，此网页的关键词为HTML、web和development。-->
<meta name="keywords" content="HTML, web, development">
<meta name="description" content="This is a sample webpage.">
<!--这个<meta>标签告诉IE浏览器使用最新的渲染引擎来渲染页面。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--这个<meta>标签设置了用于响应式设计的视口元信息，使网页的宽度与设备宽度匹配，并启用初始化缩放。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link>标签：引用外部资源，如CSS文件、JavaScript文件、图标等。
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
第一个标签，
rel属性为icon，表示设置网页的图标，type属性为image/png，表示设置图标的类型为PNG格式，href属性为favicon.png，表示图标的URL。
第二个标签，
rel属性为preconnect，表示预连接到指定的URL，href属性为https://fonts.gstatic.com，表示要预连接到Google Fonts服务，以加速加载外部字体。
第三个标签，
rel属性为stylesheet，表示引入CSS样式表，href属性为Google Fonts服务的URL，其中family参数表示要使用的字体系列，后面的数字表示字体的粗细程度，display属性为swap，表示浏览器优先加载此字体，以防止Flash of Unstyled Content (FOUC)现象
<style>标签：定义页面内部的CSS样式。
<script>标签：定义页面内部的JavaScript代码或引用外部JavaScript文件。
常用标签
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>用于定义标题，按重要性递减。
<p>定义段落。
<a>用于创建超链接。
<img>：插入图像。
<ul>, <ol>, <li>：用于创建无序和有序列表。
<div>：用于划分文档的不同部分，常用于布局。
<span>：用于对文本的一部分进行样式化或操作。
<table>, <tr>, <td>, <th>：用于创建表格。
<form>、<input>、<button>：用于创建表单和输入元素。
网页内容里的标题标签
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
结果：
超链接
超链接（Hyperlink）是指在网页或其他电子文档中，以可点击连接的方式，将一个文档中的某个内容与另一个文档或文件中的相关内容建立起一种关联方式。可以通过鼠标单击或触摸屏幕来跳转到相关的文档或文件。
自动新建标签页的超链接示例：
href属性指定了超链接地址为https://www.jd.com/
_blank表示在新窗口或新标签页中打开链接。
<!DOCTYPE html>
<html>
<head>
<title>超链接互相跳转示例</title>
</head>
<body>
<!-- 超链接：跳转到京东超链接 -->
<a href="https://www.jd.com/" target="_blank">跳转到京东超链接</a>
</body>
</html>
点击前：
点击超链接后的结果：
覆盖的这里就不啰嗦了，删掉target属性即可。
图像
<img>标签用来插入图片，它没有闭合标签。src属性用来指定图片的URL，即文件的路径和名称。
alt属性则用来提供图片的描述，这对于视觉障碍用户或者图片不能加载时的代替文本非常重要。
title当鼠标悬停在这个图片上时，就会显示提示文本
<!DOCTYPE html>
<html>
<head>
<title>插入图像示例</title>
</head>
<body>
<!-- 图像：图像提示信息为这是极光极光 ，宽度为500，高度会自动按比例调节-->
<!--这里URL为本地文件的相对路径-->
<img alt="极光" src="./极光.jpg" title="这是极光" width="500" >
</body>
</html>
结果（鼠标悬停结果要改截图设置才能看到，这里就不展示了）
表格
表格由
<table>标签定义，每个表格会有若干行（由<tr>标签定义一行中的内容），每行有若干个单元格（有<th>标签定义单元格中的内容），单元格内的数据不仅仅是文字或数字，也可以是视频，图片等
<!DOCTYPE html>
<html>
<head>
<title>表格示例</title>
</head>
<body>
<table>
<!-- 表头-->
<caption>学生信息表</caption>
<!-- 表体-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>1班</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>2班</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>3班</td>
</tr>
</tbody>
</table>
</body>
</html>
结果：我们发现这样的表格根本不像表格，因为我们很难看出单元格的具体边界
我们尝试为它加上边界:把<table>改成<table border="1">
在代码中，border属性设置表格边框。注意，这种方式不允许单独设置单元格边框或内边距，所以如果需要更细粒度的控制，建议使用CSS来设置样式。
但这里边框不是实线，我们再改一下：<table border="2" frame="border" rules="all">
结果：
其中，
border属性用于设置表格边框的宽度，
frame属性用于设置表格外边框的显示方式，可以取值为void（不显示外边框）、above（上）或border（四周）；
rules属性用于设置单元格边框的显示方式，可以取值为none（不显示）、cols（仅显示列边框）、rows（仅显示行边框）或all（显示全部边框）。
上述代码中，border="2"表示表格边框宽度为2px，frame="border"表示显示四周的外边框，rules="all"表示显示所有单元格边框。
表单
HTML的表单是一种交互式元素，允许用户在网页中输入数据并将其发送到服务器进行处理。HTML表单通常包含输入字段、文本区、复选框、单选按钮、下拉选择框等元素。
<form action="" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>
<label for="message">留言：</label>
<textarea id="message" name="message"></textarea><br>
<input type="checkbox" id="agree" name="agree" value="1">
<label for="agree">我同意<a href="#">网站使用协议</a></label><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
结果：
<form>元素用于定义一个表单，action属性指定了提交表单时的URL地址，method属性指定了提交时使用的HTTP方法，可以是get或post。
这里笔者水平还暂时不会将表单信息提交到服务器中
action属性留空或不填，则表单将默认提交到当前页面的 URL。具体来说，可以将action属性设置为空字符串或省略该属性。在学习纯HTML不需要太关注这个。
<label>元素用于描述输入字段的标签，for属性与对应的input元素的id属性关联，使得用户点击标签时，对应的输入字段获得焦点。
通俗点，就是给表单信息取个名字好与你的操作（输入，单击）相对应，这样才能使表单信息相对应
<input>元素用于定义输入字段，type属性指定了输入字段的类型，id属性和name属性分别指定了输入字段的ID值和名称，value属性指定了提交表单时的值（仅适用于复选框和单选按钮）。
<select>元素用于定义下拉选择框，id属性和name属性分别指定了下拉选择框的ID值和名称
<option>元素用于定义下拉选项，value属性指定了提交表单时的值。
<textarea>元素用于定义文本区，id属性和name属性分别指定了文本区的ID值和名称。
<input>元素中的type="checkbox"表示定义复选框，value="1"表示如果这个复选框被选中，则提交表单时的值是1。
<button>元素用于定义按钮，type属性指定了按钮的类型。
<br>是换行
这里对HTML的type属性做一部分解释
HTML的type属性通常用于指定不同类型的输入元素或者操作的类型。这个属性告诉浏览器如何解释输入字段中的数据。以下是一些常见的type属性值以及它们的作用：
1.text（文本）：默认值，创建一个单行文本输入框，允许用户输入任何文本。
<input type="text" name="username">
2.password（密码）：创建一个密码输入框，用户输入的文本会被隐藏。
<input type="password" name="password">
3.radio（单选按钮）：创建一组单选按钮，用户只能选择其中一个选项。
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
4.checkbox（复选框）：创建一个复选框，用户可以选择或取消选择它。
<input type="checkbox" name="subscribe" value="yes">Subscribe to newsletter
5.submit（提交按钮）：创建一个提交按钮，用于提交表单数据到服务器。
<input type="submit" value="Submit">
6.reset（重置按钮）：创建一个重置按钮，用于将表单字段重置为默认值。
<input type="reset" value="Reset">
7.button（普通按钮）：创建一个普通按钮，可以附带JavaScript事件处理程序。
<input type="button" value="Click Me" onclick="myFunction()">
8.file（文件上传）：创建一个文件上传字段，允许用户选择并上传文件。
<input type="file" name="fileUpload">
9.email（电子邮件）：用于接受电子邮件地址的输入，浏览器通常会检查输入是否符合电子邮件地址的格式。
<input type="email" name="email">
10.number（数字）：用于接受数值输入，通常带有上下箭头控件。
<input type="number" name="quantity" min="1" max="10">
这些是常见的type属性值，但还有其他一些特殊用途的类型，如date（日期选择）、color（颜色选择）等，它们用于创建不同类型的输入字段，以满足不同的表单需求。选择适当的type属性可以确保输入字段的数据得到正确的验证和处理。
HTML的事件
HTML的事件机制是指当用户与页面上的某个元素交互时，这个元素可以触发相应的事件，从而执行相关的代码操作。
以下是一个HTML代码示例，演示了如何在按钮上绑定一个点击事件：
<button onclick="alert('Hello world!')">点击我</button>
点击后的结果：
常见触发事件
记得前面加on
click：点击鼠标左键触发。
mouseover：鼠标移动到元素上方触发。
mouseout：鼠标移开元素触发。
focus：元素获得焦点触发。
blur：元素失去焦点触发。
change：元素的值改变触发，例如输入框输入内容改变。
submit：提交表单触发。
load：页面加载完成触发。
resize：窗口大小改变触发。
scroll：滚动页面触发。
焦点的概念
在HTML中，页面上的元素有一个焦点，也就是当前的输入位置或聚焦位置。当用户访问页面并与页面交互时，焦点会不断地发生变化，从而让用户知道当前正在与哪个元素进行交互。
HTML中的焦点可以通过鼠标、键盘或其他输入设备来操纵。当用户使用键盘进行操作时，焦点通常通过Tab键来依次移动到下一个可聚焦的元素上。而当用户使用鼠标进行操作时，则可以直接点击目标元素来聚焦。
使用焦点机制可以让用户更方便地操作页面，减少输入误差和提高交互性。在开发Web应用程序时，需要注意各种输入设备和操作系统的兼容性，以确保焦点机制的正常工作。
想象一下当你在填写一个表单时，你的注意力和光标会集中在当前的输入字段上，这个输入字段就是有焦点的元素。 这意味着你可以直接开始输入内容，按下键盘上的键会在这个具有焦点的输入字段中显示。
焦点在HTML中是动态的，可以通过用户交互或JavaScript代码来改变。 例如，你可以通过点击鼠标在不同的输入字段之间切换焦点，或者通过JavaScript将焦点设置到特定的元素上。
焦点在页面上的标识通常是通过一种视觉效果来表示，比如文本输入字段可能会显示一个闪烁的垂直光标，以指示当前具有焦点。这使用户可以直观地知道他们正在与哪个元素进行交互。
总之，HTML中的焦点是指当前活动的元素，它决定了用户的输入和交互所影响的目标。
总结
个人感觉：前端三剑客就像是办公软件中的PPT，它的功能看似简单，但其实要做出一个好看的排版效果，没有长时间的沉淀是很难做到的。我还得继续学啊😭😭😭😭
扫一扫
4335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
