一. HTML基础介绍

最新推荐文章于 2024-07-14 12:57:13 发布

HJHO

最新推荐文章于 2024-07-14 12:57:13 发布

阅读量111

点赞数 1

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120228776

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 什么是HTML?

HTML 即超文本标记语言 (HyperText Markup Language)。
HTML 不是一种变成语言，是一种标记语言。
标记语言是一套标记标签 (markup tag)。
HTML 使用标记标签来描述网页。

超文本 → 超越文本格式【文字性质的数据】
HTML可以显示操作文字性质数据，也可以操作图片,视频,声音...
标记 → 标签--我们在使用HTML显示操作数据的时候，使用的都是一个一个独立的标记。

2. HTML的作用

制作网页
目前几乎所有的软件操作界面基本都可以使用网页来代替，因此制作网页的深层含义就是可以用来制作软件界面（移动app,客户端..等等）。

3.HTML运行环境

浏览器是HTML的运行环境

4. 浏览器种类

浏览器的种类很多但是主流的**内核**只有四种，不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。

Trident 内核

代表产品为 Internet Explorer，又称其为 IE 内核。Trident（又称为 MSHTML），是微软开发的一种排版引擎。使用 Trident 渲染引擎的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯 TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser 和 KKman 等。

Gecko 内核

代表作品为 Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器Firefox、Netscape6 至 9。

WebKit 内核

代表作品有 Safari、Chrome。WebKit 是一个开源项目，包含了来自 KDE 项目和苹果公司的一些组件，主要用于 Mac OS 系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。

Presto 内核

代表作品 Opera。Presto 是由 Opera Software 开发的浏览器排版引擎，供 Opera 7.0 及以上使用。它取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎，包括加入动态功能，例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。

【不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。所以后期需要兼容处理】

5.html文件结构

html基本结构

<!DOCTYPE html>
<html> 
    <head> 
        <!-- 头部区域 -->
        <meta charset="utf-8">
        <title> 标题 </title>
    </head>
    <body> <!-- 内容体 -->
        <h1>这是HBuilderX编写的html文件</h1>
    </body>
</html>

图解:👇

6.html中标记

html是超文本标记语言，它提供了制作网页的一组标记制作网页的一组标记。【标签===标记】
标记不能自我发明创建
绝大部分的标记都是有三部组成:

例：👇

<h1>这是VSCode工具编写的html</h1> ：内容的标题标记内容的标题标记

开始标记   :    <h1>
文本内容   :    这是VSCode工具编写的html
结束标记   :    </h1>

也有一些单标记【只有开头，没有文本内容和结束标记】

7.具体标记的使用

以下面代码为例 👇

<!DOCTYPE html>
<html> 
	<head> 
		<!-- 头部区域 -->
		<meta charset="utf-8">
		<title> 标题 </title>
	</head>
	<body> <!-- 内容体 -->
		<h1>这是HBuilderX编写的html文件</h1>
	</body>
</html>

标签	说明
<!DOCTYPE html>	是html5版本声明
<html> </html>	双标记，整个网页网页的跟变标签
<head> </head>	双标记，网页头部部分，为浏览器运行html文件提供附加信息的，既然是附件信息，那么设置在<head> </head>中的内容自然要对用户免疫【<title> </title>除外】。
<meta charset=“utf-8”>	设置当前网页的字符变量是utf-8，防止中文在网页中乱码显示【最后是在所有网页中将这一句化设置上】
<title> </title>	设置当前网页的标题
<body> </body>	网页身体部分,使用我们制作网页的主要操作区域，因为body中的元素是对用户可见的
<h1> </h1>	网页中内容的标题

扩展内容

<!DOCTYPE html> --- html声明【用来告知 Web 浏览器页面使用了哪种 HTML 版本】，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

从初期的网络诞生后，已经出现了许多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

<!DOCTYPE html> : 是html5版本声明

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> / <!DOCTYPE HTML> / <!doctype html> / <!Doctype Html><!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> ：是html4.01版本声明

无奈源于不够强大

拾荒人⚪

HJHO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一. HTML基础介绍

目录2. HTML的作用3.HTML运行环境4. 浏览器种类5.html文件结构6.html中标记7.具体标记的使用扩展内容 HTML 即超文本标记语言 (HyperText Markup Language)。 HTML 不是一种变成语言，是一种标记语言。标记语言是一套标记标签 (markup tag)。 HTML 使用标记标签来描述网页。超文本→ 超越文本格式【文字性质的数据】HTML可以显示操作文字...
复制链接

扫一扫