作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

从零开始学前端 - 1. HTML基础知识

  • 一、HTML 发展历史
  • 二、HTML 基本骨架
    • 1. 文档声明
    • 2. html 标签
    • 3. head 标签
      • 3.1 title 标签
      • 3.2 meta 标签
      • 3.3 style 标签
      • 3.4 link 标签
      • 3.5 script 标签
      • 3.6 title 标签
    • 4. body 标签
  • 三、HTML 注释
  • 四、HTML 基本语法
    • 1.空格、换行、缩进。
    • 2. 标签闭合原则
    • 3. 单标签
    • 4. 属性
    • 5. 标签嵌套原则
    • 6. 注释标签不可相互嵌套。
    • 7. 书写规范
    • 8.语义化原则
  • 五、常见浏览器及内核
  • 六、开发工具
    • 1. Visual Studio Code
    • 2. Sublime Text
    • 3. HBuilder
    • 4. WebStorm
    • 5. Notepad++

一、HTML 发展历史

点这里查看发展历史
       互联网及HTML的发展历史，在闲暇之余当成历史故事读一读就好，没必要强迫自己背下来，但一些关键内容还是需要记住，不然将来与别人谈起，怎么好意思说自己是从事互联网相关工作的。

二、HTML 基本骨架

如图所示，我们可以发现：一个HTML页面主要是由四个部分组成的。

1. 文档声明

<!DOCTYPE html>是一个文档声明，它并不是 HTML标签。它为浏览器提供一个声明，告知浏览器这是一个 HTML 页面以及 HTML 的版本，避免每个浏览器以各自不同的标准来解析。
       假设一个页面并未设置该声明，那么浏览器将按照 “怪异模式” 进行解析，只有设置了该声明之后，浏览器才会按照 “标准模式” 解析网页。

注：a) 怪异模式：BackCompat ，浏览器按照自己的标准来解析渲染页面。
       b) 标准模式：CSS1Compat，浏览器按照W3C的标准来解析渲染页面。

2. html 标签

<html></html> 标签限定了文档的开始点（）和结束点（），在它们之间是文档的头部和主体。在实际开发中，我们会常常看到以下几行代码：

 <html lang="en">

这行代码向浏览器表示该页面是 HTML ，并且语言为英文的网站，其 “lang” 是 “language”的缩写，语言的意思。 “en” 表示 english ，如果你的页面如果是中文页面，可将其改为 <html lang="zh">，zh 即表示中文。

 <html xmlns="http://www.w3.org/1999/xhtml">

xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。它的作用是告诉浏览器，当前页面按照 W3C 的 XHTML 标准。

3. head 标签

head 标签是网页的头部，以 <head> 开始，以 </head> 结束。它是所有头部元素的容器，通过其中元素来描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。一般来说，只有六个标签能放在 head 标签内：

3.1 title 标签

title 标签的作用就是定义页面的标题。

3.2 meta 标签

meta 标签一般用于定义页面的特殊信息，并不提供给用户观看。例如说页面的编码格式，目的是为了告诉浏览器解析时应该使用的编码格式，页面的关键字和描述信息，其目的是为了便于搜索引擎抓取相关信息；

meta 标签拥有很多的属性，但在实际开发PC端网页时，我们最常用到如下所示，也就是说，我们目前只需要记住以下几个属性即可，其他的属性暂时不用费心。

 <meta charset="UTF-8">  <!-- 定义页面的编码格式为 UTF-8 --><meta name="keywords" content="该页面的关键字"><!-- 定义页面的关键字 --><meta name="description" content="该页面的描述信息"><!-- 定义页面的描述信息 -->

注： UTF-8 包含全世界所有国家需要用到的字符， GBK 和 GB2312 主要用于汉字的编码。一般如果我们制作的网页的时候都会采用 UTF-8 的编码格式，如果打开网页出现乱码情况，基本都是因为未设定或者编码格式设置错误的问题。

3.3 style 标签

style 标签用于定义 HTML 元素的 CSS 样式，在实际工作中，我们经常使用 link 标签引入外部的 CSS 文件，所以对该标签不需要深入研究。

3.4 link 标签

link 标签用于引入外部 CSS 文件。

3.5 script 标签

script 标签内填写的是 JavaScript 代码，既可以在标签内直接填写，也可以引入外部的 JavaScript 文件。

3.6 title 标签

base 标签为页面上的所有的相对链接规定默认 URL 或默认目标。
       通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a> <img> <link> <form> 等标签中的 URL。
       在一个页面内，最多使用一个该标签。

4. body 标签

在一个页面中，head 标签表示的是页面的“头部”，其中的内容大部分是不可见的。而body 标签表示的是页面的身体，其中的内容则是用户可以直接看到的内容。接下来我们要学习的其他标签，都是位于 body 标签内部的。
       例如我们创建一个 html 文档，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>少年中国说</title>
