??作者简介：大家好，我是渴望知识储备自己的一名在校大学生

??个人主页：的csdn博客

??系列专栏：HTML专栏

??推荐一款模拟面试刷题神器??：点击跳转进入网站

文章目录

一、HTML入门

HTML的基本骨架

HTML标签分类

单标签

双标签

总结

HTML标签关系

HTML开发者工具

二、HTML标签

HTML标签的语义化

为什么要有语义化标签

排版标签

标题标签

段落标签

水平线标签

换行标签

div和span标签

pre标签

---

引言

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

一、HTML入门

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

HTML的基本骨架

    


    HTML入门


1
2
3
4
5
6
7
8

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骨架的构成 解释上文没有说明的

    
    
    
    


    


1
2
3
4
5
6
7
8
9
10
11
12

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

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

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

HTML骨架的快速生成

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

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

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

HTML标签分类

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

单标签

<标签名 />

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

双标签

<标签名> 内容

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

总结

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

属性=属性名+属性值

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

HTML标签关系

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

嵌套关系 （父子关系）

  
1

并列关系（兄弟关系）

1
2

总结：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个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样式

为什么要有语义化标签

1. 方便代码阅读和维护。

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

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

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

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

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

排版标签

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

标题标签

单词缩写：head 头部，标题

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

、

、

、

、

和

，没有等后面的标题

    
    
    
    


    
我是标题
    
我是标题
    
我是标题
    
我是标题
    
我是标题
    
我是标题
    我是标题


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

其基本格式语法如下：

 标题文本 
1

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

段落标签

单词缩写：paragraph 段落

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

 我是段落 
1

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

    
我是段落1
    
我是段落2

1
2
3
4

水平线标签

单词缩写：horizontal 横线

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

---

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

 也是单标签


    
我是段落1
    

    
我是段落2

1
2
3
4
5
6
7

换行标签

单词缩写：break 打断，换行

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

    
我是段落1
    内容1 内容2 内容3
    内容1 

    内容2 

    内容3 


1
2
3
4
5
6
7
8
9

div和span标签

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

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

span 跨度，跨距，范围

语法格式如下：

 我是div 
   我是span 
1

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

pre标签

预格式化文本元素

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

  
    
      var i = 2;
      if(i){
        console.log(i);
      }
    
  
  
  

    var i = 2;
    if(i){
      console.log(i);
    }
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

??HTML的学习还是要以多练习为主，想要练习HTML的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是

免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看

个人总结：

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

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

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