HTML详解-1 Hello World

Posted 2022-12-01 萌杰尔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML详解-1 Hello World相关的知识，希望对你有一定的参考价值。

网站开发基础之html详解-1 Hello World

我们每天都会接触不同的网站，比较常用的百度，哔哩哔哩，还有不太常用的各种工具类网站，但是网站是如何实现的呢，从现在开始我将带着大家一步步了解。

小提示：一个动态网站的实现，需要考虑网站的内容，网站的排版布局，还有对该网站数据的处理

HTML

HTML，又叫超文本标记语言，用来对网站的基本内容进行描述的语言

第一个HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World</title>
</head>
<body>
    Hello, World
</body>
</html>

此时如果在浏览器中运行该网页，就会得到如下的结果

浏览器中有一行Hello, World

网页的基本结构

那么，我们开始讲解代码

讲解代码之前，我需要讲一个小内容，那就是标签

标签就是由 ‘<’ 和 ‘>’ 括起来的内容，标签是构成HTML的基本结构，同时标签也被称为 ‘标记’ 或 ‘元素’
标签分为单标签和双标签，单标签独立存在，往往不需要内容，而双标签则成对存在，往往里面需要有内容，并且有开始也有结束

举例
单标签

<br/>

双标签

<body>Helloworld</body>

第一行

<!DOCTYPE html>

这是HTML5的标记，表示这是一个HTML5文件

第二行

<html lang="en">

</html>

不知道各位有没有发现，第二行和最后一行的内容非常相似，他们是一对双标签，所以我把他们俩放在一起显示给大家看了
这个标签表示HTML页面的开始和结束

第三行

<head>

</head>

第二行也有与其相似的，是的，你没看错，他也是一个双标签，head标签我们称为头部标签，一般用于写一些网站的基本信息/配置，比如网站的标题，网站的编码，网站的缩放等

在head标签里面

<meta charset="UTF-8">

meta标签，同时有一段charset=“UTF-8”，在HTML中这样的内容叫做属性，属性可以改变某些标签的样式与功能
meta主要用于记录网站的一些基础信息，加上了charset属性的meta标签用于描述该网站的编码

编码

在我们生活的世界中有很多语言（据百度知道网友回答，有5561种语言已被查明，还有约1400种语言不被承认），大多数语言都有自己的文字，我们的电脑上不可能安装所有的语言包，那么如何避免产生一些不必要的问题呢
解决办法就是编码，通过不同的编码为我们的网站设置不同的语言

常用编码如下

编码	描述
UTF-8	万国码，写网页的时候最常用的编码
GB2312	国标2312，里面包含了简体中文，繁体中文和大多数汉语系语言的文字，一般用于中国大陆、新加坡等地
Big5	大五码，包含繁体中文，主要用于中国台湾省和中国香港特别行政区等地

为了防止遇到乱码问题，我们尽量使用UTF-8（万国码）作为网页的编码

好了，我们继续看代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

嘿嘿，又是meta标签，这里有一个name属性和一个content属性
当name="viewport"时，该meta标签就用于描述该网页能看到的窗口区域
在content属性中，有width属性和initial-scale属性。width属性表示可见窗口区域的宽度，值device-width表示设备宽度，initial-scale属性表示初始缩放，1.0就是一倍，相当于默认