No.5 web基础

幻星语

已于 2024-08-17 08:45:09 修改

阅读量1k

点赞数 36

分类专栏：网络web安全文章标签：前端 web安全 html

于 2024-08-15 00:15:00 首次发布

本文链接：https://blog.csdn.net/2401_83340415/article/details/141195738

版权

网络web安全专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、基础认知

1、前端基础概念铺垫

1）用户访问域名过程

1. 用户在浏览器中输入域名
例如，用户输入了“www.example.com”。

2. 浏览器查询本地 DNS 缓存
浏览器会首先检查本地是否已经缓存了该域名对应的 IP 地址。
如果有，直接使用该 IP 地址与服务器建立连接。

3. 本地 DNS 服务器查询
如果本地缓存中没有，浏览器会向本地 DNS 服务器发送查询请求。
本地 DNS 服务器通常由用户的网络服务提供商（ISP）提供。

4. 递归查询
如果本地 DNS 服务器也没有该域名的记录，它会向根域名服务器发起查询。
根域名服务器会告知本地 DNS 服务器负责该顶级域名（如“.com”）的权威域名服务器的地址。

5. 迭代查询
本地 DNS 服务器接着向顶级域名服务器查询，顶级域名服务器再告知负责该二级域名（如“example.com”）的权威域名服务器的地址。

6. 权威域名服务器查询
本地 DNS 服务器最终向权威域名服务器查询，权威域名服务器返回该域名对应的 IP 地址。

7. 本地 DNS 服务器将 IP 地址返回给浏览器

8. 浏览器与目标服务器建立连接
使用获取到的 IP 地址，浏览器与服务器建立 TCP 连接，发送 HTTP 请求，获取网页内容。

2）认识网页

网页通常由文字、图片、超链接、视频和音频等基本组成部分构成。

文字：作为传递信息的核心元素，文字的准确性、清晰度和易读性至关重要。它是网页内容的主要阐述者。
图片：不仅能够增强视觉效果，还能以直观的方式辅助信息表达。例如，在产品展示页面中，高清的产品图片能让用户更清晰地了解产品的细节和特点。
超链接：通过实现页面之间的跳转，拓展了信息的范围，使用户能够在不同的页面之间流畅地切换和获取更多相关信息。
视频：提供了动态、丰富且极具吸引力的内容展示方式。比如在教育类网页中，教学视频可以更生动地传授知识。
音频：为网页增添了声音元素，丰富用户体验。例如在音乐网站上，音频文件能让用户沉浸在美妙的旋律中。

这些元素相互结合、相辅相成，共同构建了丰富多彩、功能多样的网页内容，以满足不同用户的需求和期望。

3）五大浏览器和渲染引擎

IE 浏览器：曾经作为 Windows 系统的默认浏览器，在互联网发展的早期占据了重要地位。然而，随着技术的不断进步和用户需求的变化，由于其在性能优化、安全性和新功能支持方面的滞后，市场份额逐渐减少。
火狐浏览器（Mozilla Firefox）：以其开源的特性、高度的可定制性以及强大的扩展功能而备受部分技术爱好者和注重个性化体验的用户青睐。用户可以根据自己的特定需求安装各种扩展插件，从而实现更加符合个人习惯和需求的浏览体验。
谷歌浏览器（Google Chrome）：凭借其出色的性能表现，简洁直观的用户界面，以及丰富多样的扩展库，迅速成为了目前最受欢迎和广泛使用的浏览器之一。在网页加载速度、JavaScript 执行效率以及对最新网页标准的支持等方面，谷歌浏览器都展现出了显著的优势。
Safari 浏览器：作为苹果公司专为其 Mac 和 iOS 设备开发的默认浏览器，与苹果的生态系统紧密融合。它在与苹果设备的兼容性、性能优化以及对苹果特定技术的支持方面表现出色，为用户提供了流畅和无缝的浏览体验。
欧朋浏览器（Opera）：具有独特的功能和特点，例如内置的广告拦截、快速拨号以及数据压缩等功能，在特定的用户群体中拥有一定的市场份额。

每个浏览器都有其独特的特点和优势，同时它们使用的渲染引擎也各不相同，这会影响网页在不同浏览器中的显示效果。例如，某些复杂的 CSS 样式在某些浏览器中可能无法完全呈现，或者页面的加载速度会有所差异。

因此，在网页开发过程中，开发者需要充分考虑不同浏览器和渲染引擎的兼容性，以确保网页能够在各种环境下都能呈现出预期的效果和功能。

