W.T.的博客

Every day to be a little better

前端-HTML学习笔记01-认识HTML

发表于 更新于 分类于
本文字数： 3.9k 阅读时长 ≈ 4 分钟
认识网页和网站，认识HTML，认识，编写HTML元素的属性，注释

1. 认识网页和网站

  • 什么是网页

    • 网页的专业术语叫做 Web Page
    • 打开浏览器查看到的页面，是网络中的一“页”
    • 网页的内容可以非常丰富：包括文字、链接、图片、音乐、视频等等

  • 什么是网站

    • 网站是由多个网页组成的
    • 通常一个网站由N个网页组成(N >= 1)

1.1. 网页的显示过程

1.1.1. 用户角度

  1. 用户在浏览器输入一个网站
  2. 浏览器会找到对应的服务器地址，请求静态资源(可以存放在世界上任何一个地方)
  3. 服务器返回静态资源给浏览器
  4. 浏览器对静态资源进行解析和展示

1.1.2. 前端工程师

  1. 开发项目(HTML/CSS/JavaScript/Vue/React)
  2. 打包、部署项目到服务器里面

1.2. 服务器是什么

  • 日常生活接触到的基本都属于客户端、前端的内容

    • 比如浏览器、微信、QQ、小程序

  • 但是手机并不可能存放那么多的数据和资源

    • 比如用《网易云音乐》，音乐数据大部分都是存在“服务器”中的

  • 那么服务到底是什么

    • 服务器本质上也是一台类似于电脑一样的主机
    • 但是这个主机有几个特点
      • 二十四小时不关机(稳定运行)
      • 没有显示器
      • 一般装的是Linux操作系统(比如centos)

  • 目前公司大部分用的是云服务器(比如阿里云、腾讯云、华为云)

1.3. 世界上第一个网页

1.4. 网页的组成

  • 网页是由什么开发出来的

    • 阶段一：HTML元素
    • 阶段二：HTML元素 + CSS样式
    • 阶段三：HTML元素 + CSS样式 + JavaScript语言

  • 网页的组成

    • HTML：网页的内容结构 - 骨架
    • CSS：网页的视觉体验 - 装饰品
    • JavaScript：网页的交互处理 - 血肉

1.4.1. 网页源代码的角度

1.4.2. 网页开发的角度

2. 浏览器

  • 网页的组成部分：HTML + CSS + JavaScript
  • 通过浏览器将看起来枯燥的代码渲染成多彩的网页
  • 浏览器最核心的部分其实是 “浏览器内核”

2.1. 浏览器的渲染引擎

  • 浏览器最核心的部分是渲染引擎(Rendering Engine)，一般也称为“浏览器内核”
  • 负责解析网页语法，并渲染(显示)网页

2.2. 不同浏览器的内核

  • 常见的浏览器内核

    • Trident ( 三叉戟)：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
    • Gecko( 壁虎) ：Mozilla Firefox
    • Presto(急板乐曲) -> Blink (眨眼)：Opera
    • Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器(Android、iOS)
    • Webkit -> Blink ：Google Chrome

  • 不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同

3. 开发工具选择

  • 记事本可以开发一个网页吗？
    • 答案：可以
    • 但是有很多的缺点
      • 创建和管理文件不方便
      • 没有颜色标识/没有智能提示/无法调试程序
  • 专业的前端开发工具
    • WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
    • 智能提示、高亮识别、语法检测、集成环境、开发效率高
  • 推荐开发工具
    • Webstorm
      • 优点：集成开发工具，包罗万象
      • 缺点：重(占用系统资源多)，收费
    • VSCode
      • 优点：轻(相当于一个编辑器)，免费
      • 缺点：需要安装一些插件来辅助开发

4. VSCode工具安装

  • 安装：https://code.visualstudio.com/

  • 安装插件：右侧图标 Extensions，查找需要的插件(联网)

    • 中文插件：Chinese
    • 颜色主题：atom one dark
    • 文件夹图标：VSCode Great Icons
    • 在浏览器中打开网页：open in browser、Live Sever
    • 自动重命名标签：auto rename tag

  • VSCode的配置：【command+,】打开设置面板

    • Auto Save 自动保存

    • Font Size 修改代码字体大小

    • Word Wrap 代码自动换行

    • Render Whitespace 空格的渲染方式

    • Tab Size 代码缩进

      • 推荐2个空格(公司开发项目基本都是2个空格)

