No.5 web底子

一、底子认知

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骨架布局

1. <!DOCTYPE html>
2. <html>
3.     <head>
4.         <title>网页的标题</title>
5.         <meta charset="UTF - 8">
6.         <link rel="stylesheet" type="text/css" href="styles.css">
7.         <script src="script.js"></script>
8.     </head>
9.     <body>
10.         自己的代码
11.     </body>
12. </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 + / （在很多代码编辑器中），解释以 <!-- 开头，以 --> 末端。
  

比方：

1. <!-- 这是一个注释，用于解释下面的代码 -->
2. <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），进步网页在搜刮结果中的排名。搜刮引擎会根据标题标签的条理布局来明确网页的内容布局和重点。
    
  
  

比方：

1. <h1>这是一级标题</h1>
2. <h2>这是二级标题</h2>
3. <h3>这是三级标题</h3>
4. <h4>这是四级标题</h4>
5. <h5>这是五级标题</h5>
6. <h6>这是六级标题</h6>

复制代码

在网页筹划中，根据内容的条理和告急性恰本地选择和利用标题标签，可以大概使网页布局更加清晰、易读，同时也有利于提拔网页在搜刮引擎中的可见性和排名。

2）段落标签

p标签：双标签、文本级标签，用于界说段落。

• 语义：表现一段独立的文本内容，通常是一个完备的头脑或主题的表达。
  
• 表现特点：
  
  
  
  • 段落之间有默认的间隙，以区分差别的段落。
    
  • 独占一行，自成一个文本块。
    
  
  

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

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

复制代码

通过公道利用段落标签，可以将长篇的文本内容分别为易于明确和阅读的小块，进步用户的阅读体验和信息获取服从。

3）水平线标签

• hr 标签是单标签，用于在网页中表现一条水平线。
  
• 作用：起到分隔内容、加强页面布局的结果。比方，在差别主题的内容之间插入水平线，可以大概清晰地分别地区，让页面布局更加清晰和有条理。
  

比方：

1. <p>这是一段文本。</p>
2. <hr>
3. <p>这是另一段文本。</p>

复制代码

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

4）换行标签

• br 标签是单标签，用于逼迫换行。
  
• 作用：在须要换行的地方插入，使文本按照盼望的方式举行排版，特殊是在一些特定的格式要求或须要突破默认行脱期制的环境下。
  

比方：

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

复制代码

在须要换行的地方插入，使文本按照盼望的方式举行排版，特殊是在一些特定的格式要求或须要突破默认行脱期制的环境下。

2、文本格式化标签

• 标签语义化
  

1）第一组：

• b ：单纯实现笔墨加粗结果。比方，在夸大某个告急词汇时可以利用。
  
• u ：为笔墨添加下划线。常用于须要突出表现的文本，如链接。
  
• i ：使笔墨倾斜。可以用于表现特殊的语气或夸大。
  
• s ：添加删除线结果。好比，用于表现已过期或不再有效的信息。
  

2）第二组（保举，语义更强）：

• strong ：表现夸大的文本，通常以加粗情势出现。夸大的水平比单纯利用b标签更剧烈。
  
• ins ：表现插入的文本，以下划线表现。用于表现新添加或插入的内容。
  
• em ：夸大的文本，通常以倾斜表现。夸大的语气相对较为柔和。
  
• del ：表现已删除的文本，表现为删除线。用于标记已被删除或不再实用的内容。
  

比方：

1. <p>这是一段普通文本。</p>
2. <p><b>这是加粗的文本。</b></p>
3. <p><u>这是带下划线的文本。</u></p>
4. <p><i>这是倾斜的文本。</i></p>
5. <p><s>这是添加删除线的文本。</s></p>
6. <p><strong>这是强调的文本。</strong></p>
7. <p><ins>这是插入的文本。</ins></p>
8. <p><em>这是强调的文本。</em></p>
9. <p><del>这是已删除的文本。</del></p>

复制代码

在实际的网页开辟中，应根据详细的语义和需求选择符合的文本格式化标签，以进步网页的可读性和可明确性。

3、媒体标签

1）图片标签

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

• 作用：丰富网页的视觉内容。
  
• 属性：
  
  
  
  • src ：指定图片的路径，确保图片可以大概准确表现。路径可以是相对路径或绝对路径。
    
  • alt ：当图片加载失败时表现的更换文本，为用户提供须要的信息，同时对于搜刮引擎优化和无停滞访问具有告急意义。
    
  • title ：鼠标悬停在图片上时表现的提示文本，可提供更详细的图片形貌或干系阐明。
    
  • width ：设置图片的宽度。
    
  • height ：设置图片的高度。
    
  
  

注意点： 一样平常只设置 width 大概 height 中的一个，以保持图片的比例，克制拉伸变形。
比方：

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

复制代码

准确设置img标签的属性，可以大概使图片在网页中得到恰当的展示，提拔用户体验。