4）Web标准

Web 标准由三个主要部分组成：

结构（HTML）：负责定义网页的框架和内容的组织，为网页提供了基本的骨架和结构。通过合理使用 HTML 标签，如 <div>、<p>、<h1> 等，可以清晰地划分网页的不同部分和层次。
样式（CSS）：用于控制网页元素的外观和布局，包括字体样式、颜色、背景、边距、边框等。通过精心设计的 CSS 样式表，可以使网页呈现出美观、一致和吸引人的视觉效果。
行为（JavaScript）：实现网页的动态交互效果和功能，如表单验证、页面滚动效果、动画、与服务器的数据交互等。通过 JavaScript 的强大功能，可以为网页添加丰富的交互性和用户体验。
- JavaScript：作为一种强大的脚本语言，广泛应用于网页开发。它不仅能够实现各种复杂的动态效果和用户交互，还可以与后端服务器进行数据通信，实时更新网页内容，提升用户体验。例如，在电商网站中，JavaScript 可以用于实现购物车的实时计算、商品推荐和用户行为跟踪等功能。

Web 标准的制定旨在确保网页在不同的浏览器和设备上能够保持一致的显示和功能，提高网页的可访问性、可用性和可维护性。遵循 Web 标准有助于减少开发成本、提高开发效率，并为用户提供更加稳定和优质的浏览体验。无论是在桌面端还是移动端，符合 Web 标准的网页都能够更好地适应各种屏幕尺寸和设备性能，确保信息的准确传递和功能的正常运行。

2、HTML初体验

1）HTML概述及发展史：

全称及含义：hypertext markup language，超文本标记语言，通过带有尖角号的标签对文本进行标记，实现网页结构的搭建。
超文本含义：不仅通过标记描述网页内容，还包含“超级链接”点，将网站、网页及各种元素链接起来构成 Web 页面。超文本的概念使得网页不再是孤立的信息块，而是相互关联、互联互通的信息网络。
创始人及相关组织：蒂姆·伯纳斯 - 李是创始人，他所创立的 w3c 组织（万维网联盟）在推动 Web 技术的发展和标准化方面发挥了关键作用。
目前版本：HTML5 作为当前广泛应用的版本，引入了众多新的特性和功能，如语义化标签、本地存储、多媒体支持等，极大地丰富了网页开发的可能性和用户体验。

HTML 从诞生至今，经历了不断的演进和发展。早期的 HTML 版本功能相对简单，主要用于构建基本的网页结构和展示静态内容。随着互联网技术的飞速发展和用户需求的不断增长，HTML 逐渐变得更加复杂和强大，不断适应新的应用场景和技术要求。

2）互联网原理：

基础概念及原理：上网的本质是请求数据，HTML 用于制作网页文件。用户通过客户端（如浏览器）发送 HTTP 请求到服务端，服务器接收到请求后，进行相应的处理并将数据回传，客户端接收到数据后，计算机加载网页并将其展示给用户。相关概念：
相关概念：
- 服务器：本质是一种高性能的计算机，专门用于存储网页文件和处理客户端的请求。为了确保服务的连续性和稳定性，服务器通常需要保证 24 小时不关机，并可通过客户端软件进行远程控制和管理。
- 浏览器：作为用户与互联网交互的主要工具，它负责发送 HTTP 请求、接收回传的数据，并将其渲染成可视化的网页。由于不同厂商和版本的浏览器在性能和特性上存在差异，第一次加载网页时可能会花费较长时间，但浏览器会将大部分文件存储到本地缓存中，以便第二次访问相同网站时能够更快地加载页面。
- HTTP 协议：无连接的协议，意味着每一次请求和响应都是独立的，需要重新建立连接。浏览器首先通过 DNS（域名系统）将域名解析成对应的 IP 地址，然后建立与服务器的连接，发送请求，服务器处理请求并返回数据，客户端与服务器断开连接后，由客户端解析 HTML 文档并渲染出图形结果。
- 纯文本和超文本的区别：纯文本只包含简单的文字内容，不能包含文字以外的元素，如图片、链接等，也不能传输文字样式，常见格式为.txt；超文本文件则含有特殊标记，作用类似于 word 中的排版标记，能够实现更丰富的内容展示和交互，常用格式有.doc、.ppt、.html、.htm 等。

3）HTML的感知

