HTML5&CSS3基础：HTML的简介、标记、属性（1）_标记与属性的区别与联系-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45336315/article/details/110181216

该篇文章主要对HTML的标记和属性进行一个初步介绍，让大家对网页的结构有个初步了解，其实html与css基础的学习，就是在学习一个个的标记和具有的属性，再根据属性值搭建整个网页的布局与修饰网页显示内容的样式。

历篇文章目录

点击访问历篇文章

第二节：HTML的简介、标记、属性

前言

这是我们这篇文章的内容，可以看出主要内容还是标记，标签的属性会在后面的文章仔细介绍，大家可以根据思维导图的结构进行浏览文章。

因分支有点多，截图没法全截，思维导图没有全部展开，有需要的可自行下载。

下载链接：https://download.youkuaiyun.com/download/weixin_45336315/13203788

网盘链接：https://pan.baidu.com/s/1HbyofOEqrbd065aPJR0tXQ
提取码：mck9

在这里插入图片描述

一、HTML简介

html（Hypertext Markup Language）:超文本标记语言
(1)、负责网页三要素的结构。
(2)、html使用标记(标签)的形式来描述网页中的文本、图片、声音等内容。
(3)、超文本：由于文本中包含了所谓的“超链接”。
超链接将网站与网页以及各种网页元素连接起来，构成了丰富多彩的Web页面

二、HTML文档组成

我们知道一些零件要想构成一件作品，必须按照一定的规则去组成它，类似乐高玩具。我们学习语言也会有它的规则也就是格式，HTML文档便由一个个的标记按照它的格式组成的。标记也可以称为网页的属性，而标记也有着自己的属性。

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
如：
1.标签写在了根元素的外部
2.p元素中嵌套了块元素
3.根元素中出现了除和以外的子元素

1. 标记(标签)

带有"< >"符号的元素被称为HTML标记，浏览器要将文本渲染，则需要通过标记来怎么渲染，这时只要给不同的文本内容添加相应的标记即可。

1.1 类别

(1)、双标记(体标记)
由开始和结束两个标记符组成的标记。

• 格式：
<标记名>内容</标记名>
<标记名>称为开始标记，</标记名>为了区分加了个反斜杠，被称为结束标记，中间则是标记的内容。
• 例：<html>...</html>

(2)、单标记(空标记、自结束标记)
只有开始标记没有结束标记

• 格式：<标记名>或<标记名/>
• 例：<img>或<img/> 推荐前一种写法，方便点。

(3)、块元素(block element)
• 特征：在页面中独占一行
• 作用：在网页中一般通过块元素对页面进行布局
• 例：<div>块元素</div>、<p>块元素</p>

(4)、行内元素(inline element)
• 特征：在页面中不会独占一行
• 作用：行内元素主要用来包裹文字
• 例：<span>行内元素</span>

一般情况下会在块元素中放入行内元素，而不会在行内元素中放入块元素。
块元素中基本上什么都能放。
p标记中不能放任何的块元素，它仅包含文本内容。

1.2 基本标记

html文档基本结构组成标记

(1)、<!DOCTYPE>文档声明
从W3C制定的规范中，文档声明并不是一个标记，只是长的像标记而已

• 介绍：位于文档的最前面，用来告诉浏览器当前网页的版本。
• 版本：
HTML 超文本标记语言(第一版)
HTML 2.0
HTML 3.2
HTML 4.0
XHTML (过度版本)
HTML 5 (目前使用版本)
用法：<!doctype html>或<!DOCTYPE HTML> html5的文档声明,不区分大小写

(2)、<html></html>根标记
<html>标记着文档的开始，</html>标记着文档的结束，在它们之间是文档的头部和主体。
也可以统称为其它标签的祖标签。

• 介绍：在<!DOCTYPE>标记后面，用于告诉浏览器自身是个HTML文档。
• 用法：<html lang="en">...</html>
lang=language,告诉浏览器网页使用的语言，en=English、zh=Chinese。
lang属性也可以不写。

(3)、<head></head>头部标记
• 介绍：用来定义HTML文档头部信息，紧跟在标记后面，主要用来封装其他位于文档头部的标记。
例如<meta>、<title>、<link>及<style>等标记，用来描述文档的标题、作者以及其它文档的关系。
• 用法：<head><meta charset="UTF-8"></head>

(4)、<body></body>主体标记

• 介绍：定义HTML文档要显示的内容，网页中所看到的内容都写在<body></body>标记内。
例如浏览器中网页显示的所有文本、图像、音频和视频等信息都必须位于<body></body>标记内。<body></body>标记中的信息才是最终展示给用户看的。
• 用法：<body>网页内容</body>

1.3 头部相关标记

(1)、<title>网页标题</title>标记

• 介绍：用来设置网页的标题，在浏览器的顶部标签页，会显示设置的网页标题。
网页标题标记必须位于头部标记内，一个HTML文档只能含有一对<title>网页标题</title>标记

