HTML（一）

最新推荐文章于 2025-08-23 15:32:34 发布
最新推荐文章于 2025-08-23 15:32:34 发布
阅读量276 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/msn131420/article/details/123001082
本文介绍了HTML网页的基本概念，包括网页的组成、HTML语言的性质以及网页的形成过程。详细讲解了浏览器的工作原理，特别是四大内核的作用。此外，讨论了Web标准的重要性以及其构成（HTML、CSS、JS）。还阐述了HTML语法规范，如标签的类型和关系，并列举了HTML的基本结构标签。最后，提到了开发工具Visual Studio Code的使用和一些关键配置，如DOCTYPE、lang和charset的用途。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、网页的相关概念

1、什么是网页?--网站和网页的区别

网站是网页的一个集合。

网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。

1.1网页的组成

网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html),通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件.

2、什么是HTML?

  1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
   2.HTML 不是一种编程语言，而是一种标记语言 (markup language)。
    标记语言是一套标记标签 (markup tag)。

3、网页的形成？

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码 ----> 浏览器显示代码（解析、渲染） -----> 生成最后的 Web 页面

二、常用的浏览器及其内核

2.1常用浏览器--5种

浏览器是网页显示、运行的平台。

五大浏览器有 IE、Firefox、Chrome、Safari 和 Opera。

四大内核：Trident, Gecko, Webkit, Blink

2.2浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

 

目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。

三、Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。

3.1 为什么需要 Web 标准

浏览器不同，它们显示的页面或者排版有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

  1. 让Web标准发展前景更为广阔
  2. 内容能被更广泛的设备访问。
  3. 更容易被搜索引擎了搜索。
  4. 降低网站流量费用。
  5. 易于维护。
  6. 提高页面浏览速度。

3.2 Web 标准的构成（html+css+js）

 

Web标准提出的最佳体验方案：结构、表现、行为相分离。

四、HTML 语法规范

4.1 基本语法概述

1. HTML 标签是由尖括号包围的关键词，例如 <html>。
2. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是
开始标签，第二个标签是结束标签。
3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。
html标签分为双标签和单标签2种，双标签关系可以分为两类：包含关系和并列关系。

4.2标签关系--2种

html标签分为双标签和单标签2种，双标签关系可以分为两类：包含关系和并列关系。

双标签关系可以分为两类：包含关系和并列关系。

 

五、HTML 基本结构标签

5.1第一个 HTML 网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为 HTML 文档.

 

 

5.2第一个 HTML

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

 

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

5.3基本结构标签总结--Html全局 head头部 （title眼睛 ）body身体

 

六、开发工具-vscode

6.1vscode使用

   1. 双击打开软件。
    2. 新建文件（Ctrl + N ）。
    3. 保存（Ctrl + S ）, 注意移动要保存为 .html 文件
    4. Ctrl + 加号键 ，Ctrl + 减号键  可以放大缩小视图 
    5. 生成页面骨架结构。 输入! 按下 Tab 键。
    6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

6.2vscode插件

 

 

 

七、DOCTYPE和lang以及字符集的作用

7.1文档类型声明标签

!<DOCTYPE> 文档类型声明，告诉浏览器使用何种 HTML 版本来显示网页。

<!DOCTYPE html>

7.2lang语言种类

用来显示当前文档显示的语言。

  1. en 定义语言为英文。
  2. zh-CN 定义语言为中文。
<html lang="zh-CN">
  <html lang="en"></html>
</html>

这个属性对浏览器和搜索引擎（谷歌/百度）还是有作用的。

7.3charset字符集

<meta charset="UTF-8" />

字符集（character set）是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset 属性来设置文档使用何种字符编码。

charset常用的值有：GBK、UTF-8，其中UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符。