HTML（超文本标记语言）是用于描述网页结构和内容的标记语言。它通过一系列预定义的标签和属性，为网页开发者提供了一种结构化和语义化的方式来组织和呈现信息。

例如，<h1> 标签用于定义主标题，<p> 标签用于定义段落，<img> 标签用于插入图片等。这些标签不仅告诉浏览器如何显示网页的内容，还为搜索引擎和辅助技术（如屏幕阅读器）提供了关于网页结构和内容的重要线索，有助于提高网页的可访问性和可用性。

HTML 的语法相对简单易懂，但要构建结构清晰、语义明确且符合标准的网页，需要开发者对各种标签的用途和用法有深入的理解，并遵循最佳实践和规范。

4）HTML骨架结构

<!DOCTYPE html>
<html>
    <head>
        <title>网页的标题</title>
        <meta charset="UTF - 8">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        自己的代码
    </body>
</html>

DOCTYPE 声明：即 <!DOCTYPE html>，必须出现在第一行，让浏览器知道文件格式遵循 HTML5 标准，以确保正确的渲染模式。
html 标签：整个网页必须被 <html> 标签包裹，它里面包含 <head> 和 <body> 两部分。<head> 用于网页的配置和元数据，如标题、字符集、外部样式表和脚本的引用等；<body> 则是网页的正式内容区域，是浏览器的可视区域，也是开发者书写主要代码的地方。
字符集：在 <head> 标签中，通过 <meta charset="UTF - 8"> 配置字符集。不同的字符集在计算机内部的编码方式不同，UTF - 8 字库全面但每个汉字通常占 3 个字节，而 gb2312 和 gbk 主要包含汉族文字和少量符号，每个汉字占 2 个字节。选择合适的字符集对于确保网页在不同的设备和浏览器上正确显示各种文字至关重要。
title 标签：在浏览器选项卡区域显示的文字，它对于用户快速识别和区分不同的网页非常重要，应准确反映网页的核心内容。
外部资源引用：在 <head> 中，可以使用 <link> 标签引用外部样式表（如 .css 文件），以实现对网页样式的集中管理和复用；使用 <script> 标签引用外部脚本文件（如 .js 文件），为网页添加交互和动态功能。

理解和正确配置 HTML 骨架结构的各个部分，是构建一个规范、有效和易于维护的网页的基础。

5）开发工具使用

基础介绍：所有纯文本编辑器都能编辑 HTML 文件，如 Windows 系统自带的记事本、Mac 系统的 TextEdit 等。然而，为了提高开发效率和代码质量，目前市场上有许多专门为前端开发设计的代码编辑器，它们提供了丰富的功能和便捷的操作。
常用的代码编辑器：
- Sublime Text：具有简洁的界面、强大的插件生态系统和快速的响应速度，深受开发者喜爱。
- Visual Studio Code：由微软开发，免费开源，拥有丰富的扩展库、智能代码提示和强大的调试功能。
- HBuilder：一款专为前端开发打造的工具，提供了代码编辑、预览、调试等一站式功能，尤其在移动端开发方面具有优势。
- WebStorm：功能强大，提供了全面的代码分析、重构和版本控制集成等高级功能，适合大型项目开发。
其中，HBuilder 是一款常用的前端开发工具，它提供了代码编辑、预览、调试等功能，有助于提高开发效率。此外，它还支持多种前端框架和插件，能够满足不同项目的需求。

选择适合自己需求和开发习惯的代码编辑器，可以极大地提高前端开发的效率和体验。同时，熟练掌握所选编辑器的各种功能和快捷键，能够进一步提升开发的流畅性和生产力。

3、语法规范

1）HTML的注释

作用：注释代码，添加合理解释提高代码的可读性，方便其他开发者理解代码的功能和逻辑。同时，先注释掉一部分暂时不用的代码便于后期恢复，在代码调试过程中也经常使用注释来临时排除某些代码段的执行。
语法：快捷键 CTRL + / （在许多代码编辑器中），注释以  结尾。

例如：

<!-- 这是一个注释，用于解释下面的代码 -->
<p>这是一个段落。</p>

注释在代码维护和团队协作中非常重要，它可以帮助其他开发者快速理解代码的功能和逻辑。

2）HTML基本语法：

标签：分为单标签和双标签，双标签必须成对出现，有开始标签和结束标签，结束标签必须有关闭符号 /，根据标签内部存放内容的不同，分为容器级和文本级标签。