</head>
<body><h1>少年中国说</h1><p>红日初升，其道大光。河出伏流，一泻汪洋。</p><p>潜龙腾渊，鳞爪飞扬。乳虎啸谷，百兽震惶。</p><p>鹰隼试翼，风尘翕张。奇花初胎，矞矞皇皇。</p><p>干将发硎，有作其芒。天戴其苍，地履其黄。</p><p>纵有千古，横有八荒。前途似海，来日方长。</p><p>美哉我少年中国，与天不老！</p><p>壮哉我中国少年，与国无疆！</p>
</body>
</html>

浏览器预览效果如下所示：

三、HTML 注释

<!---->被称为 HTML 注释，以 " <!-- " 开始，以 " - -> " 结束，在其中的内容并不会被浏览器显示到页面上。注释信息并不是给浏览器或者用户看的，而是面向开发人员。
       在实际开发中，一个页面的代码往往都是几百上千行的，而一个项目中，又拥有多个页面。这个时候，我们就需要用到注释来对关键的部分进行相应的解释或者标注。 注释的好处多多，比如说方便查找，也可以让同一个项目组的同事快速理解你的代码。
       如果没有注释，时间长了，自己都有可能看不懂自己过去写过的代码，特别是在团队开发中，如果同事来维护自己的项目时，由于没有注释的原因，往往会花大量的时间来理解代码。所以说：使用对代码注释是一个良好的习惯。

四、HTML 基本语法

1.空格、换行、缩进。

HTML 只在乎标签的嵌套结构和关系。谁嵌套了谁，谁被谁嵌套了。浏览器解析 HTML 文件时，会忽略掉换换行和缩进，并不影响页面的结构。也就是说，HTML 不是依靠缩进来表示嵌套的，而是看标签的包裹关系。但是，我们发现如果有良好的缩进，代码的可读性会更强，所以要求大家在开发时要有良好的书写习惯，正确缩进代码。
       但在项目上线，发布到服务器时，考虑节约服务器的存储空间和带宽，一般都会使用代码打包工具对完成的代码进行打包，对浏览器而言标签的层次依然清晰，只不过程序员不可读了。例如说百度首页的代码：

2. 标签闭合原则

所有标签都是放在 <> 尖括号里的，成对出现，且必须闭(开始&结束标签)。
例：<html></html>

3. 单标签

有些特殊标签没有相对应的标签，我们一般称为单标签、自闭合标签等。
例： <br/>

4. 属性

所有标签本身都具有一个或多个属性，写法：属性名=”属性值” 多个属性用空格隔开。
例：<meta charset="UTF-8"> charset 是属性名，UTF-8 是属性值。

5. 标签嵌套原则

在 HTML 中所有的标签都可以相互嵌套的，但嵌套要合理，且闭合时要严格按照嵌套顺序进行闭合。

6. 注释标签不可相互嵌套。

7. 书写规范

写标签时应该小写、属性值双引号、嵌套缩进。遵循代码清晰的原则，便于维护。

8.语义化原则

语义化，顾名思义，就是用相对应的、有一定语义的标签来表示 HTML 的结构，且 HTML本身就是标记语言。
注：语义化的优点：
        a) 增强可读性，对开发者更友好，在没有 CSS 的情况下也能较好地呈现网页的内容结构与代码结构，便于团队的开发和维护。
        b) 有利于 SEO ，可以让搜索引擎爬虫更好地获取到更多有效信息，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，有效提升网页的搜索量。
        c) 支持读屏软件，方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。

五、常见浏览器及内核

图标 名称 内核
谷歌浏览器 Chrome 以前是Webkit内核，现在是Blink内核
火狐浏览器 Firefox Gecko内核，俗称Firefox内核
苹果浏览器 Safari Webkit内核
IE浏览器 IE Trident内核，也是俗称的IE内核
欧朋浏览器 Opera 最初是自己的Presto内核，后来是Webkit，现在是Blink内核
edge浏览器 最初是 EdgeHtml 内核，现在换成了 chrome 内核

目前国内大部分浏览器均采用 IE + Chrome 双内核模式，在其基础上进行了相应的二次开发。例如说 360 浏览器，QQ 浏览器等。普通兼容模式使用 Trident 内核，急速模式使用 Chrome 内核。

六、开发工具

1. Visual Studio Code

  微软出厂的跨平台编辑器，完全免费。加载大文件几乎秒开，运行速度很快，拥有很多插件，且查找安装方便，如果只是编写前端代码的话，其对插件依赖较小，集成的功能基本上够用。debug 功能强大，在Nodejs调试中十分方便，也是作者一直使用的前端 IDE。

2. Sublime Text

  作者本人从来没有使用过 Sublime ，所以不多加介绍。听同事的简单介绍它是一款轻量、简洁的跨平台的编辑器。支持N多种语言，很多人都偏爱它。作为web学习者，我觉得不用在编辑器的选择上太费周章，选一款你中意的就行，一般不会有团队强求所有人使用一样的 IDE。

3. HBuilder

  国人自主开发的一块编辑器，中文界面，免费且提示功能强大，支持H5项目云打包，内置 mui 的项目模板，十分适合新手使用。可惜早年使用的时候运行较大项目时卡顿严重，不知道目前的优化程度如何，后续推出的 HBuilder X 也没有使用过。