5. 认识HTML

  • 超文本标记语言（HyperText Markup Language，简称:HTML）

    • 专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述
    • 是一种用于创建网页的标准标记语言
    • HTML元素是构建网站的基石

  • 什么是标记语言(markup language )

    • 由无数个标记(标签、tag)组成
    • 是对某些内容进行特殊的标记，以供其他解释器识别处理
    • 比如使用<h2></h2>标记的文本会被识别为“标题”进行加粗、文字放大显示
    • 由标签和内容组成的称为元素(element)

  • 什么是超文本( HyperText )

    • 表示不仅仅可以插入普通的文本(Text)，还可以插入图片、音频、视频等内容
    • 还可以表示超链接(HyperLink)，从一个网页跳转到另一个网页

6. HTML文件的特点

6.1. 扩展名(后缀名)

  • HTML文件的拓展名是.htm/.html
  • 因历史遗留问题，Win95/Win98系统的文件拓展名不能超过3字符，所以使用.htm
  • 现在统一使用 .html

6.2. 结构

  • 网页类似于一篇文章

    • 每一页文章内容是有固定的结构的，如：开头，正文，落款等

    • 网页中也是存在固定的结构的，如：整体，头部，标题，主体

  • 网页中的固定结构是要通过特定的HTML标签进行描述

    1
    2
    3
    4
    5
    6
    7
    8
    <html>
      <head>
        <title>网页标题</title>
      </head>
      <body>
        网页的主体内容
      </body>
    </html>

7. 认识元素

  • HTML本质上是由一系列的元素(Element)构成

  • 什么是元素(Element)

    • 元素是网页的一部分
    • 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含

  • HTML有哪些元素

8. HTML语法规范

8.1. 元素的组成

  • 剖析一个HTML元素的组成

  • 这个元素的主要部分

    1. 开始标签(Opening tag)
      • 包含元素的名称(本例为 h2)，被左、右尖括号所包围
      • 表示元素从这里开始或者开始起作用 ——在本例中即标题由此开始
    2. 结束标签(Closing tag)
      • 与开始标签相似，只是其在元素名之前包含了一个斜杠
      • 表示元素的结尾 —— 在本例中即段落在此结束
      • 初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果
    3. 内容(Content)
    • 元素的内容，本例中就是所输入的标题本身
    1. 元素(Element)
      • 开始标签、结束标签与内容相结合，便是一个完整的元素

8.2. 元素的属性

  • 元素也可以拥有属性(Attribute)

  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中

  • 属性必须满足

    1. 属性写在 开始标签内部
    2. 标签上可以同时存在多个属性
    3. 属性之间以空格隔开
    4. 标签名与属性之间 必须以空格隔开
    5. 属性名称，后面跟着一个 = 号
    6. 一个属性值，由一对引号 "" 引起来
    7. 属性之间没有顺序之分

  • 创建一个超链接元素a

    1
    <a href="https://www.baidu.com" class="title">百度一下</a>

8.3. 属性的分类

  • 有些属性是公共的，每一个元素都可以设置
    • 比如class、id、title属性
  • 有些属性是元素特有的，不是每一个元素都可以设置
    • 比如meta元素的charset属性、img元素的alt属性等

8.4. 单标签元素 – 双标签元素

  • 双标签元素

    • html、body、head、h2、p、a元素

  • 单标签元素

    • br、img、hr、meta、input

  • 注意事项

    • HTML元素不区分大小写，但是推荐小写

8.5. 元素之间关系

8.5.1. 父子(嵌套)

某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套

1
2
3
4
5
6
7
<ul>
  <li>
    <div>
      <span>1</span>
    </div>
  </li>
</ul>

8.5.2. 兄弟(并列)

1
2
<head></head>
<body></body>

8.6. HTML的注释

  • 为什么需要注释
    • 随着学习的深入, 一个程序不再是几行代码就可以搞定的
    • 可能需要写出有上千行, 甚至上万行的程序
    • 某些代码完成某个功能后, 写的时候思路很清晰, 但是过段时间会出现忘记为什么这样写的情况, 这很正常
    • 协同开发
      • 在实际工作中, 一个项目通常是多人协作完成的，可能是几个或者十几个等等
      • 这个时候, 可能需要使用别人写出的代码功能, 别人也可能使用你的代码功能
      • 如果你的代码自己都看不懂了, 更何况你的同事呢?
  • 什么是注释
    • 简单来说，注释就是一段代码说明
    • <!-- 注释内容 -->
    • 注释是只给开发者看的，浏览器并不会把注释显示给用户看
  • 注释的意义
    • 帮助自己理清代码的思路, 方便以后进行查阅
    • 与别人合作开发时, 添加注释, 可以减少沟通成本(同事之间分模块开发)
    • 开发自己的框架时, 加入适当的注释, 方便别人使用和学习(开源精神)
    • 可以临时注释掉一段代码, 方便调试.
  • 注释快捷键：command + /(mac)，ctrl+/(win)
本文结束  感谢您的阅读