双标签：由开始标签和结束标签组成，如 <strong></strong> ，用于包裹需要强调的文本。双标签能够包含其他的标签和文本内容。
单标签：没有结束标签，如 <br> ，用于实现特定的功能，如换行。单标签通常是自闭合的，不需要结束标签。

标签属性：

属性是标签身上的特殊性质，在开始标签或单标签的标签名后面添加空格，然后书写属性，以键值对的方式呈现，多个属性之间用空格隔开。

标签的属性写在开始标签内部，用于进一步描述标签的特征和行为。
- 标签上可以同时存在多个属性，属性之间通过空格隔开。
- 标签名与属性之间必须通过空格隔开。
- 属性之间没有顺序之分。

例如，<img src="image.jpg" alt="图片描述" width="200" height="150" /> ，其中 src 、alt 、width 和 height 都是 img 标签的属性，分别用于指定图片的路径、替代文本、宽度和高度。

标签之间的特性：对空白、换行、缩进不敏感，只认标签的开始和结束，为了代码的可读性建议合理换行和缩进，上传代码时可压缩删除多余空白以提高传输速度。

在编写 HTML 代码时，遵循良好的语法规范和代码风格，能够提高代码的可维护性和可阅读性，减少潜在的错误和问题。

3）HTML标签的关系

父子关系（嵌套关系）：一个标签包含在另一个标签内部，如 <div><p>这是段落</p></div>，p 标签是 div 标签的子标签，div 标签是 p 标签的父标签。在这种关系中，子标签的样式和行为可能会受到父标签的影响。
兄弟关系（并列关系）：处于同一层级的标签，如 <p>段落 1</p><p>段落 2</p>，这两个 p 标签是兄弟关系。它们在页面结构中具有相同的地位，但相互之间的样式和行为通常是独立的，除非通过 CSS 样式表进行统一的设置。

正确理解和处理 HTML 标签之间的关系，对于构建清晰、合理的网页结构至关重要。通过合理的嵌套和布局，可以实现网页内容的有序组织和展示，提高用户的阅读体验和网页的可用性。

二、HTML标签学习

1、排版系列标签

1）标题标签

h系类标签：包含六级标题h1 - h6，分别用于定义不同级别的标题，h1 到 h6 ，数字越大，标题级别越低。都是双标签、容器级标签，给内部内容添加对应级别标题的语义，所有标题标签权重比别的标签高。

语义：明确表示标题的层次和重要性。比如，h1通常用于网页的主标题，h2用于副标题，依次类推。
显示特点： 1、文字加粗； 2、文字大小从 h1 到 h6 逐渐减小； 3、独占一行。
注意点：
- h1 标签具有重要的语义，通常用于网页的主标题、新闻的标题或重要的板块标题，不应滥用。一个网页中最好只使用一个h1标签，以突出网页的核心主题。
- 合理使用标题标签有助于搜索引擎优化（SEO），提高网页在搜索结果中的排名。搜索引擎会根据标题标签的层次结构来理解网页的内容结构和重点。

例如：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

在网页设计中，根据内容的层次和重要性恰当地选择和使用标题标签，能够使网页结构更加清晰、易读，同时也有利于提升网页在搜索引擎中的可见性和排名。

2）段落标签

p标签：双标签、文本级标签，用于定义段落。

语义：表示一段独立的文本内容，通常是一个完整的思想或主题的表达。
显示特点：
1. 段落之间有默认的间隙，以区分不同的段落。
2. 独占一行，自成一个文本块。

段落标签常用于文章、网页正文等需要分段展示文本的地方。

例如：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

通过合理使用段落标签，可以将长篇的文本内容划分为易于理解和阅读的小块，提高用户的阅读体验和信息获取效率。

3）水平线标签

hr 标签是单标签，用于在网页中显示一条水平线。
作用：起到分隔内容、增强页面布局的效果。例如，在不同主题的内容之间插入水平线，能够清晰地划分区域，让页面结构更加清晰和有条理。

例如：

<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>

hr标签为网页的布局和内容组织提供了一种简单而有效的视觉分隔方式。

4）换行标签

br 标签是单标签，用于强制换行。
作用：在需要换行的地方插入，使文本按照期望的方式进行排版，特别是在一些特定的格式要求或需要打破默认行宽限制的情况下。

例如：

这是一行文本，<br>这里需要换行。

在需要换行的地方插入，使文本按照期望的方式进行排版，特别是在一些特定的格式要求或需要打破默认行宽限制的情况下。

2、文本格式化标签

标签语义化

1）第一组：

