初级篇 1 - HTML（HyperText Markup Language）超文本标记语言 - 注意要点 - 标签 - 空元素 - Html、CSS 与 JavaScript 的关系介绍

沐修

已于 2022-05-23 16:26:18 修改

阅读量520

点赞数

分类专栏： Html 文章标签： html 前端经验分享学习

于 2022-05-19 11:22:34 首次发布

本文链接：https://blog.csdn.net/qq_42701659/article/details/124857790

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习目标

Html
CSS
JavaScript

补充说明：

Html 结构标准：决定你是否有个好天然身体

CSS 表现标准：决定你是否打扮的美丽外观

JavaScript 行为标准：决定你是否有吸引人的行为

建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐

HTML和CSS是两种完全不同的语言，目前学的是结构，就只写HTML标签。

html中的父元素、子元素、兄弟元素是什么？

<html>

<body>
<p>我是一段文字</p>
<p>我也是一段文字</p>
</body>

</html>

html元素定义了整个html文档，这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。而这个html文档的元素内容是另一个html元素<body> 。

body元素定义了html文档的主体部分，相对于body来说，html就是body的父元素，body就是html的子元素。

同理，上例代码中，p元素相对于body来说，body就是p的父元素，p就是body的子元素。

而两个p元素互相没有包含的关系，那么这两个p元素就是同级关系，也就是兄弟元素。

了解字符编码格式

字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文包括6763个汉字
BIG5 繁体中文港澳台等用
GBK包含全部中文字符是GB2312的扩展，加入对繁体字BIG5的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

一、简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

二、HTML 的注意要点

1、 HTML文档的后缀名和 Html文档内一切标签都不区分大小写 - 推荐小写标签

.html
.htm
以上两种后缀名没有区别，都可以使用。

HTML文件内容是不区分大小写的，除非特别设置了相关配置，但是强烈推荐必须必须使用小写的标签，这是以后万维网联盟（W3C）要强制要求的。

2、 HTML 文件的标签布局声明 - 全身 - 头 - 身 - 尾

特别特别注意，笔者这里提到的尾部<footer>是 HTML 5 加入的内容，HTML 是没有尾部的标签<footer>

<!DOCTYPE html> <!-- 声明 -->
<html>  <!-- 全身 -->
	<!-- 头 -->
	<head>
	<title>
	  屏幕最上面的标题
	</title>
	</head>
	<!-- 身 -->
	<body>

	</body>

</html>

<!DOCTYPE html> 声明为 HTML5 文档

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

<title> 元素描述了文档的标题

<body> 元素包含了可见的页面内容 - 收藏栏下面的可见内容

3、什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

4、HTML 标签 - 开放标签< > - 闭合标签</ > - 空元素 (没有闭合标签) < >

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签 < >，第二个标签是结束标签 </ >

开始和结束标签也被称为开放标签和闭合标签

但是也还有一种空元素，那就是没有闭合标签，只有开放标签的 HTML元素 < >

4.1、什么组成了HTML 元素 - 三部分（正常元素） / 一部分（空元素）

开始标签	元素内容	结束标签
`<p>`	这是一个段落	`</p>`
`<a href="default.htm">`	这是一个链接	`</a>`
`<br>`	换行，空元素	没有结束标签

想要空元素结束，只能在开始标签就在后面加斜杠 / 如<br/>，而且长远考虑，空元素最好要加斜杠 /

空元素在开始标签 < >中进行关闭（以开始标签的结束< />而结束）

5、 Web 浏览器 - 不是编译器或解释器，而是标记器

Web浏览器（如谷歌、火狐浏览器等，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。

浏览器控制像素点，使其在某个像素点位置进行渲染，渲染引擎也是如此，所以我们可以将浏览器看作是一种渲染引擎，不过我们需要类似调动渲染引擎的手段 —— HTML 标记语言、CSS、JavaScript

6、HTML 版本

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

7、HTML文件的通用声明

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

<!DOCTYPE html>

8、Html 5 中文编码插入

在头部位置<head> </head> 标签内插入元数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面标题</title>
	</head>
	<body>
	
 
	</body>
</html>

9、关于 HTML 编辑器的选择 - Vs Code

VS Code 下载链接：https://code.visualstudio.com/

VS Code 怎样改成中文版？

首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。
点击 install ，下载安装简体中文，在右下方会出现 restart 点击就好。
再重启 vs 后就会变成简体中文。

10、HTML标签的语义化

有时候你学习 HTML 时，会发觉怎么感觉好像有好多重复作用的标签，比如 <strong> 和 <b> 标签，这两个标签在页面上显示的效果都一样，但是为什么还要弄一个同样效果的标签出来，这就是HTML标签的语义化的意义。

10.1、为什么要有语义化标签

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好：当我们去掉 CSS 之后，网页结构依然组织有序，并且有良好的可读性。

通俗点讲，就是一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。

遵循的原则：先确定语义的 HTML ，再选合适的 CSS。

三、对常用 Html 标签进行记录

理解结构化标签与 CSS 渲染的分工合作

其实 Html 作为结构标签，最好的做法是将渲染交给 CSS 来做，而 Html 只要做好网页布局，就行了。

没( 熟记)的随机认识一下就行了

1、标题 h 标签( 熟记)

单词缩写： head 头部. 标题 title 文档标题

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

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

2、段落 p 标签( 熟记)

单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

<p>  </p>

3、换行 br 标签(熟记)

单词缩写： break 打断 ,换行

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

<br />

4、排版标签 div、span (核心熟记)

<div> 、<span>、<table>
排版标签主要和 CSS 搭配使用，显示网页结构的标签，是网页布局最常用的标签。<table>标签是古老的排版方式，现在已经不用了。

div span 是没有语义的是我们网页布局主要的2个盒子 css+div
div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。
span, 跨度，跨距；范围

这个 span 有时会作为属性，赋予一个跨越的作用，比如跨越多少列多少行，这几行几列的样式，会被 CSS 渲染。

5、文本格式化标签(熟记)

b i s u 只有使用，没有强调的意思 strong em del ins 语义更强烈

b 粗体标签(熟记)

<b>

i 斜体标签(熟记)

<i> 定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。
<i> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。

在没有其他适当语义的元素可以使用时，请使用 <i> 元素，如果看到有些不懂的 HTML 文件内应用该标签，大致可以被理解为这种作用。

u 下划线标签

注释：HTML5 规范建议开发者尽量使用其他元素替代 <u> 元素。

6、图像标签img (重点)

单词缩写： image 图像

<img src="图像URL" />

标签属性参数

alt （alternation 可替换文本）
src （source 图片源）

7、超链接标签(重点)

单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释锚, 铁锚的

水平线标签(认识)

单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

<hr/>

<hr/>是空元素，只有开始标签，没有闭合标签。

四、标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。

建议：尽量不使用 CSS的样式属性，使用外部链接样式，方便以后修改。

参考链接

学习链接

沐修

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初级篇 1 - HTML（HyperText Markup Language）超文本标记语言 - 注意要点 - 标签 - 空元素 - Html、CSS 与 JavaScript 的关系介绍

目录一、简介二、HTML 的注意要点1、HTML文档的后缀名和 Html文档内一切标签都不区分大小写 - 推荐小写标签2、HTML 文件的标签布局声明 - 全身 - 头 - 身 - 尾3 、什么是HTML?4、HTML 标签 - 开放标签< > - 闭合标签一、简介超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。注意：对
复制链接

扫一扫