前端HTML总结
目录
前言
正文
head
SEO
body
网页的主要组成元素：
body标签中常见的标签：
自闭合标签：
无语义标签：
特殊符号：
列表
子项：
样式修改：
定义列表：
语义化：
表格
基本结构：
完整结构：
其他table标签：
特殊标签：
img标签
常见三属性：
图片格式：
位图：
矢量图：
总结：
超链接：
常见属性：
分类：
锚点链接：
表单
form标签：
常用属性：
特别注意：
input：
单行文本框和密码文本框：
单选框：
复选框：
按钮：
下拉列表：
select标签：
option标签：
写在最后
前言
精读一本书，胜过看N个视频。
这次看的书是：
吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》
17年出版的。
正文
HTML主要学的就是标签了，所以本文着重描述标签。
标签的语义化也是一个很重要的点，它对于提升SEO有着比较小的影响，但是星星之火可以燎原。学好语义化也能让自己的代码写起来更加流畅，知道该用什么标签。
下面，正式开始。
head
head标签的内部标签：
title、meta、link、style、script、base（基本不用）
其中最常用的是title、link、style。
title标签用于创建网页标签的标题，link用于加载外部CSS样式文件，script用于加载外部的JS文件/直接书写JS代码。
meta标签可以进行自动跳转，可以参考这篇文章：meta标签的妙用。
网页乱码解决：<meta charset="utf-8">
对了，还有一个重要的标签就是有关于语言的：
<html lang="en">
en是英文的意思，cn是中文。
此外，中文还分为简中、繁中，感兴趣的可以去了解。
SEO
这节是课本没有多说的，但是是不是提起的，所以单独拿出来写了。
网页的SEO，主要的目的就是提高网站的曝光度。
SEO跟网页的语义化有关系。
比如说，一个网页只能有一个h1标签，meta标签的内容要完善，能用语义化的标签是最好的。
body
网页的主要组成元素：
文字、图片、超链接、音频和视频
判断页面上是否是动态页面的标准——有无后端的交互过程。
body标签中常见的标签：
标题标签：h1-h6，没有h7以上的。
段落标签：p。
文本标签：strong、em、sup、sub、i（字体图标）。
自闭合标签：
水平线：hr。
换行：br。
此外，还有meta、input、img、link。
无语义标签：
div、span
可以把这两个看成两个容器，前者大，后者小。
但是不能用这两个标签去替代有语义的标签，防止SEO排名的降低。
特殊符号：
空格： 
版权符号：©
注册商标：®
商标：™
度数：°
列表
列表分为有序列表和无序列表：
有序列表ol：ordered list。
无序列表ul：unordered list。
子项：
列表项li：list。
ol/ul标签只能配合li标签使用，li标签也是同样如此。
ol/ul标签内部不允许出现非li标签，独立文本也不允许。
样式修改：
标签属性type。
现在一般使用CSS样式修改：line-style。
定义列表：
definition list，简称dl，就是定义列表
definition term，简称dt，就是定义名词
definition description：简称dd，就是定义描述，解析定义名词
语义化：
为什么不能用div标签替代？
为了提高SEO，所以要尽量使用有语义的标签！
表格
表格布局：在web2.0标准被抛弃了。
基本结构：
表格：table标签。
行：tr标签，table row的简写。
单元格：td标签，table data cell的简写。
完整结构：
表格标题：caption，一个表格只能有一个。
表头单元格：th标签，table head cell的简写，内容默认加粗，注意与td标签区分。
一个完整的表格结构应该包括table、caption、tr、th、td标签。
但是这会混乱：th该用在哪里，td又该用在哪里？
其他table标签：
thead：表头区域，一般只包含tr、th标签（行头）。
tbody：表身区域，一般包含tr、th（列头）、td标签。
tfoot：表尾区域，一般只包含tr、td标签。
意义：标签语义化，更易读。
特殊标签：
合并行：rowspan，跨行合并单元格。
合并列：colspan，跨列合并单元格。
img标签
图片标签，常用的三个属性：
src、alt、title。
常见三属性：
src：图片所在路径，路径可以是本地（最好是相对路径），可以是云端，必不可少的属性。
alt、title：制定图片的提示内容。alt是在图片无法正确显示的时候才会出现，是写给浏览器看的，也就是提升SEO；title是鼠标悬停的效果，给用户看的。
图片格式：
图片可以分为位图、矢量图。
位图：
也称为像素图，放大缩小都会失真，色彩丰富。
常见格式：jpg（包括jpeg）、png（支持透明）、git（可以做动画，支持透明）。
矢量图：
也称向量图，一般指的是几何图像，放大缩小不会失真，但是色彩不够丰富。
常见格式：ai、cdf、fh、swf（最常见，也就是flash动画）。
特别注意：字体图片用的也是矢量图。
总结：
位图适合展示色彩丰富的图片，矢量图不适合。
位图的单位是px，而矢量图是数学向量。
位图受分辨率影响，矢量图不会。
网页中的图片绝大多数都是位图，除了字体图标。
超链接：
特别标签：a标签可以包裹除了本身以外的所有标签。
常见属性：
href：路径，可以是相对路径，也可以是绝对路径；可以是本地，也可以是云端。
target：打开方式，默认是_self，原窗口打开；常用的是_blank，新窗口打开。
分类：
文本超链接、图片超链接。
区别：一个是应用在文本，一个是应用在图片。
锚点链接：
含义：内部链接的一种
作用：用于跳转到本页面的指定地方
使用：href标签里面采用#+id的名字进行，跳转的地方采用div+id的方式进行区别。
表单
表单元素：输入框、按钮、下拉菜单。
表单标签：
form、input、textarea、select、option。
form标签：
创建一个表单，就像是创建一个表格，必须要把所有有关标签填入到form标签内部。
常用属性：
name：表单名称，利于后面JS获取元素getElementsByName
method：提交方式
action：提交地址
target：打开方式，跟a标签是一致的
特别注意：
name属性是最重要的，用于区别其他form元素。
method的属性值只有get和post，最常用的是post（安全性更高）。
input：
含义：根据type属性值的不同，有不同的功能，可以是输入框，可以是密码框，可以是单选框......
type属性值：
text单行文本框
password单行密码框
radio单选框
checkbox多选框
button或submit或reset：普通按钮、提交按钮、重置按钮
file文件上传
单行文本框和密码文本框：
type="text"和type="password"
重要属性：
value：默认值，输入框的默认显示内容。
size：文本框的长度，一般不用，也可以使用width来修改。
maxlength：内容的最大长度，一般用于限制输入。
区别：
单行文本框可见内容。
密码文本框不可见内容，但不代表密码框比单行文本框安全，只是能保证本地输入的安全而已。
单选框：
type="radio"
重要属性：
name：组名，跟哪个radio是同一组的，比如说性别。
value：取值，一般用于传递数据，JS常用设置。
checked：是否选中，可以设置默认选择。
特别注意：
如果没有name组名，那就失去了单选的意义。
语义化：
用label标签包裹input框。
label里面的for属性值要跟单选框的id一致，才能进行绑定。
复选框：
type="checkbox"
重要属性（跟radio一致）：
name和value必须设置，也可以使用checked进行默认选中。
但是无语义化。
按钮：
type="button"
分为三种常用的按钮：
普通按钮：type="button"，一般都是配合JS使用的，功能为自定义。
提交按钮：type="submit"，用于表单提交。
重置按钮：type="reset"，用于清空表单输入。
特别注意：
三者在外观上没什么区别，只是功能上的区别。
普通按钮，和button标签哪个更常用？
开发的时候，都是使用input来替代button标签的。
下拉列表：
select标签配合option标签，跟无序列表差不多。
select标签：
multiple：可以选择多项，默认是单选选择。
size：显示的列表项个数。
注意：size="1/2/3"在Chrome浏览器中无效，因为Chrome最低是4个。
option标签：
selected：默认选中。
value：选项值。
value是配合JS和服务器数据进行的，一般是用来传递所选择的值。
写在最后
在本文中，并没有给出所有标签，只是写了常用的标签。
由于能力有限，部分描述也许不恰当，还望海涵并多多指教。
精读一本书，胜过看N个视频。
为什么推荐读书？
因为视频的知识很散，你没有一个清晰的脉络。
当然啦，也不是说视频不好，只是在看视频之后，为了巩固知识，还是要看看书本的。
只是书本的编写凝聚了作者的心血，在编排上会更加易懂、符合初学者学习。
总之，多看书是好事。
那么，我们下期再见。
相关文章：
前端HTML总结
目录 前言 正文 head SEO body 网页的主要组成元素： body标签中常见的标签： 自闭合标签： 无语义标签： 特殊符号： 列表 子项： 样式修改： 定义列表： 语义化࿱…...
【动态规划】647. 回文子串
力扣链接：. - 力扣（LeetCode） 动规大法开始吟唱： dp[i][j]含义：从i到j的子串是否为回文子串 递推公式：当s[i] s[j]时 1. j-i<1时, dp[i][j]为true 2. 否则，若dp[i1][j-1]为true&#x…...
python-约瑟夫环（赛氪OJ）
[题目描述] n 个人（ 0,1,2,3,4...n−1 ），围成一圈，从编号为 k 的人开始报数，报数报到 m 的人出队。 下次从出队的人之后开始重新报数，循环往复，当队伍中只剩最后一个人的时候，那个人…...
Less 教程：从入门到精通
Less 教程：从入门到精通 1. 引言 Less 是一种流行的动态样式表语言，它扩展了 CSS 的功能，使其更加强大和灵活。通过本教程，我们将深入探讨 Less 的基本概念、特性以及如何在项目中实际应用它。 2. Less 的基本概念 2.1 变量 …...
【VScode】如何在anaconda虚拟环境中打开vscode项目
文章目录 【必备知识】打开anaconda虚拟环境切换到项目工作目录激活anaconda虚拟路径让vscode从当前目录打开 【必备知识】 anaconda环境变量配置及配置python虚拟环境 https://blog.csdn.net/xzzteach/article/details/140621596 打开anaconda虚拟环境 切换到项目工作目录 …...
Flink任务提交流程和运行模式
任务提交流程 Flink 的提交流程随着部署模式、资源管理平台的不同，会有不同的变化。这里做进一步的抽象，形成一个大概高视角的任务执行流程图，如下： Flink按照集群和资源管理的划分运行模式有：Standalone、Flink On…...
【机器学习】 Sigmoid函数：机器学习中的关键激活函数
🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录 Sigmoid函数：机器学习中的关键激活函数1. 引言2. Sigmoid函数定义3.…...
Vue+Element Plus后台管理主界面搭建实现
续接Django REST Framework，使用Vite构建Vue3的前端项目 1. 后台管理系统主界面框架搭建 后台系统主界面搭建 新建后台管理文件目录 完成后台整体布局 // 1.主界面 index.vue<script setup lang"ts"></script><template><el-…...
JAVA—异常
认识异常，学会从报错信息中发现问题，解决问题。并学会构建自定义异常，提醒编程时注意 目录 1.认识异常 2.自定义异常 1.自定义运行时异常 2.自定义编译时异常 3.异常的处理 1.认识异常 异常就是代表程序出现的问题，用来查询B…...
常见八股面试题：Dubbo 和 Spring Cloud Gateway 有什么区别？
大家好，我是鸭鸭！ 此答案节选自鸭鸭最近弄的面试刷题神器面试鸭，更多大厂常问面试题，可以点击进行阅读哈！ 目前这个面试刷题神器刚出，有网页和小程序双端可以阅读！ 回归面试题！ …...
k8s分布式存储-ceph
文章目录 Cephdeploy-ceph部署1.系统环境初始化1.1 修改主机名，DNS解析1.2 时间同步1.3 配置apt基础源与ceph源1.4关闭selinux与防火墙1.5 **创建** ceph **集群部署用户** cephadmin1.6分发密钥 2. ceph部署2.1 **安装** ceph 部署工具2.2 **初始化** mon **节点**…...
Redis cluster集群部署
redis搭建集群模式、Cluster模式（6节点，3主3从集群模式，添加删除节点）_redis cluster节点带数据增减-CSDN博客...
Java泛型的理解
前言 泛型是Java中一个比较重要的特性，是于JDK5引入新特性，其主要目的是为了提供编译时的类型安全检测机制和简化代码。本文主要探讨一下泛型的使用。 假如说没有泛型 假如说没有泛型，可以举一个例子： ArrayList list new Ar…...
Linux 照片图像编辑器
前言 照片图像编辑器是一种软件程序，它允许用户对数字照片或图像进行各种编辑和修改。以下是一些常见的功能及其解释： 裁剪与旋转 ： 裁剪：移除图像的某些部分，以改善构图或符合特定尺寸要求。旋转：改变图像的方向，可以校正歪斜的照片或者为了艺术效果而旋转。调整亮度…...
【51单片机仿真】基于51单片机设计的智能六位密码锁（匿*输入/密码修改/警示/保存/恢复/初始密码）源码仿真设计文档演示视频——文末资料下载
基于51单片机设计的智能六位密码锁 演示视频 基于51单片机设计的智能六位密码锁 功能简介 - 能够从键盘中输入密码，并相应地在显示器上显示"*" - 能够判断密码是否正确，正确则开锁，错误则输出相应信息 - 能够实现密码的修改 -…...
【Vue3】组件通信之mitt
【Vue3】组件通信之mitt 背景简介开发环境开发步骤及源码总结 背景 随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日…...
状态压缩动态规划——状压dp
状压dp：意思是将状态进行压缩，从而更容易地写出状态转移方程 通常做法：将每个状态（一个集合）用二进制表示，每个位的1就代表着这个编号的元素存在，0就代表着这个编号的元素不存在，如…...
【算法】最短路径算法思路小结
一、基础：二叉树的遍历->图的遍历 提到搜索算法，就不得不说两个最基础的思想： BFS（Breadth First Search）广度优先搜索 DFS（Depth First Search）深度优先搜索 刚开始是在二叉树遍历中接触这…...
zabbix7.0TLS-05-快速入门-触发器
文章目录 1 概述2 查看主机的触发器3 添加触发器3.1 触发器配置项介绍3.2 扩展文档3.2.1 关于配置项中每个键值返回值的说明3.2.2 触发器函数文档 4 验证触发器5 问题5.1 查了问题总列表5.2 查看问题详情5.3 更新处理问题5.4 查看已经处理的问题 6 问题恢复 1 概述 监控项用于…...
vue关于双向数据绑定的骚操作
组件传值大家都知道 直接上代码 computed: {optionModel: {get() {return this.selectedWidget.options;},set(newValue) {this.selectedWidget.options newValue;}}} 我们将optionModel传递给子组件 子组件可以直接修改props 来实现双向数据绑定 但是正常来时我们是不能修…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...