b ：单纯实现文字加粗效果。例如，在强调某个重要词汇时可以使用。
u ：为文字添加下划线。常用于需要突出显示的文本，如链接。
i ：使文字倾斜。可以用于表示特殊的语气或强调。
s ：添加删除线效果。比如，用于表示已过时或不再有效的信息。

2）第二组（推荐，语义更强）：

strong ：表示强调的文本，通常以加粗形式呈现。强调的程度比单纯使用b标签更强烈。
ins ：表示插入的文本，以下划线显示。用于显示新添加或插入的内容。
em ：强调的文本，通常以倾斜显示。强调的语气相对较为柔和。
del ：表示已删除的文本，显示为删除线。用于标记已被删除或不再适用的内容。

例如：

<p>这是一段普通文本。</p>
<p><b>这是加粗的文本。</b></p>
<p><u>这是带下划线的文本。</u></p>
<p><i>这是倾斜的文本。</i></p>
<p><s>这是添加删除线的文本。</s></p>
<p><strong>这是强调的文本。</strong></p>
<p><ins>这是插入的文本。</ins></p>
<p><em>这是强调的文本。</em></p>
<p><del>这是已删除的文本。</del></p>

在实际的网页开发中，应根据具体的语义和需求选择合适的文本格式化标签，以提高网页的可读性和可理解性。

3、媒体标签

1）图片标签

img标签：单标签、文本级标签，在指定位置插入一张图。

作用：丰富网页的视觉内容。
属性：
- src ：指定图片的路径，确保图片能够正确显示。路径可以是相对路径或绝对路径。
- alt ：当图片加载失败时显示的替换文本，为用户提供必要的信息，同时对于搜索引擎优化和无障碍访问具有重要意义。
- title ：鼠标悬停在图片上时显示的提示文本，可提供更详细的图片描述或相关说明。
- width ：设置图片的宽度。
- height ：设置图片的高度。

注意点：一般只设置 width 或者 height 中的一个，以保持图片的比例，避免拉伸变形。

例如：

<img src="image.jpg" alt="图片描述" width="200" title="这是一张图片">

正确配置img标签的属性，能够使图片在网页中得到恰当的展示，提升用户体验。

2）路径

绝对路径：
1. 在个人电脑中，带有盘符的路径，如 D:\images\image.jpg 。但这种路径在网页中很少使用，因为网页是通过网络访问的，无法直接访问本地的盘符路径。
2. 外部链接，以 https:// 开头的完整 URL ，如 https://example.com/images/image.jpg 。这种路径用于引用其他网站上的图片资源。
相对路径：
1. 同级目录：直接写目标文件的名字。例如，如果当前文件和目标图片在同一目录下，直接使用image.jpg。
2. 下级目录：先写目标文件所在文件夹的名字，然后进入该文件夹，最后写目标文件的名字。例如，如果图片在当前目录下的images文件夹中，使用images/image.jpg。
3. 上级目录：使用 ../ 表示上一级目录，然后写目标文件的名字。例如，如果要引用上一级目录中的图片，使用../image.jpg。

例如：

<!-- 同级目录 -->
<img src="image.jpg" alt="">
<!-- 下级目录 -->
<img src="images/image.jpg" alt="">
<!-- 上级目录 -->
<img src="../image.jpg" alt="">

选择合适的路径类型取决于图片的存储位置和网页的结构，相对路径在大多数情况下更加灵活和便于维护。

3）音频标签

audio 标签用于在网页中插入音频。
作用：为网页添加声音元素，增强用户的体验。例如，在音乐网站、有声读物页面等。
属性：
- src ：音频文件的路径。
- controls ：显示音频播放的控件，如播放/暂停按钮。使用户能够方便地控制音频的播放。
- autoplay ：设置音频自动播放。但需注意，自动播放可能会影响用户体验，在某些情况下可能会被浏览器阻止。
- loop ：设置音频循环播放。

考虑到用户体验和不同浏览器的支持情况，合理设置音频的属性。

例如：

<audio src="audio.mp3" controls autoplay loop></audio>

在使用音频标签时，要平衡用户需求和网页性能，提供良好的用户体验。

4）视频标签

video 标签用于在网页中插入视频。
作用：展示视频内容，为网页提供更丰富和动态的信息呈现方式。
属性：
- src ：视频文件的路径。
- controls ：显示视频播放的控件。
- autoplay ：自动播放视频。
- loop ：循环播放视频。

如同音频标签，在使用视频标签时，要注意用户体验和兼容性。