• 用法：<title>网页标题名称</title>

(2)、<meta/>定义页面信息标记
主要用于设置网页中的一些元数据，元数据不是给用户看的。

• 介绍：定义页面的信息，可重复出现在头部标记中。
标记本身不包括任何内容，主要搜索引擎提供网页的关键字、作者姓名、内容描述等。

• 语法格式：<meta name="名称" content="值"/>
为搜索引擎提供信息，其中name属性提供搜索内容名称，content属性提供对应的搜索内容值。

• 标记应用：
  1）设置网页关键字：<meta name="keywords" content="斜键仙，HTML,标记，属性等"/>
  keywords，用于定义搜索内容名称为网页关键字，content属性的值用于定义关键字的具体内容。
  关键字可设置多个用“，”隔开，用于搜索引擎查找相关内容网页。

2）设置网页描述：<meta name="descripation" content="斜键仙的博客"/>

descripation 定义搜索内容名称为网页描述
content定义具体内容
网站的描述会显示在搜索引擎的搜索结果中。

3）设置字符集：<meta charset="utf-8">
避免网页出现乱码问题

  4）<meta http-equiv="名称" content="值"/>
  http-equiv/content：设置服务器发送给浏览器的HTTP头部信息，为浏览器提供对应的参数值。
  默认发送<meta http-equiv="Content-Type" content="text/html"/>,通知浏览器发送的文件类型是HTML。

  5）设置网页作者：<meta name="author" content="斜键仙"/>
  author定义网页作者
  content定义作者名称

6）设置页面自动刷新与跳转：<meta http-equiv="refresh" content="10 ; url=http://www.baidu.com"/>
定义某个页面10秒后跳转到百度搜索。

(3)、<link>引用外部文件标记
在后面CSS再详细介绍该标记的属性

• 介绍：在头部标记中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件。
• 语法格式：<link 属性=“属性值”/>
• 用法：<link rel="stylesheet" href="外部文件路径">

(4)、<style></style>内嵌样式标记
• 介绍：该标记用于为HTML文档定义样式信息，位于头部标记中。
• 语法格式：<style 属性=“属性值”>

<head>
    <!-- 设置字符编码 -->
    <meta charset="UTF-8">
    <!-- 设置网页关键字 -->
    <meta name="keywords" content="斜键仙，HTML,标记，属性等"/>
    <!-- 设置网页描述 -->
    <meta name="descripation" content="斜键仙的博客"/>
    <!-- 设置网页标题 -->
    <title>HTML的简介、标记、属性</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/city_list.css">
    <style>设置样式</style>
</head>

1.3 语义化标记

在网页中HTML是负责网页的结构，所以在使用html标签时，应该关注的标签的语义，而不是样式。可以理解为该标签起什么作用，在结构中扮演什么样的角色。

1.3.1 文本格式化标记

(1)、<hn>标题</hn>标记
为了使网页内容更具有语义化，经常会在页面中用到标题标记，HTML提供了6个等级的标题。

• 介绍：
1）n的值可取1-6，<h1>~<h6>重要性逐级递减。
2）当你在搜索引擎搜索内容时，会自动检索网页中的标题与其匹配。
3）重要的内容标题，一般选用<h1>或<h2>，h1的重要性在网页中仅次于<title>标签，是搜索引擎检索信息时一个重要的标准。
网页一般情况下标题标签只会使用到h1-h3，h4~h6很少用。

(2)、<hgroup></hgroup>标题组标记
介绍：用来为标题分组，可以将一组相关的标题放入到hgroup中。
例：<hgroup> <h2>回乡偶书二首</h2> <h3>其一</h3> </hgroup>

(3)、<em></em>与<i></i>字体倾斜标记
介绍：表示语音语调的一个加重，em发音的意思，标记的字体会带点倾斜。

(4)、<strong></strong>和<b></b>字体加粗标记
介绍：表示强调重要内容！标记的内容会加粗。

(5)、<s></s>和<del></del>标记
介绍：文字以加删除线方式显示。

(6)、<u></u>和<ins></ins>标记
介绍：文字以加下划线方式显示

(7)、<u></u>和<ins></ins>标记
介绍：文字以加下划线方式显示

(8)、<br>与<hr>标记
介绍：<br>用来表示换行，<hr>表示一条直线。

(9)、<blockquote></blockquote> 长引用标记
介绍：表示一个长引用，通常用来引用一段文字，例如博客开头那段话。

(10)、<q></q> 短引用标记
介绍：表示一个短引用，通常可以用来引用名言警句。

(11)、<p></p>段落标记
要将网页中的文字有条理地显示出来，离不开段落标记，如同我们平时写文章一样。

• 介绍：通过段落标记整个网页也可以分为若干个段落。<p>是个块元素。
在页面中独占一行的元素称之为块元素(block element)。