HTML详解-1 Hello World

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

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

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

HTML

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

第一个HTML页面


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

此时如果在浏览器中运行该网页,就会得到如下的结果
HTML详解-1 Hello World_第1张图片
浏览器中有一行Hello, World

网页的基本结构

HTML详解-1 Hello World_第2张图片

那么,我们开始讲解代码

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

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

举例
单标签

<br/>

双标签

<body>Helloworldbody>

第一行


这是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, Worldtitle>

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

HTML详解-1 Hello World_第3张图片

<body>
    Hello, World
body>

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

HTML详解-1 Hello World_第4张图片
这就是本节所讲的内容了,HTML的本质就是放置标签,各位小伙伴可以尝试把各种标签放置在不同的位置,注意观察页面的变化哦,祝大家学的开心

你可能感兴趣的:(网站开发,HTML,html,html5)