例如：

<video src="video.mp4" controls autoplay loop></video>

视频标签的应用可以极大地增强网页的吸引力和信息传达能力，但也要注意视频的质量、格式和加载速度等因素。

5）链接标签

href 属性：告诉浏览器点击链接后跳转到的目标网页。
- 取值：可以是外部链接（完整的网址，以 https:// 开头），也可以是本地网页的路径。
target 属性：设置跳转方式。
- _self ：在当前窗口中跳转，原网页被覆盖。
- _blank ：在新窗口中打开链接，原网页保留。
空链接：

<a href="#">空链接</a>

锚点：双标签、文本级标签，作用是在指定位置添加超级链接实现跳转，a标签属性有href（超文本引用，设置跳转链接）、target（是否在新标签页打开链接，值为“_blank”）、title（鼠标移上文字后的悬停文本）。页面锚点的使用有两种方法，一种是设置空锚点并设置name属性和href属性（后面加#号），另一种是将锚点的点设置为其他标签的id属性，id属性值和href一样。

例如：

<!-- 跳转到外部链接 -->
<a href="https://www.example.com" target="_blank">点击跳转到示例网站</a>
<!-- 跳转到本地网页 -->
<a href="about.html">关于我们</a>
<!-- 锚点链接 -->
<a href="#section1">跳转到章节 1</a>
<a name="section1"></a>

三、标签认识

1、列表标签

1）应用场景

网页中以行的方式整齐地展示数据：如数据列表、排行榜等，这时就可以使用列表标签。列表标签能够使数据更有条理，易于用户阅读和理解。列表标签在网页设计中具有广泛的应用，不仅可以用于展示简单的项目列表，还可以用于构建复杂的导航菜单、目录结构等。

2）无序列表

无序标签：由ul（无序列表）和li（列表项）组成，定义一个没有顺序的列表，ul标签内部只能嵌套li，li内部可以嵌套任何标签甚至是ul，但不规范可能会出现问题，列表项之间没有先后顺序，前缀样式由css控制。

标签：

1、整体：ul （unordered list） 2、每一项：li （list item）
显示的效果：每一项前面默认有小圆点。可以通过 CSS 样式来修改小圆点的样式，例如将其改为方块、空心圆等。
注意点：

1、每一项没有顺序之分。 2、ul标签中只能放 li 标签。 3、li标签里面可以放任意的标签。

例如：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

无序列表适用于项目之间没有明确先后顺序或重要性差异的情况，通过小圆点的默认样式为用户提供一种视觉上的分组效果。常用于展示无需排序的项目集合，如菜单列表、导航栏等。

3）有序列表

有序列表：由ol（有序列表）和li组成，定义一个有序列表结构，ol内部只能嵌套li，li内部可以嵌套任何标签。

标签：

1、整体：ol （ordered list） 2、每一项：li
显示的效果：每一项前面有默认的序号。序号的类型可以是数字、字母或罗马数字等，可以通过 CSS 进行修改。
注意点：

1、每一项是有顺序的。 2、ol 标签中只能放 li 标签。 3、li 标签可以放任意的标签。

适用于需要明确顺序的项目列表，如步骤说明、排名列表等。

例如：

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

有序列表通过序号的方式清晰地展示了项目之间的顺序关系，有助于用户按照特定的顺序理解和处理信息。

4）自定义列表

定义列表：由dl（创建自定义列表结构）、dt（定义主题或术语）和dd（定义解释项）组成，dl内部只能存放dt和dd，dt和dd是同级关系，每个dt主题后面可以跟0或多个解释的dd，dt和dd都是容器级标签，内部可以存放任意内容，使用场景如京东网站的商品分类展示。

标签：

1、整体：dl （definition list） 2、小标题：dt （definition term） 3、每一项：dd （definition description）
注意点：

1、dl标签中只能放dt或者dd 。 2、dt或者dd中可以放任意标签。

常用于定义术语、解释概念等场景。

例如：

<dl>

 <dt>水果</dt>
 <dd>苹果</dd>
 <dd>香蕉</dd>
 <dd>橙子</dd>

 <dt>蔬菜</dt>
 <dd>西红柿</dd>
 <dd>黄瓜</dd>
 <dd>胡萝卜</dd>

</dl>

自定义列表为定义和解释相关的信息提供了一种结构化的方式，使得术语与其解释之间的关系更加清晰和明确。

2、表格

1）应用场景

