高效入门html5（一）

全栈O-Jay

已于 2022-02-12 22:03:14 修改

阅读量229

点赞数 1

分类专栏：前端文章标签： html5 html 前端

于 2022-02-12 14:44:23 首次发布

本文链接：https://blog.csdn.net/weixin_45116099/article/details/122895276

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

引言

html是web前端开发的三剑客之一（html、css、JavaScript），html负责网页内容框架，css负责网页美化，JS负责网页逻辑。
你现在看到的网页是怎么来的？
你在本地输入了一个域名，回车，经过DNS解析为ip地址后，与远端服务器进行tcp连接，连接后本地与远端服务器通过http协议发送和传输数据，服务器会给本地发送一个html文件，里面描述了整个网页的实现内容，本地通过浏览器打开html文件（里面包含css、js），你就看到眼前的网页了。
我们要学的就是这个负责网页显示的html，超文本标记语言，超文本意味着它不只是能传输文本，还能通过语言传输图片、动画、视频、声音等等。

正文

在开始前我建议初学者下载一个notepad++来编辑你的.html文件就可以，稍微熟练了之后可以用vscode或hbuilder开发。浏览器我推荐Google。
如果懒得下载，可以登录这个网站在线html编译。
html由一个个标签< ></ >组成，标签之间的就是内容，标签决定了整个页面的框架。下面我们来看看一个最简单的“hello world”代码：

<!DOCTYPE HTML>  <!--声明是html文档-->
<html>
	<head>       <!--头部-->
		<meta charset="UTF-8"/>
		<title>第一个网页</title>
	</head>
	
	<body>       <!--内容-->
		<h1>hello world</h1>
		<p>hello</p>
	</body>
</html>

把这个代码复制进你的记事本（.txt）后改后缀名为.html，再用浏览器打开，就会有一个hello world的页面啦！
下面逐一解释一下这个代码，<html> </html>之间放html代码，<head> </head>之间放标题、描述、图片或引用其他文件，<body> </body>之间放页面内容。head和body是页面最基本的框架，body里面还会大框架套着许多小框架。

html的注释为 <!- -注释内容- ->，比较独特
<meta /> 是为数不多的单标签（一般的标签都是双标签，两个包着内容），用于描述文件信息，<meta charset=“UTF-8”/>为了转换文本为utf-8格式
<title>定义网页的标题
<h1>、<h2>、<h3>…为第一、第二、第三级题目
<p>为段落

怎样，在页面显示想要的内容就是这么简单。除了以上的标签，常用标签还有一下：