HTML基础

最新推荐文章于 2024-08-02 17:02:46 发布

山i

最新推荐文章于 2024-08-02 17:02:46 发布

阅读量176

点赞数 1

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

本文链接：https://blog.csdn.net/zxcWh/article/details/120227004

版权

HTML基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念及其作用，详细讲解了使用记事本、HBuilderX和VSCode创建HTML网页的步骤。重点阐述了HTML文件结构、标记的使用，以及常见浏览器内核的差异。同时，提到了HTML版本的演变，如HTML5，并展示了不同编辑工具的优缺点和运行环境——浏览器的重要性。

摘要由CSDN通过智能技术生成

1.什么是HTML？

HTML 指的是超文本标记语言: HyperText Markup Language

超文本---超越文本格式【文字性质的数据】

2.HTML的作用？

制作网页

目前几乎所有的软件操作界面都可以使用网页来代替，因此制作网页的深层含义就是可以用来制作软件界面

3.常见的开发工具

*记事本

步骤1:在指定的位置下创建一个新的记事本文件

步骤2:打开记事本文件编辑html代码

<html>
    <head>
        <title>第一</title>
    </head>

    <body>
        <h1>这是使用记事本编辑的网页</h1>
    </body>

</html>

步骤3:保存

步骤4：修改记事本文件名称[后缀名{.html / .htm}]

步骤5:在浏览器中运行

缺点:我们使用记事本编写html文件是，没有提示，使得编辑的效率降低，所以我们不推荐使用记事本编写html文件。

下面是一些常用的编辑工具

Notepad++：

Sublime Text：Sublime Text免费下载_2019最新 - html中文网

WebStorm:WebStorm免费下载_2019最新 - html中文网

HBuilderX: HBuilderX-高效极客技巧

VS Code：Visual Studio Code - Code Editing. Redefined

*HBuilder X

下载好的“HBuilderX.2.9.3.20201014.zip”

2，安装---在指定文件夹中直接解压缩就可以了

注意:不要在用中文命名的文件夹下解压，中文会乱码

找到HBuilderX.exe文件---右键---发送到桌面快捷方式。

3，创建新的网页文件

打开HBuilderX---关闭欢迎页面

在指定的，目录下创建一个保存文件的文件夹，注意不要使用中文。

文件---新建---html文件

修改html文件的字体大小【Ctrl+Shift+[+]---放大字体 Ctrl+Shift+[-]---缩小字体】

修改主题工具-- 主题----自己选择

编辑代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二</title>
	</head>
	<body>
		<h1>这是HBuilder X 编辑的网页</h1>
	</body>
</html>

Ctrl+S --- 保存

4，运行

4.1运行--- 运行到浏览器----选择自己的浏览器

4.2找到文件的保存位置双击当前文件，也可以右键打开

*VS Code

1.下载 Visual Studio Code - Code Editing. Redefined

2.双击运行安装文件，按步骤安装，安装时修改安装目录即可

3.运行VSCode

4.文件-->新建文件-->Ctrl+S

编辑代码

<!DOCTYPE html>
<html>
    <head>
        <title>第三</title>
    </head>
    <body>
        <h1>这是VSCode工具编写的html网页</h1>
    </body>
</html>

5.运行html

选中当前文件右键——Open in Default Browser

我们安装好的VS Code有时可能在运行的时候找不到Open in Default Browser选项，这是怎么办？

首先点击扩展（也就是四个小方格），在搜索栏内输入 Open。

下载安装open in browser，点击 install,就可以了。

VS Code编辑工具汉化

首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。

下载安装简体中文，点击 install ，在右下方会出现 restart 点击就好。

再重启 vs 后就会变成简体中文。

无论我们使用的是记事本，还是VSCode这种有提示的编辑工具，最终创建的html文件都需要在浏览器中才能运行。浏览器是html的运行环境。

4.浏览器

浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础

上，添加不同的功能构成。

1，Trident 内核

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

2，Gecko 内核

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

3，WebKit 内核

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

4，Presto 内核

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

不同的浏览器可能因为采用的内核不同，网页也会呈现出不同的效果。

5.html的文件结构

记事本编写的html文件

<html>

<head>

</head>

<body>

<h1>这是使用记事本编辑的第网页</h1>

</body>

</html>

HBuilderX编写的html文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>这是HBuilderX编写的html文件</h1>

</body>

</html>

VSCode编写的html文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>这是VSCode工具编写的html</h1>

</body>

</html>

上面方式中都有公共的内容

通过上面的代码我们可以了解到一个html网页有2个部分组成:

<html></html>---就相当于整个网页，在这个网页中 <head></head>---网页头部部分，<body></body>---网页身体部分

6.html中标记

因为html是超文本标记语言，所以它提供了制作网页的一组标记

制作网页的一组标记

1，标记不能自我发明创建

2，绝大部分的标记都是有三部组成:

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

<h1> -- 开始标记

这是VSCode工具编写的html --- 文本内容

</h1> -- 结束标记

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

例如:<meta charset="utf-8">

7.具体标记的使用

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>第二</title>
   </head>
   <body>
       <h1>这是HBuilder X 编辑的网页</h1>
   </body>
</html>

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

从初期的网络诞生后，已经出现了许多HTML版本: