【3】HTML基础（1）——认识
【3】HTML基础（1）——认识
Hypertext Markup Language:超文本标记语言。用来制作网页的一种标记语言。
#目录
一、概念
二、功能
三、基本语法
（一）标签
（二）元素
（三）属性
一、概念
(一）HTML是网页的结构层；
前端三层： HTML（结构层）从语义的角度搭建网页、CSS（样式层）从美观的角度描述页面样式、JavaScript（行为层）从交互的角度描述页面行为。
（二）是一种纯文本格式的文件；
内部只能书写文字内容，不可添加图片、音频、视频等；dh
与之对比的是富文本文件，最常见的是.rtf文件，类似.doc文件，内部可以保存文本的样式、图片等。
★纯文本文件特点：
1.文件只能保存文本，文件相对较小，易于传输；
2.可以通过直接更改扩展名的方式更改保存格式；
3.可以使用任意的纯本文编辑器进行查看和编辑。
☆HTML、CSS、JS都是纯文本格式文件☆
（三）但是在网页中却呈现了包含文字之外的内容。
有赖于它本身的意义：
1.超文本（Hypertext）：
超级文本的缩写；就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序；
2.标记（Markup）：
也叫标签。有特殊的书写规范，写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。
例如html文件中代码显示：
<h1>今天好开心</h1>
<img src="C:\Users\86156\Desktop\kaixin.jpg">
<p>还写了博客</p>
实际网页中显示：
二、功能
（一）利用标记给普通的文本添加语义、描述超文本内容，搭建网页结构。
比如：我们常见的h1标签，它在网页中效果确实会让文字加粗加大、独占一行，但是它的功能应该准确来说是：负责给内部文字添加一级标题的语义。（不负责样式，样式由css负责）
★语义化网页的优势：
1.方便代码阅读和后期维护；
2.便于浏览器或是爬虫更好地解析网站内容；
3.使用语义化标签有利于SEO搜索引擎优化，提高网站排名。
三、基本语法
(一）HTML标签
1.标签名必须写在一对尖括号内部
如下（示例）：
<html></html>
<h1></h1>
2.标签分为单/双标签，双标签必须成对出现
如下（示例）：
<html></html>双标签
<h1></h1> 双标签
<p></p> 双标签
<br/>单标签
3.双标签包含开始和结束标签，结束标签必须写关闭符号/，单标签也需要进行自封闭书写。
★注意：在HTML5中，单标签可以不写关闭符号。
示例错误写法：
<html><html>
<br>(但此单标签的写法在html5中正确）
（二）HTML元素
1.指从开始标签到结束标签的所有内容；
HTML元素包括:开始标签、元素内容、结束标签 。
双标签内部包含的纯文本内容就是元素内容。
示例：
<p>这是一段纯文本内容</p>
★元素内容★
（1）可以是纯文本，也可以是其它HTML元素；
示例：
<div><p>这是一段纯文本内容</p></div>
这种情况，叫做“嵌套”。<div>标签元素内部嵌套了<p>标签元素。
（2）嵌套关系可以有多层；
<div><p>div元素内部嵌套p元素</p><h1>div内部嵌套h1元素<h1></div>
（3）单标签不能添加元素内容，可以称为空元素。
2.元素的特性：
（1）对空格、换行、缩进等形成的空白不敏感；
有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
例如:
<div><p>div元素内部嵌套p元素</p><h1>div内部嵌套h1元素<h1></div>`
等价于
<div>
<p>div元素内部嵌套p元素</p>
<h1>div内部嵌套h1元素</h1>
</div>
（2）空白折叠现象：
元素内容如果是文本，所有文字之间如果由空格、换行、缩进等空白字符，在浏览器加载时，连接在一起的空白会折叠成一个空格显示。
例如，代码：
<p>HTML中所有文字内容之间有多少空 格 都会被折叠
成一个空格
显示
</p>
浏览器显示
（三）HTML属性
HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息
1.书写位置:
必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。
例如：
<div class="kuai" ></div>
以上<div>标签有一属性class,其属性值自定义为kuai
<img class="tu">
以上<img>标签有一属性class,其属性值自定义为tu
2.属性包含：
(1)属性名（key)
(2)属性值（value)
★属性名与属性值之间的写法，通常被称为键值对写法。
html标签属性的键值对写法可以以公式表示为 k=“v”。
（补充：XHTML要求属性值必须写在双引号内部）
比如完整写在p标签中为：
<p k="v"></p>
3.一个标签内部可以设置多个不同的属性
属性和属性之间用空格进行分隔，每个属性的键值对写法都是k="v"
<p k="v" k="v" k="v"></p>
4.部分属性可以设置多个属性值
所有属性值都必须书写在同一对双引号中，值与值之间使用空格分隔。
<p k="v1 v2 v3"></p>
字节跳动公司氛围 545人发布