表格适用于以行和列的单元格方式整齐地展示数据，如股票价格、课程表、人员信息等。表格能够使数据更加清晰、直观地呈现给用户，特别适用于数据量较大且需要进行对比和分类展示的情况。
表格在网页设计中是一种常见的数据展示方式，其优点在于能够将大量相关的数据组织在一个紧凑的空间内，便于用户快速浏览和比较。

2）表格的基本标签

表格基础：主要由table（定义表格结构）、tr（定义表格的行）和td（定义表格的单元格）组成，table标签上的border属性设置表格边框，style属性“border - collapse: collapse”合并表格，可使用tr - th设置表头。

整体：table
每一行：tr（table row）
每一个单元格：td（table data）

例如：

<table border="1">
  <tr>
      <td>单元格 1</td>
      <td>单元格 2</td>
  </tr>

  <tr>  
      <td>单元格 3</td>
      <td>单元格 4</td>
  </tr>
</table>

表格的基本结构通过这些标签的组合得以构建，为数据的展示提供了基础框架。

3）属性

border：设置表格边框的宽度。可以根据需要调整边框的粗细，使表格更加美观。
width ：设置表格的宽度。可以使用像素、百分比等单位来指定表格的宽度。
height ：设置表格的高度。同样可以使用不同的单位来控制表格的高度。

合理设置表格的属性可以使其更符合设计需求，更好地适应页面布局和内容展示的要求。

例如：

<table border="2" width="500" height="300">

 <!-- 表格内容 -->

</table>

通过精确地调整表格的属性，可以实现更加美观和实用的数据展示效果。

4）表格的其他标签

表格分区：一个完整表格包含表格标题（caption）、表格表头（thead）和表格主体（tbody）三个部分。

caption ：表格的整体大标题，写在 table 标签开始标签的下面。
th ：表头标签，用于替换 td ，通常显示为加粗和居中的文本。
表格的结构标签：
- 表格的头部：thead
- 表格的身体：tbody
- 表格的底部：tfoot

这些标签有助于对表格的结构进行更清晰的划分和管理，提高表格的可读性和可维护性。

例如：

<table border="1">
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>80</td>
      <td>90</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>70</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

通过合理使用表格的分区标签，可以使表格的结构更加清晰明了，便于用户理解和数据的处理。

5）合并单元格

单元格合并：通过td和th标签的rowspan（上下跨行合并）和colspan（左右跨列合并）属性实现，属性值为数字表示跨的行数或列数。

应用场景：当多个单元格展示内容相同时，为了使信息简洁不重复显示，可以进行单元格合并。
合并属性：
- rowspan ：用于跨行合并。
- colspan ：用于跨列合并。
实现步骤：
1. 确定合并哪几个单元格。
2. 通过左上原则确定保留谁删除谁。如果是上下合并 —— 保留最上面的，删除其他如果是左右合并 —— 保留最左边的，删除其他
3. 确定是跨行还是跨列，并给保留的单元格设置相应的合并属性和合并个数。
  - 如果是跨行合并
  rowspan=“合并的个数” —— 给保留的单元格设置
  - 如果是跨列合并
  colspan=“合并的个数” —— 给保留的单元格设置

例如：

<table border="1">
  <tr>
    <td rowspan="2">姓名</td>
    <td>语文</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>80</td>
    <td>90</td>
  </tr>
</table>

3、表单标签

1）应用场景

表单标签常用于收集用户数据的网页，如登录页、注册页、调查问卷等。通过表单，用户可以输入信息并提交给服务器进行处理，实现了用户与网站之间的交互和数据传递。
表单在电子商务、社交媒体、在线服务等领域都有广泛的应用，是实现用户个性化体验和数据收集的重要手段。

2）input标签

input 标签可以通过type属性值的不同，呈现不同的形态和功能。

input标签：通过type属性拓展多种功能，包括输入框（value设置默认显示内容，placeholder提示用户的文字占位符）、密码框（type值为password，输入后以掩码形式显示）、单选框（type值为radio，成组出现，设置相同name属性实现互斥，可添加checked = “checked”实现默认选择）、复选框（type值为checkbox，可多次点击选择或取消，建议同一组设置相同name属性，可添加checked = “checked”实现默认选择）、文本域（textarea标签可输入多行文本，属性rows定义可视区域行数，cols定义当前行显示字节数量，placeholder为占位符，可通过设置style的resize属性为none去掉可拖拽区域）、下拉菜单（由select和option标签组成，select搭建下拉项，option搭建选项，可使用selected = “selected”设置默认选中）。

