【HTML】筑基篇

专栏目录：HTML专栏

引言

如果你准备开始接触前端，开始前端学习之路，一般先学习html+css，这里我们先给自己定下一个小目标，先学HTML再学CSS。加油~

一、HTML入门

HTML（英文 Hyper Text-Markup Language的缩写）中文译为“超文本标签(标记)语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

HTML的基本骨架

<html>
<head>
    <title>HTML</title>
</head>
<body>
    HTML入门
</body>
</html>

html标签: 是所有html中标签的一个根节点

head标签: 用于存放:title、meta、base、style、script、link，head标签中必须要设置title

title标签: 让页面拥有一个属于自己的标题

body标签: 页面的主体部分用于存放所有的html标签：p,h,a,b,u,i,,s,em,del,ins,strong,img等

这里我们拿 vscode 编译器举例说明HTML骨架的构成解释上文没有说明的

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

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的html标准是HTML5 (HTML5有一些新特性后期会讲)。不写文档声明，将导致浏览器进入怪异渲染模式。

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

<meta>

文档的元数据：附加信息；charset:指定网页内容编码。

HTML骨架的快速生成

在编译器页面中输入以下命令即可生成：

html:5 然后按下Tab键即可生成HTML骨架

! 然后按下Tab键即可生成HTML骨架

HTML标签分类

在HTML标签中，带有 “< >” 符号的元素被称为HTML标签，如上面提到的<html>、<head>、<body>都是HTML标签，所谓标签就是放在 “< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。

单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整底描述某个功能的标签。比如：

双标签

<标签名> 内容 </标签名>

该语法中 “<标签名>” 表示该标签的开始，一般称为 “开始标签(start tag)”，“</标签名>” 表示该标签的作用结束，一般称为 “结束标签(end tag)”。和开始标签相比，结束标签只是在前面加了一个关闭符 “/” 。比如：<body> 我是body </body>

总结

元素(标签，标记)=起始标记(begin tag)+结束标记(end tag)+元素内容+元素属性

属性=属性名+属性值

属性的分类：-局部属性：某些元素的特有的属性 -全局属性：所有元素通用

HTML标签关系

HTML标签的相互关系就分为两种：

嵌套关系（父子关系）

<head> <title></title> </head>

并列关系（兄弟关系）

<head></head>
<body></body>

总结：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

HTML开发者工具

市面上前端普遍的开发工具有以下几种

Dreamweaver、sublime、Webstrom、HBuilder、Visual Studio Code(微软发布[免费/开源/跨平台]的现代化代码编辑器)

我为什么要单独给Visual Studio Code加注释呢？因为我是推荐大家去使用Vscode的，一个字牛，不仅运行代码速度快，插件多，而且我最喜欢的是因为它的轻量级。第二个推荐的就是Webstorm了，功能齐全，唯一不舒服的就是比不上Vscode的速度，代码运行起来有些臃肿，不过也算极好的了，当然写代码最重要的不是工具的好坏，找到适合你的工具才是最好的。

二、HTML标签

首先HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了，不会在给标签指定样式，HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以去 MDN 查下手册就可以了。

HTML标签的语义化

所谓标签语义化，就是指标签的含义。

1.每一个HTML元素都有具体的含义

a元素：超链接、p元素：段落、 h1元素：一级标题

2.所有元素与展示效果无关

元素展示到页面的效果应该有css决定，因为浏览器带有默认的css样式

为什么要有语义化标签

方便代码阅读和维护。

同时让浏览器或者网络爬虫可以很好的解析，从而更好分析其中的内容。

使用语义化标签会具有更好的搜索引擎优化。

核心：合适的地方给一个最为合适的标签。

语义是否良好：当我们去掉CSS之后，网页结构依然井然有序，并且有良好的可读性。

遵循的原则：先确定语义的HTML，再选择合适的CSS

排版标签

排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签

单词缩写：head 头部，标题

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

、
、
、
、
和
，没有<h7>等后面的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>
    <h7>我是标题</h7>
</body>
</html>

标题标签含义：作为标题使用，并且依据重要性递减

其基本格式语法如下：

<hn> 标题文本 </hn>

注意：h1标签因为重要，尽量少用，一般h1都是给logo使用

段落标签

单词缩写：paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p> 我是段落 </p>

p元素是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大下自动换行。

<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
</body>

水平线标签

单词缩写：horizontal 横线

在网页中常常看到一些水平线将段落与段落之间分开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片后实现，也可以简单的通过标记来完成，

就是创建横跨网页水平线的标记其基本格式如下：

<hr /> 也是单标签

<body>
    <p>我是段落1</p>
    <hr />
    <p>我是段落2</p>
</body>

换行标签

单词缩写：break 打断，换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签。

<br />

<body>
    <p>我是段落1</p>
    内容1 内容2 内容3
    内容1 <br />
    内容2 <br />
    内容3 <br />
</body>

div和span标签

div和span两个标签是没有语义的，是我们网页布局主要的两个盒子

div就是 division的缩写，分割，分区的意思其实有很多用div来组合的网页

span 跨度，跨距，范围

语法格式如下：

<div> 我是div </div>  <span> 我是span </span>

以前：某些元素在显示时会独占一行（快级元素），而某些元素不会（行内元素）,到了HTML5中已经弃用这种说法，这个只做了解。

pre标签

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格，而pre标签例外，在pre元素中的内容不会出现空白折叠pre元素内容出现的内容，会按照源代码格式显示到页面上。该元素通常用于在网页中显示一些代码，pre元素功能的本质：它有一个默认的css属性。显示代码时，通常外面套code元素，code元素表示代码区域。

<body>
  <pre>
    <code style="white-space: pre;">
      var i = 2;
      if(i){
        console.log(i);
      }
    </code>
  </pre>
  <!-- 两者之间做个比较 -->
  <div>
    var i = 2;
    if(i){
      console.log(i);
    }
  </div>
</body>

个人总结：

一开始写博客的时候没怎么想过写html和css，因为我觉得这些都是死的东西，没什么可写的，后来我才明白，容易忽视的东西恰恰是最致命的，比方说一个人，你在怎么描述跳舞的姿势多么优美，没有人去展示，没有外衣去装饰，都是空虚的昙花一现罢了，所以我就决定好好把html和css再进行一次复习总结，以博客的形式展现给大家。

第一篇虽然写的东西都比较浅显，但我觉得越是简单的知识，越应该了解它的本质，这样的学习才能更好的为将来克服难题打下基础。那么现在，开始学习吧。

标签：前端 html

本文转载自: https://blog.csdn.net/qq_53123067/article/details/125560732
版权归原作者 亦世凡华、 所有，如有侵权，请联系我们删除。

一、HTML入门

HTML的基本骨架

HTML标签分类

单标签

双标签

总结

HTML标签关系

HTML开发者工具

二、HTML标签

HTML标签的语义化

为什么要有语义化标签

排版标签

标题标签

、

、

、

、

和

，没有<h7>等后面的标题

段落标签

水平线标签

换行标签

div和span标签

pre标签

发表评论

“【HTML】筑基篇”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航