2）路径

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

比方：

1. <!-- 同级目录 -->
2. <img src="image.jpg" alt="">
3. <!-- 下级目录 -->
4. <img src="images/image.jpg" alt="">
5. <!-- 上级目录 -->
6. <img src="../image.jpg" alt="">

复制代码

选择符合的路径范例取决于图片的存储位置和网页的布局，相对路径在大多数环境下更加机动和便于维护。

3）音频标签

• audio 标签用于在网页中插入音频。
  
• 作用：为网页添加声音元素，加强用户的体验。比方，在音乐网站、有声读物页面等。
  
• 属性：
  
  
  
  • src ：音频文件的路径。
    
  • controls ：表现音频播放的控件，如播放/停息按钮。利用户可以大概方便地控制音频的播放。
    
  • autoplay ：设置音频自动播放。但需注意，自动播放大概会影响用户体验，在某些环境下大概会被欣赏器克制。
    
  • loop ：设置音频循环播放。
    
  
  

思量到用户体验和差别欣赏器的支持环境，公道设置音频的属性。
比方：

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

复制代码

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

4）视频标签

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

犹如音频标签，在利用视频标签时，要注意用户体验和兼容性。
比方：

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

复制代码

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

5）链接标签

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

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

复制代码

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

比方：

1. <!-- 跳转到外部链接 -->
2. <a href="https://www.example.com" target="_blank">点击跳转到示例网站</a>
3. <!-- 跳转到本地网页 -->
4. <a href="about.html">关于我们</a>
5. <!-- 锚点链接 -->
6. <a href="#section1">跳转到章节 1</a>
7. <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标签内里可以放恣意的标签。
  

比方：

1. <ul>
2.  <li>项目 1</li>
3.  <li>项目 2</li>
4.  <li>项目 3</li>
5. </ul>

复制代码

无序列表实用于项目之间没有明确先后次序或告急性差别的环境，通过小圆点的默认样式为用户提供一种视觉上的分组结果。 ​ 常用于展示无需排序的项目聚集，如菜单列表、导航栏等。

3）有序列表

有序列表：由ol（有序列表）和li构成，界说一个有序列表布局，ol内部只能嵌套li，li内部可以嵌套任何标签。

• 标签：
  1、团体：ol （ordered list） 2、每一项：li
  
• 表现的结果：每一项前面有默认的序号。序号的范例可以是数字、字母或罗马数字等，可以通过 CSS 举行修改。
  
• 注意点：
  1、每一项是有次序的。 2、ol 标签中只能放 li 标签。 3、li 标签可以放恣意的标签。
  

实用于须要明确次序的项目列表，如步调阐明、排名列表等。
比方：

1. <ol>
2.  <li>第一步</li>
3.  <li>第二步</li>
4.  <li>第三步</li>
5. </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中可以放恣意标签。
  

常用于界说术语、表明概念等场景。
比方：

1. <dl>
3.  <dt>水果</dt>
4.  <dd>苹果</dd>
5.  <dd>香蕉</dd>
6.  <dd>橙子</dd>
8.  <dt>蔬菜</dt>
9.  <dd>西红柿</dd>
10.  <dd>黄瓜</dd>
11.  <dd>胡萝卜</dd>
13. </dl>

复制代码

自界说列表为界说和表明干系的信息提供了一种布局化的方式，使得术语与其表明之间的关系更加清晰和明确。

2、表格

1）应用场景

• 表格实用于以行和列的单元格方式整齐地展示数据，如股票代价、课程表、职员信息等。表格可以大概使数据更加清晰、直观地出现给用户，特殊实用于数据量较大且须要举行对比和分类展示的环境。
  
• 表格在网页筹划中是一种常见的数据展示方式，其长处在于可以大概将大量干系的数据构造在一个紧凑的空间内，便于用户快速欣赏和比力。
  

2）表格的根本标签

表格底子：重要由table（界说表格布局）、tr（界说表格的行）和td（界说表格的单元格）构成，table标签上的border属性设置表格边框，style属性“border - collapse: collapse”归并表格，可利用tr - th设置表头。

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

比方：

1. <table border="1">
2.   <tr>
3.       <td>单元格 1</td>
4.       <td>单元格 2</td>
5.   </tr>
7.   <tr>  
8.       <td>单元格 3</td>
9.       <td>单元格 4</td>
10.   </tr>
11. </table>

复制代码

表格的根本布局通过这些标签的组合得以构建，为数据的展示提供了底子框架。

3）属性

• border：设置表格边框的宽度。可以根据须要调解边框的粗细，使表格更加雅观。
  
• width ：设置表格的宽度。可以利用像素、百分比等单元来指定表格的宽度。
  
• height ：设置表格的高度。同样可以利用差别的单元来控制表格的高度。
  

公道设置表格的属性可以使其更符合筹划需求，更好地顺应页面布局和内容展示的要求。
比方：