1、文本框： type="text"

属性：
- value ：用户输入的数据，若提前在代码中设置，可作为内容的默认值，最终会发送给后台。
- name ：告知后台发送的数据含义。
- placeholder ：占位符，提示用户输入的内容。

2、密码框： type="password" ，输入内容以密文形式显示。

属性：与文本框类似。

3、单选框：type="radio"

属性：
- name ：用于分组，相同 name 值的单选框为一组，一组中只能同时有一个被选中。
- value ：表示用户选择的数据。
- checked ：默认选中，一组中只能设置一个。

4、多选框：type="checkbox"

属性：与单选框类似。

5、文件选择框：type="file"

HTML5 新增属性：multiple ，可实现多文件选择。

6、表单按钮：

提交按钮：type="submit" ，将表单数据发送给服务器。
重置按钮：type="reset" ，使表单恢复成默认值。
普通按钮：type="button" ，若要实现特定功能，需配合 JavaScript 使用。

form标签：表单的容器标签，内部存放可输入的控件，method属性指数据提交方法（post和get），action属性是数据提交的位置。

例如：

<form action="submit.php" method="post">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <input type="radio" name="gender" value="male" checked> 男
  <input type="radio" name="gender" value="female"> 女
  <input type="checkbox" name="hobbies" value="reading"> 阅读
  <input type="checkbox" name="hobbies" value="music"> 音乐
  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

注意点：若要使用表单按钮的功能，需将表单标签用 form 标签包裹起来。

3）button标签

默认的功能：提交按钮
类型：

提交 —— submit 重置 —— reset 普通 —— button

例如：

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

button 标签在功能和表现上与 input 标签的按钮类型相似，但具有更丰富的样式和内容定制性。

4）下拉菜单

标签：
- 整体：select
- 每一项：option
属性：selected 用于设置默认选中项。

下拉菜单适用于提供多个选项供用户选择的场景，能够节省页面空间并使选项展示更加清晰。

例如：

<select>
  <option value="option1" selected>选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

5）文本域标签

textarea 标签用于输入大段文字。
- 可以通过 rows 和 cols 属性设置文本域的行数和列数。

常用于留言板、评论区等需要用户输入较多文字的地方。

例如：

<textarea rows="5" cols="30">请输入您的评论...</textarea>

textarea 为用户提供了更广阔的输入空间，以满足大量文字输入的需求。

6）label标签

作用：绑定文本和表单标签的关系，提高用户交互体验。
使用方法：
- 方法一：
  - 使用 label 标签把文本包裹起来。
  - 在表单标签上添加 id 属性。
  - 在 label 标签的 for 属性中设置表单标签的 id 属性值。
- 方法二：
  - 直接使用 label 标签把文本和表单标签一起包裹起来，此时需删除 label 标签的 for 属性。

例如：

方法一：
<input type="checkbox" id="checkbox1">
<label for="checkbox1">我同意条款</label>

方法二：
<label>
  <input type="checkbox"> 我同意条款
</label>

label 标签增强了表单的可用性和用户友好性。

7）语义化标签

作用：都是常用的布局标签，div分割跨度大，用于网页布局拆分，没有明确语义；span小区域小跨度，适用于文字的跨度划分。
没有语义的布局标签：
- div ：独占一行，宽度默认占满一行，高度默认由内容撑开。
- span ：一行中可以显示多个，宽度和高度默认由内容撑开。

例如：

<div>这是一个 div 标签</div>
<span>这是一个 span 标签</span>

在实际开发中，应尽量使用具有语义的标签，以提高网页的可维护性和可访问性。

8）字符实体

场景：网页中一些特殊字符如版权符号、商标符号等在键盘中打不出来，还有替代字符的场景，HTML会识别一部分字符，此时可利用字符实体进行转换。

规定：字符实体以“&”符号开头，“;”结尾，例如将<替换为<。

HTML的空格合并现象
常见字符实体
- 空格 —— &nbsp ;
- 大于 —— &gt ;
- 小于号 —— &lt ;

字符实体的使用可以在需要显示特殊字符或避免字符被误解的情况下发挥作用。

总之，HTML 标签丰富多样，通过合理运用这些标签，可以构建出结构清晰、功能完善、用户体验良好的网页。在实际开发中，应根据具体需求选择合适的标签，并遵循 Web 标准和最佳实践，以确保网页的质量和可维护性。

幻星语

关注

36
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录