投稿
  1. 极客之音首页
  2. 前端开发

HTML基础__1

小半 • • 前端开发 • 阅读 305

导读：本篇文章讲解 HTML基础__1，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

一、什么是HTML

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

  （1）超文本：—超越文本格式【文字性质的数据】

         HTML可以显示操作文字性质数据，也可以操作图片,视频,声音…

  （2）标记：—标签–我们在使用HTML显示操作数据的时候，使用的都是一个一个独立的标记来控制html中的内容。还有一些其他的标记语言 比如:xml。

二、HTML的作用？

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

三、常见的html的开发工具

   （1）记事本编写

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

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

<html>
	<head>
		<title>one</title>
	</head>
	<body>
		<h1>这是使用记事本编辑的第网页</h1>
	</body>
</html>

        步骤3:保存

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

        步骤5:在浏览器中运行的到页面

HTML基础__1

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

   （2）HBuilderX编写 

        步骤1:下载HBuilderX  https://www.dcloud.io/hbuilderx.html

HTML基础__1

HTML基础__1

         下载好的“HBuilderX.2.9.3.20201014.zip”

        步骤二：安装—在指定文件夹中直接解压缩就可以了

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

         步骤三：找到HBuilderX.exe文件—右键—发送到桌面快捷方式。

HTML基础__1

        步骤四：创建新的网页文件

               a.打开HBuilderX—关闭欢迎页面

HTML基础__1

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

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

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

HTML基础__1

                c.编辑内容，Ctrl+S保存并运行到浏览器上 （找到文件的保存位置双击当前文件，也可以右键打开）

   （3）VS Code编写

        步骤一：下载VS Code Visual Studio Code – Code Editing. Redefined

HTML基础__1 HTML基础__1

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

        步骤三：运行VSCode        HTML基础__1

         步骤四：文件–>新建文件–>Ctrl+S

HTML基础__1

         步骤五：编辑代码

<!DOCTYPE html>
<html>
    <head>
        <title>two</title>
    </head>
    <body>
        <h1>这是VSCode工具编写的html</h1>
    </body>
</html>

        步骤六：运行html

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

HTML基础__1

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

        首先点击扩展（也就是四个小方格），在搜索栏内输入 Open。下载安装open in browser，点击 install,就可以了。

HTML基础__1

 注意：我们安装后的vs code是英文版本需要下载编辑工具汉化

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

HTML基础__1

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

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

        Notepad++：http://www.html.cn/tool/edit/2.html

        Sublime Text：http://www.html.cn/tool/edit/6.html

        WebStorm:https://www.html.cn/tool/edit/8.html

        HBuilderX: https://www.dcloud.io/hbuilderx.html

        VS Code：https://code.visualstudio.com/

 四、浏览器

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

        （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 语法的事件而重新排版。

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

HTML基础__1

 五、html的文件结构

        记事本编写的html文件

<html>
	<head>
		<title>one</title>
	</head>
	<body>
		<h1>这是使用记事本编辑的第网页</h1>
	</body>
</html>

        HBuilderX编写的html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是HBuilderX编写的html文件</h1>
	</body>
</html>

        VSCode编写的html文件

<!DOCTYPE html>
<html>
    <head>
        <title>two</title>
    </head>
    <body>
        <h1>这是VSCode工具编写的html</h1>
    </body>
</html>

上面方式中都有公共的内容：<html></html>  /  <head></head>  / <body></body>

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

        <html></html>—就相当于整个网页，在这个网页中

        <head></head>—网页头部部分，<body></body>—网页身体部分

        HTML基础__1

 六、html中标记

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

        1.标记不能自己创造发明

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

                例如 <h1>这是VSCode工具编写的html</h1>  —  内容的标题标记分为以下三部分：

                     <h1> —  开始标记

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

                     </h1> — 结束标记

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

                例如:<meta charset=”utf-8″>

七、HTML结构汇中具体标记的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是HBuilderX编写的html文件</h1>
	</body>
</html>

1.<!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>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>  —  是html4.01版本声明

2.<html></html>—–双标记，整个网页

3.<head></head>—-双标记，网页头部部分，为浏览器运行html文件提供附加信息的，既然是附件信息，那么设置在<head></head>中的内容自然要对用户免疫【<title></title>除外】。

4.<meta charset=”utf-8″>—设置设置当前网页的字符变量是utf-8，防止中文在网页中乱码显示【最后是在所有网页中将这一句化设置上】

5.<title></title>—设置当前网页的标题

6.<body></body>—网页身体部分,使用我们制作网页的主要操作区域，因为body中的元素是对用户可见的。

7.<h1></h1>—-网页中内容的标题。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79877.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！