当前位置：首页 > news >正文

HTML基础知识

news 2025/6/26 22:38:43

HTML基础知识

1.网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等机制制作的用于展示特定内容相关的网页集合

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

网页时构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件

1.2什么是HTML

HTML指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言，HTML不是一种编程语言，而是一种标记语言（markup language）

标记语言是一套标记标签（makeup tag）

1.3网页的形成

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的

1.4 网页总结

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）

网页生成制作:所有前端人员书写HTML文件，然后浏览器打开，就能看到了网页

HTML:超文本标记语言，用来之所网页的一门语言，有标签组成的，比如图片标签链接标签视频标签等

2.常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari喝Opera等

平时称为五大浏览器

2.1浏览器内核

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

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

3.Web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织

3.1为什么需要Web标准

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

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

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎范文
更容易被搜寻引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

3.2 Web标准的构成

主要包括结构（Structure)、表现（Presentation）和行为（Behavior）三个方面

Web标准提出的最佳解决方案：结构、样式、行为相分离

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScrip文件中

4.HTML语法规范

4.1基本语法概述

HTML标签是由==尖括号包围的关键词，例如
HTML标签通常是成对出现的，列入和,我们称之为双标签。标签对中的第一个标签是开始标签，第二个是结束标签
有些特殊的标签必须是单个标签（极少情况），例如
,我们称为单标签

4.2标签关系

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

包含关系

<head>
<title></title>
</head>

并列关系

<head></head>
<body></body>

5.HTML基本结构标签

5.1第一个HTML标签

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

HTML页面也称为HTML文档

<html>
<head>
<title>我的第一个页面</title>
</head>>
<body>
你=你我之间，黑马洗练，月薪过万，一飞冲天
</body>
</html>

6.开发工具

6.1 网页开发工具

6.3 网页开发工具

文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html>

这句代码的意思是：当前页面采取的是HTML5版本来显示网页

注意：

<！DOCTYPE>声明位与文档中的最前面的位置，处于标签之前
不是一个HTML标签，它就是文档类型声明标签

6.4 lang语言种类

用来定义当前文档显示的语言

en定义当前文档显示的语言
zh-CN定义语言为中文

简单来说，定义en就是英文网页，定义为zh-CN就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成ch-CN的文档也可以显示英文

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

7.HTML常用标签

7.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构变得更清晰

7.2 标题标签

-

重要

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即

-

<h1>我是一级标题</h1>

单词head的缩写，意为头部、标题

标签语义：作为标题使用，并且一句重要性递减

特点：

加了标题的文字会变得加粗，字号也会依次变大
一个标题独占一行

案例

<body>标题标签<h1>标题标签</h1><h1>标题一共六级选，</h1><h2>文字加粗一行显。</h2><h3>由大到小依次减，</h3><h4>从重到轻随之变。</h4><h5>语法规范书写后，</h5><h6>具体效果刷新见。</h6></body>

7.3 段落和换行标签（重要）

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签</P>

单词parafraph 的缩写，意为段落

标签语义：可以把HTML文档分割成若干段落

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙

案例

<body><p>6月10日，小米汽车副总裁李肖爽通过微博发布严正声明，明确表示相关内容为恶意造谣。尽管iOS 26采用了全新的液态玻璃设计，但是当你打开控制中心后，由于iOS 26测试版的背景高斯模糊不够深，系统图标和控制中心图标文字叠加在了一起，导致可读性很差。不少博主喊话苹果，希望尽快修复。</p><p>李肖爽在微博发文辟谣称，近日有大量小号在各平台广泛散播事故图片，并用尽话术污名化培训项目，甚至不惜捏造伤亡的谣言，严重误导公众，性质极其恶劣，对此将启动法律程序，追究造谣者法律责任。</p><p>随后，小米集团公关部总经理王化发文称：昨日我们已经全部完成取证，并已启动法律程序，追究造谣者法律责任！</p><p>随后，小米集团公关部总经理王化发文称：昨日我们已经全部完成取证，并已启动法律程序，追究造谣者法律责任！</p>
</body>

在HTML中，一个段落中的我脑子会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

单词break的缩写，意为打断、换行

标签语义：强制换行

特点：

是一个单标签
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

<body><p>6月10日，<br />小米汽车副总裁李肖爽通过微博发布严正声明，明确表示相关内容为恶意造谣。尽管iOS 26采用了全新的液态玻璃设计，但是当你打开控制中心后，由于iOS 26测试版的背景高斯模糊不够深，系统图标和控制中心图标文字叠加在了一起，导致可读性很差。不少博主喊话苹果，希望尽快修复。</p><p>李肖爽在微博发文辟谣称，近日有大量小号在各平台广泛散播事故图片，并用尽话术污名化培训项目，甚至不惜捏造伤亡的谣言，严重误导公众，性质极其恶劣，对此将启动法律程序，追究造谣者法律责任。</p><p>随后，小米集团公关部总经理王化发文称：昨日我们已经全部完成取证，并已启动法律程序，追究造谣者法律责任！</p><p>随后，小米集团公关部总经理王化发文称：昨日我们已经全部完成取证，并已启动法律程序，追究造谣者法律责任！</p>
</body>

7.5 和标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的
<dev>这是头部</div>
<span></今日价格span>

dev是division的缩写，表示分割，分区。span意为跨度、跨距

<body><div>我是一个div标签我一个人单独占一行</div>123<div>我是一个div标签我一个人单独占一行</div>123
</body>

特点：

标签用来布局，但是现在一行只能放一个div.大盒子
span标签用来布局，一行上可以多个span 小盒子

7.6 图像标签和路径(重点)

图像标签

在HTMl标签中，标签用于定义HTML页面中的图像

 <img src="图像URL" alt="">

单词image的缩写，意为图像

src是img标签的必须属性，用于指定图像文件的路径和文件名

所谓属性：简单理解就是属于这个图像标签的特性

<body><h1>图像标签的使用</h1><img src="image.jpg" alt=""></body>

<body><h1>图像标签的使用</h1><img src="image.jpg" alt=""><h1>alt 替换文本 图像显示不出来的时候用文字替换：</h1><img src="image1.jpg" alt="这是一张千与千寻的图片"><h1>title 鼠标放在图片显示的文字</h1><img src="image.jpg" alt="这是一张千与千寻的图片" title="这是千与千寻"><h1>width 给图像设定宽度</h1><img src="image.jpg" alt="这是一张千与千寻的图片" title="这是千与千寻" width="500"><h1>height 给图像设定高度</h1>//既设置宽度 又设置高度 会使图片宽高不协调<img src="image.jpg" alt="这是一张千与千寻的图片" title="这是千与千寻"  width="500" height="100"><h1>border 给图像设定边框</h1><img src="image.jpg" alt="这是一张千与千寻的图片" title="这是千与千寻" width="500" border = "15">
</body>