1. <table border="2" width="500" height="300">
3.  <!-- 表格内容 -->
5. </table>

复制代码

通过准确地调解表格的属性，可以实现更加雅观和实用的数据展示结果。

4）表格的其他标签

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

• caption ：表格的团体大标题，写在 table 标签开始标签的下面。
  
• th ：表头标签，用于更换 td ，通常表现为加粗和居中的文本。
  
• 表格的布局标签：
  
  
  
  • 表格的头部：thead
    
  • 表格的身材：tbody
    
  • 表格的底部：tfoot
    
  
  

这些标签有助于对表格的布局举行更清晰的分别和管理，进步表格的可读性和可维护性。
比方：

1. <table border="1">
2.   <caption>学生成绩表</caption>
3.   <thead>
4.     <tr>
5.       <th>姓名</th>
6.       <th>语文</th>
7.       <th>数学</th>
8.     </tr>
9.   </thead>
10.   <tbody>
11.     <tr>
12.       <td>张三</td>
13.       <td>80</td>
14.       <td>90</td>
15.     </tr>
16.     <tr>
17.       <td>李四</td>
18.       <td>70</td>
19.       <td>85</td>
20.     </tr>
21.   </tbody>
22. </table>

复制代码

通过公道利用表格的分区标签，可以使表格的布局更加清晰明确，便于用户明确和数据的处理处罚。

5）归并单元格

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

• 应用场景：当多个单元格展示内容类似时，为了使信息简便不重复表现，可以举行单元格归并。
  
• 归并属性：
  
  
  
  • rowspan ：用于跨行归并。
    
  • colspan ：用于跨列归并。
    
  
  
• 实现步调：
  
  
  
  • 确定归并哪几个单元格。
    
  • 通过左上原则确定保存谁删除谁。 如果是上下归并 —— 保存最上面的，删除其他 如果是左右归并 —— 保存最左边的，删除其他
    
  • 确定是跨行还是跨列，并给保存的单元格设置相应的归并属性和归并个数。
    
    
    
    • 如果是跨行归并
      
    rowspan=“归并的个数” —— 给保存的单元格设置
         
    
    
    
    • 如果是跨列归并
      
    colspan=“归并的个数” —— 给保存的单元格设置
    
    
  
  

比方：

1. <table border="1">
2.   <tr>
3.     <td rowspan="2">姓名</td>
4.     <td>语文</td>
5.     <td>数学</td>
6.   </tr>
7.   <tr>
8.     <td>80</td>
9.     <td>90</td>
10.   </tr>
11. </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属性是数据提交的位置。
比方：

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

复制代码

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

• 默认的功能：提交按钮
  
• 范例：
  提交 —— submit 重置 —— reset 平常 —— button
  

比方：

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

复制代码

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

4）下拉菜单

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

下拉菜单实用于提供多个选项供用户选择的场景，可以大概节流页面空间并使选项展示更加清晰。
比方：

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

复制代码

5）文本域标签

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

常用于留言板、批评区等须要用户输入较多笔墨的地方。
比方：

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

复制代码

textarea 为用户提供了更广阔的输入空间，以满意大量笔墨输入的需求。

6）label标签

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

比方：

1. 方法一：
2. <input type="checkbox" id="checkbox1">
3. <label for="checkbox1">我同意条款</label>
5. 方法二：
6. <label>
7.   <input type="checkbox"> 我同意条款
8. </label>

复制代码

label 标签加强了表单的可用性和用户友爱性。

7）语义化标签

• 作用：都是常用的布局标签，div分割跨度大，用于网页布局拆分，没有明确语义；span小地区小跨度，实用于笔墨的跨度分别。
  
• 没有语义的布局标签：
  
  
  
  • div ：独占一行，宽度默认占满一行，高度默认由内容撑开。
    
  • span ：一行中可以表现多个，宽度和高度默认由内容撑开。
    
  
  

比方：

1. <div>这是一个 div 标签</div>
2. <span>这是一个 span 标签</span>

复制代码

在实际开辟中，应只管利用具有语义的标签，以进步网页的可维护性和可访问性。

8）字符实体

场景：网页中一些特殊字符如版权符号、商标符号等在键盘中打不出来，尚有替换字符的场景，HTML会辨认一部门字符，此时可利用字符实体举行转换。
规定：字符实体以“&”符号开头，“;”末端，比方将<更换为<。

• HTML的空格归并征象
  
• 常见字符实体
  
  
  
  • 空格 —— &nbsp ;
    
  • 大于 —— &gt ;
    
  • 小于号 —— &lt ;
    
  
  

字符实体的利用可以在须要表现特殊字符或克制字符被误解的环境下发挥作用。
总之，HTML 标签丰富多样，通过公道运用这些标签，可以构建出布局清晰、功能美满、用户体验良好的网页。在实际开辟中，应根据详细需求选择符合的标签，并依照 Web 标准和最佳实践，以确保网页的质量和可维护性。