HTML详解-1 Hello World

最新推荐文章于 2024-01-19 10:38:13 发布

萌杰尔

最新推荐文章于 2024-01-19 10:38:13 发布

阅读量996

点赞数 9

分类专栏：网站开发 HTML 文章标签： html html5

本文链接：https://blog.csdn.net/mengerZhang/article/details/116495334

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

网站开发

5 篇文章 0 订阅

订阅专栏

网站开发基础之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

网页的基本结构

structure of web page

那么，我们开始讲解代码

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

标签就是由 ‘<’ 和 ‘>’ 括起来的内容，标签是构成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就是一倍，相当于默认

<title>Hello, World</title>

title标签，用于给网站指定标题，标题位于网页的标签栏，这里我指定了标题为Hello, World

title

<body>
    Hello, World
</body>

body标签，我们称之为主体标签/身体标签，一般用于放置让用户直接看到的控件
我在这里放了Hello, World，那么这句话就会显示在网页的可见区域内

body
这就是本节所讲的内容了，HTML的本质就是放置标签，各位小伙伴可以尝试把各种标签放置在不同的位置，注意观察页面的变化哦，祝大家学的开心

欢迎各位小伙伴加入我的微信群

WeChat Group

萌杰尔

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML详解-1 Hello World

网站开发基础我们每天都会接触不同的网站，比较常用的百度，哔哩哔哩，还有不太常用的各种工具类网站，但是网站是如何实现的呢，从现在开始我将带着大家一步步了解。小提示：一个动态网站的实现，需要考虑网站的内容，网站的排版布局，还有对该网站数据的处理HTMLHTML，又叫超文本标记语言，用来对网站的基本内容进行描述的语言第一个HTML页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