认识HTML及HTML标签

最新推荐文章于 2022-08-02 21:45:53 发布

小婷学编程

最新推荐文章于 2022-08-02 21:45:53 发布

阅读量184

点赞数

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

本文链接：https://blog.csdn.net/xiaoting_0926/article/details/126006023

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是HTML标签

1、HTML:

HTML称为超文本标记语言，英文名称为Hyper Text Markup Langguage。意思是用各种各样的标签组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。超文本即比普通文本厉害。

超文本：

普通人 vs 超人（比普通的人厉害）

普通文本 vs 超文本(比普通的文本厉害)

普通人能做到的超人都能做到，但超人能做到的普通人不一定能做到，同理普通文本能做到的超人能做得到，但超文本能做得到的，普通文本不一定能做得到。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记：

标记=标签

标签：<html> <body> <head> 由尖括号包围起来的关键词（包的词都是有特殊含义的，即关键词）

分类：双标记标签/封闭类型标签（由整个开始和结束组成的） <p></p>

单标记标签/非封闭类型标签（自己把自己结束） <br/>

语言：HTML是一个描述网页的语言，通过HTML解析后可以产生一个页面。

总结：学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。

2、HTML的作用：

学习HTML就是学习各种各样的标签，HTML将代码解析成不同的页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。

二、HTML文档标准结构：

<html>
        <head>
        </head>
        <body>
                this is my first html...
        </body>
</html>

1、html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

2、head标签

里面放的是页面的配置信息。

head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

<title>、<meta>、<link>、<style>、 <script>、 <base>。

应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。

文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。

3、body标签

里面放的就是页面上展示出来的内容。

body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。

4、head中可用标签

head标签中放入：页面的配置信息

head标签中可以加入： <title>、<meta>、<link>、<style>、 <script>、 <base>。

4.1title标签

（1）未在title标签中添加内容时。

（2）当在title标签中输入内容时，网页上方就会出现相应的内容，这个内容称为标题（注：倘若标题中有中文显示乱码时，应向head标签中添加<meta charset="UTF-8">，设置页码的编码，防止乱码）。

代码如下

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>hello（你好）</title>
        </head>
        <body>
                this is my html...
        </body>
</html>

运行后如下

4.2meta标签

（1）<meta charset="UTF-8">

meta：标签

charset="UTF-8"：属性，以键值对的形式给出，相当于告诉浏览器用"UTF-8"来解析HTML文档

charset：属性名

"UTF-8"：属性值

其中<meta charset="UTF-8">只是简写的，这里大家可以了解一下繁写的模式

作用：设置编码格式。

右键html文件-属性可以看到HTMl使用的格式是utf-8，可以看出文件使用utf-8来写的，如果不指定用utf-8，编码格式可能会用其他的格式来解析，就会出现乱码的格式，所以这里我们必须得统一编码的格式才能保证我们的文字不会出现乱码的情况，解决乱码问题

（2）<meta http-equiv="refresh" content="3;https://www.baidu.com" />

refresh：对页面进行刷新

3：时间，3秒

https://www.baidu.com:百度网址

作用：进行页面刷新效果

(3)<meta name="author" content="xiaoting;123123@qq.com" />

name="author":作者信息属性

content="xiaoting;123123@qq.com"：作者的具体信息

作用：显示页面作者信息，在页面上不会显示，但是在网页中右键查看源代码便能显示出当前的作者

（4）<meta name="keywords" content="head中的标签；html学习" />

name="keywords"：关键字属性

content="head中的标签；html学习"：关键字的内容

作用：设置页面搜索关键字，别人可以通过content里面的关键字在网络上搜索到你的网页

（5）<meta name="description" content="head标签详情页" />

name="description"：页面描述属性

content="head标签详情页"：页面描述内容

4.3link标签

rel="shortcut icon"：为网页标题加图标

href="https://www.baidu.com/favicon.ico"：图标链接的地址

type="image/x-icon"：表示链接的类型为图片

1.代码块如下

<title>hello</title>
<!--设置页面的编码，防止乱码现象
利用meta标签，
charset="utf-8" 这是属性，以键值对的形式给出 k=v a=b
告诉浏览器用utf-8来解析这个html文档
-->
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="refresh" content="3;https://www.baidu.com" />
<meta name="author" content="xiaoting;123123@qq.com" />
<meta name="keywords" content="head中的标签；html学习" />
<meta name="description" content="马士兵教育详情页" />
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />

由于body中标签较多，将放入下篇文章进行分享

小婷学编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
认识HTML及HTML标签

body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。右键html文件-属性可以看到HTMl使用的格式是utf-8，可以看出文件使用utf-8来写的，如果不指定用utf-8，编码格式可能会用其他的格式来解析，就会出现乱码的格式，所以这里我们必须得统一编码的格式才能保证我们的文字不会出现乱码的情况，解决乱码问题。文档的头部经常会包含一些标签，用来告诉浏览器关于文档的附加信息。...
复制链接

扫一扫