自学前端第五天:HTML基础标签(二)
weixin_47592060的博客
05-05 317
HTML标签:(HyperText Markup Language) 一.html标签基本概念: 1. HTML 标签是由尖括号包围的关键词，例如 <html>。 2. HTML 标签通常是成对出现的: 例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 3. 有些特殊的标签必须是单个标签（极少情况）: 例如 <br />，我们称为单标签。 二.html标签之间的关系: 父子关系——嵌套关系 兄
HTML实例--制作表单
zxn200125的博客
10-05 1万+
运用表格和表单基础知识简单制作一个表单 表单制作使用表格来对表单进行排版美化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width...
HTML中单标签与双标签的分类
Cure The World的博客
08-23 4496
HTML中单标签和双标签的分类 单标签：只有一个标签。 双标签：有开始和结束标签 HTML标签关系可以是嵌套关系，也可以是并列关系 常见的单标签有 <hr /> <br /> <meta /> <img /> <link /> <input /> 常见的双标签有 <html></html> <head></head> <title></title&g
HTML的两类标签：行标签、块标签
weixin_34384915的博客
07-18 565
HTML的两类标签：行标签、块标签 行标签：包含a、span、em、strong、img、var； a标签：主要用来链接一个其他的网页； span标签：主要用来对行内的文字进行一些样式以及其他的操作； em标签：一般用来对文字进行强调，使用斜体体现出来； strong标签：一般用来对文字进行强调，使用加粗字体体现出来； img标签：图片引用标签，其中 src属性中写入图片的地址； v...
html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
12-14 1601
常用的块状元素有： 、、...、、、、、、 、 常用的内联元素有： 、、、、、、、、、、 常用的内联块状元素有： 、
html学习 2
weixin_50596664的博客
07-18 136
HTML语法规范 1.1基本语法概述 1. HTML标签是由尖括号包围的关键词，例如<html>。 2.HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 3．有些特殊的标签必须是单个标签（极少情况），例如<br />，我们称为单标签。 1.2标签关系 双标签关系可以分为两类：包含关系和并列关系。 包含关系 并列关系 <he...
HTML做一个个人博客页面（纯html代码）
QQ_____365392777的博客
08-11 4万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML做一个圣诞页面（纯html代码）
热门推荐
夏末初临
01-02 5万+
第一部分：目录文件夹 第二部分：index.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie.
使用HTML制作一个简单的个人主页
web15085181368的博客
03-09 9101
此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落的细节处理、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版
HTML 制作一个通讯录
weixin_48416160的博客
06-22 4779
文章目录 1.HTML 1.1HTML的结构 1.2常用标签 2.代码展示 3.结果演示 1.HTML 1.1HTML的结构 <!DOCTYPE HTML> <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> <!DOCTYPE HTML> 1.2 常用标签 标题标签:指定特定样式字体的一组标签 ...
HTML标签关系——双标签和单标签，标签的嵌套与并列
qq_42057046的博客
05-04 4284
在html页面中，带有“<>”符号的元素被称为HTML标签，例如<html></html>, <head></head>等都是标签 html中标签又分为双标签和单标签 双标签 <标签名>内容</标签名> 形如<html></html>，<head></head&gt...
html文档主体的根标签,2 HTML简介&标签嵌套和并列关系&文档声明
weixin_28984915的博客
06-03 1039
HTML：HyperTextMarkupLanguage 超文本标签语言(hyper：精力旺盛的 markup:标记 n noun)HTML不是编程语言，而是一种标记语言(就是一套标记标签)，用于描述网页，是网页制作必备的。超文本是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。HTML的结构包含头和主题，头提供网页信息，主体提供网页的具体内容。HTML文档包含标签和文本内容，HT...
2 HTML常用标签&标签嵌套和并列关系
weixin_30265103的博客
07-15 2391
HTML：HyperTextMarkupLanguage 超文本标签语言 主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 简而言之，是用文本表示的带有特殊标签的语言。 HTML骨架格式： <html> 根标签 　　<head> 头标签 　　 <title></title>标题标签 　　&lt...
html 文件必须以.htm 为扩展名,扩展名.htm .html .mht是一回事吗？
weixin_36146811的博客
06-30 3253
满意答案z584jsj4622013.07.06采纳率：47%等级：12已帮助：6884人一、.htm与.html的区别.htm 格式是超文本标记Hypertext Markup.html后者是超文本标记语言Hypertext Markup Language这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误(如将test.htm的文件名重名为test.html，也可以打开；反...
html文件结构的内外层,html页面结构
weixin_36151775的博客
06-17 533
011.结构层：负责语义表达，解决页面内容是什么问题2.表示层：由css负责创建，解决页面如何显示内容3.行为层：由脚本负责(js)，解决页面上内容应该如何对事件做出反应02主流浏览器内核1、IE： Trident内核2、Mozilla FireFox: Gecko内核3、Chrome,Safari:Webkit内核4、Opera:Presto内核03浏览器兼容性有哪些1、浏览器默认的margin...
HTML简介（网页的基本组成，什么是HTML，Web标准的三大组成部分），HTML标签（HTML语法规范，标签关系），HTML结构标签（第一个HTML）
shy的博客
02-22 4215
网页的基本组成 网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件 什么是HTML HTML是一种超文本标记语言，是一种用来描述网页的一种语言 HTML不是编程语言，而是标记语言，是一套标记标签 超文本: 可以加入声音，视频，动画，多媒体等（超越了文本限制） 可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本） Web标准的三大组成部分 主要包括结构、表现、行为 三个方
以下哪些可以成为html文件的扩展名_什么是html？什么是html文件？html语言特点？...
weixin_39607450的博客
12-01 4678
html语言是网络上的通用语言，也是比较简单的语言，对于想要在前端行业发展的人来说，html是必须要学的语言。那么，今天我们要来讲一下html是什么语言？html什么意思？以及html语言特点。什么是html？HTML的英文全称是HyperText Mark-up Language，中文名是超文本标记语言，是万维网浏览器使用的一种通用语言，其中超文本是指html网页中链接、图片、或者是其他程序等不...
HTML文件必须以.htm为扩展名,.htm和.html文件扩展名有什么区别？
weixin_42499899的博客
06-24 2801
html是为长文件名的格式命名的。而htm是为了兼容过去的DOS命名格式存在的，在效果上没有区别的HTML是一种标记语言,它的全称为:\"Hypertext Markup Language\"; 超文本标记语言的意思.你之所以有这样的困惑,是因为狠久狠久以前,著名的8.3命名法造成的恶果之一.在Unix,Windows NT和Windows 95操作系统中,由于都支持长文件名格式,超文本文件文件名...
【前端面试题✨】HTML 篇（一）
最新发布
2301_77798916的博客
08-23 604
本文介绍了HTML相关核心概念与技术：1) HTML语义化强调使用合适标签表达内容，提升可读性与SEO；2) Canvas用于JavaScript图形绘制，适合动态渲染；3) SVG与Canvas对比，前者为矢量图适合交互，后者适合高性能动画；4) HTML5新特性如语义标签、音视频支持、WebSocket实时通信及地理定位API；5) 解决兼容性问题的方法；6) title与alt属性的区别及重要性；7) HTML全局属性的作用。这些内容覆盖了现代Web开发的关键HTML知识点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值