4. WebStorm

  与 Java 开发神器 IntelliJ IDEA 师出同门也被成为 Web 前端的开发神器，集成了许多强大的功能，非常丰富，基本无须安装插件，可以自动保存代码，而且可以在整个项目中搜索代码，更改文件名时，也会友好的对你提示会对那些地方造成影响。
  但是因为集成的功能过于丰富，对电脑的要求也高。配置比较低的话，打开速度慢，打开大文件的速度也不尽人意。打开多个项目的话，内存占用会大幅上升。尽管如此，也从来没有造成过什么损失，最多只是重启一下。
  所以一般电脑上安装这个编辑器（开发使用），一般还要安装一个轻量级的编辑器（打开单个文件使用）作为辅助使用。
  最重要的一点是该编辑器收费，但是网上也有很多激活码和破解版。

5. Notepad++

  超轻量级的编辑器，每个程序员的电脑里都会装的编辑器，小巧高效。

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!

请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。

从零开始学前端 - 1. HTML基础知识相关推荐

  1. 零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】

    [前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...

  2. jquery选择器大于等于_从零开始学前端 30. JS选择器

    每篇文章纯属个人经验观点,如有错误疏漏欢迎指正 由于微信公众号对英文的排版十分困难 以获得更好的阅读体验类似于 CSS选择器,如果我们想要使用 JS 来对 HTML 页面中的元素实现一对一,一对多或者 ...

  3. 从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...

  4. 从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表单制作 - 今天你学习了吗?(CSS:Day05) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...

  5. 从零开始学前端： HTML框架和VS Code安装 --- 今天你学习了吗？（CSS：Day01）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 文章目录 从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 前言: 第一节课:整堂课主要是讲了HTML的框 ...

  6. 零基础可以学python吗-学Python需要什么基础知识?零基础可以学Python吗？

    学Python需要什么基础知识?一般来说,想要学Python最好具备一定的计算机专业知识,尤其是数学和英语不错的话,对学Python也有一定的帮助.但是零基础的学习者就不能学Python了吗?当然不是 ...

  7. 学python需要什么基础知识-学Python需要什么基础知识?零基础可以学Python吗？

    学Python需要什么基础知识?一般来说,想要学Python最好具备一定的计算机专业知识,尤其是数学和英语不错的话,对学Python也有一定的帮助.但是零基础的学习者就不能学Python了吗?当然不是 ...

  8. python适合零基础的人吗_学Python需要什么基础知识?零基础可以学Python吗？

    学Python需要什么基础知识?一般来说,想要学Python最好具备一定的计算机专业知识,尤其是数学和英语不错的话,对学Python也有一定的帮助.但是零基础的学习者就不能学Python了吗?当然不是 ...

  9. 从零开始学前端：if判断，for循环,，switch判断 --- 今天你学习了吗？（JS：Day4）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:中括号代替点操作,获取对象,自定义标签属性 - 今天你学习了吗?(JS:Day3) 文章目录 从零开始学前端 ...

最新文章

  1. AI 芯片的分类及技术
  2. windows下安装whl文件
  3. 图解SSL/TLS协议
  4. Java 多线程使用
  5. 全球与中国硬膜外托盘市场调研分析与“十四五”前景预测展望报告2021-2027年版
  6. 2.4、Android Studio使用主题编辑器设计主题
  7. ubuntu18重启vncserver_一看必会系列：ubuntu 18.10 安装vncserver
  8. P1601高精度加法
  9. NDK开发之数组操作
  10. linux c 键盘钩子,利用键盘钩子在Windows平台下捕获键盘动作 (转)
  11. 无人机螺旋桨测试-螺旋桨效率
  12. SKPlayer -- 一个超级简单好用的音乐插件+CSS+HTML+JS
  13. 机器学习_深度学习毕设题目汇总——运动活动动作
  14. 菜狗杯Web_我眼里只有$wp
  15. SpringBoot 集成 logBack
  16. Java Web基础
  17. BI项目实施为什么成功率那么低
  18. ead开局 华三inode_03 EAD用户接入-受控软件管理-新华三集团-H3C
  19. 数据结构和算法基本介绍和概念
  20. 视频压制参数设置详细说明（转）

热门文章

  1. 基于Spark的用户行为分析系统
  2. CES2020，到底发布了哪些高科技？
  3. CF765F Souvenirs（暴力、线段树）
  4. 中国各地特色商品大全
  5. jquery 访问手机摄像头_jQuery webcam plugin调用摄像头
  6. ICCV2019语义分割/UDA:ACE: Adapting to Changing Environments for Semantic SegmentationACE：适应变化环境下的语义分割
  7. 被遗忘的SEO基础知识
  8. 最狠的丞相李斯为何死在宦官赵高之手
  9. 湖盟知识—***、病毒、防火墙
  10. Java 实现 蓝桥杯 生兔子问题