HTML（一）---【基础】-CSDN博客

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/137053471

零.前言：

本文章对于HTML的基础知识处理的十分细节，适合从头学习的初学者，亦或是想要提升基础的前端工程师。

1.什么是HTML？

HTML是：“超文本标签语言”（Hyper Text Markup Language）

HTML不是一种编程语言，而是一种“标记语言”

HTML使用标记标签（元素）来描述网页。

2.什么是XHTML？

XHTML是HTML更严谨和更纯净的版本。

3.什么是HTML5？

HTML5是HTML的下一代版本。

4.HTML标签

HTML标签（元素）是由“尖括号”所包围起来的关键词，比如<html>。

HTML标签分为：“单标签”跟“双标签”。

双标签有：“开始标签”（开放标签）和“结束标签”（闭合标签）。

结束标签需要在“最前方加一个/”。

例如：<br>、<hr>、<input>都是单标签。

<p></p>、<html></html>都是双标签。

5.元素、属性

在双标签中间的内容叫做：“元素”，而在开始标签当中的内容叫做：“属性”。

例如：

<p>我是一个笨蛋</p>其中，"我是一个笨蛋"就是一个元素。

而元素可以是标签，这时也叫作元素

例如：

<html><p>我真的不是笨蛋</p></html>

其中<html>中有一个元素，是：“<p>我真的不是笨蛋</p>”

而<p>中有一个元素，是：“我真的不是笨蛋”

而属性，只能在开始标签当中，不能在结束标签当中！

例如：<input type="text">

type="text"就是一个属性。

而属性以：“键:值”对的形式出现，多个属性之间用空格隔开。

一.<DOCTYPE>

1.作用：

定义文档信息，用来向浏览器传递这是一个HTML5文件。

（ps：在当今的主流浏览器中，即使不声明<DOCTYPE html>，浏览器仍然可以正确识别，不过这并不是一个好习惯！）

2.声明方式：

<!DOCTYPE html>

3.更古老的版本

在XTML 4.0.1版本中，声明需要引用DTD（文档类型定义）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4.注意

值得注意的是，不同的HTML版本声明方式不一样，且所包含的HTML元素也不一样！！

二.<html>

1.定义

<html>标签表示HTML文档的根（根元素），用来表示文档中HTML的开始。

<html>标签是所有其他HTML元素的容器，除了<DOCTYPE>。

2.作用

<html>和</html>标签限定了文档的开始点和结束点，在它们之间是文档的“头部”(<head>)和“身体”(<body>)。

3.注意

应该在<html>中始终包含(lang属性)，用来声明网页的语言。

例如：

<html lang="en"> </html>

三.<head>

1.定义

<head>标签是“元数据”(关于数据的数据)的容器，元数据是有关HTML的数据，元数据不会被显示。

2.作用

可在<head>标签中定义多个元素，用来：“定义文档标题”、“字符集”、“样式”、“脚本”和其他元数据。

3.可放置的元素

<title>(必须有)、<style>、<base>、<link>、<meta>、<script>、<noscript>

对于以上标签，我们将在后续的章节中挨个讨论。

四.<title>

1.定义：

定义了：浏览器工具栏中的标题、添加到收藏页中的标题、在搜索引擎结果中显示标题。

对于下面这个网页：

如果扒开这个页面的html文档，那么它的<title>一定是"写文章-CSDN创作中心"，这是一个工具栏标题。

正如我们所料：

2.作用

显示网页名字

3.注意

一个HTML文档只能有一个<title>元素。

五.<body>

1.定义

<body>用来盛放html文档的数据(内容)，而<head>用来盛放html文档的元数据（数据的数据）。

2.作用

<body>包含了HTML的所有内容：“段落”、“图像”、“超链接”、“”表格、“列表”等等。

3.注意

一个html文档只能有一个<body>标签。

六.<h1> to <h6>

1.定义

从<h1>到<h6>分别代表了六个下级标题，例如<h1>是一级标题，<h3>是三级标题。

2.作用

提供标题式布局。

3.注意

尽量不用放置多个<h1>主标题，或者跳过<h1>标题直接使用<h2>标题，应该从高到低逐级使用。

4.效果

例如下面代码：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

结果：

七.<p>

1.定义：

段落标签，用来指定一段段落。

2.作用：

显示一段文字，例如：

<p>
在源代码中，
这一段
包含很多行，
但浏览器
忽略它。
</p>

结果：

在代码中的换行，在html文档呈现结果的时候并不展示出来，如果需要让html结果也呈现换行效果，可以尝试使用每一行一个<p>标签，或者在<p>标签内镶嵌<br>换行标签。

3.注意：

使用<p>的时候，html默认会在<p>前方隐式的添加一个“<br>换行符”，这个<br>在代码中不会显示，但会在html页面中作为效果展示出来。

在<p>中如果有多个连续的空格，那么在html文档呈现效果中，将只有一个空格被显示出来。即：“多个连续空格默认为一个空格”。

<p>我真的不是     一个大笨蛋，不，你是一个 大笨蛋</p>

效果：

八.<br>

1.定义

用来向html文档中插入换行符，类似于编程语言中的"\n"。

2.作用

换行符

3.效果

<p>
离离原上草，<br>
一岁一枯荣。<br>
野火烧不尽，<br>
春风吹又生。<br>
远芳侵古道，<br>
晴翠接荒城。<br>
又送王孙去，<br>
萋萋满别情。<br>
</p>

<p><em>- 唐 白居易</em></p>

结果：

九.<hr>

1.定义

用来分割主题或者内容

2.作用

绘制一个水平分隔符

3.效果

    <p>
        离离原上草，<br>
        一岁一枯荣。<br>
        野火烧不尽，<br>
        春风吹又生。<br>
        远芳侵古道，<br>
        晴翠接荒城。<br>
        又送王孙去，<br>
        萋萋满别情。<br>
        </p>
        <hr>
        <p>- 唐 白居易</p>

结果：

可以清晰的看到，出现了一道水平分隔符。

十.

1.定义

在源代码中插入注释，注释不会在浏览器中显示。

2.作用

插入注释

3.注意

使用注释可以“隐藏”JavaScript文段。

不过要在结尾加入：“//”，以防JavaScript执行“-->”。

<script type="text/javascript">
<!--
function displayMsg() {
  alert("Hello World!")
}
//-->
</script>

4.效果

<p>我是一个大笨蛋</p>
<!--真的吗？？-->

结果：

可以看到：“真的吗？？”文段并没有在浏览器中展示出来。

十一.空白的HTML

我们来看一个没有做过任何添加和修改的HTML代码，也就是最初始的状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

从上至下，分别为：<DOCTYPE>标签、<html>标签、<head>标签、<body>标签。

在实际开发中，我们一定要严格按照这个模板来实现，不能修改对应的位置！！