这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

HTML学习笔记

HTML

• HTML用来干什么
• HTML是如何变成我们看到的页面的
• HTML基本格式与各部分功能
• HTML的语法与各种功能
• HTML搭建页面的内容划分
• 语义化

HTML用来干什么

HTML作为前端三件套之一，HTML负责编辑与呈现网页展示给用户的内容。HTML全称HyperText Markup Language，HyperText代表超文本，及图片、标题、链接、表格等非文本内容，Markup Language意味标记语言，及HTML中各种标签，e.g.p标签、img标签、a标签等。

HTML是如何变成我们看到的页面的

将HTML从代码变成我们所看到的页面离不开服务器的功劳，当我们在打开页面的时候，服务器将解析HTML文件将HTML文件转变为DOM树，从而完成对HTML的解析，DOM树体现了HTML的结构层次，及一个HTML document应该由html标签内的内容构成，而在html标签中又有head标签和body标签，其中head标签中又应该包含meta标签和title标签，其中meta标签用来表明页面元数据，e.g.UTF-8等编码样式，而title标签就顾名思义为标题，及页面标题“page title”。在body标签中，有我们将在下部分学到的HTML中表示各种功能的标签，e.g.p标签、h标签等。

stateDiagram-v2
Documrnt --> html
html --> head
head --> meta
head --> title

html --> body
body --> h1
body --> p

了解了HTML的解析过程与DOM树的部分结构，我们便对HTML document的样式有了一定的了解

HTML基本格式与各部分功能

我们在上一节中了解到一个HTML document中都有head标签和body标签下的内容构成，所以一个HTML document的结构应该为

HTML的语法各种功能

• 语法
  1.标签和属性不区分大小写，推荐小写
  2.空标签可以不闭合，比如 input、meta
  3.属性值推荐用双引号包裹
  4.某些属性值可以省略，比如 required、readonly
• 各种功能

  • 段落（h标签）

  • 段落（p标签）

  • 列表
    有序列表（ol、li标签）
    无序列表（ul、li标签）
    定义列表（dl、dt、dd标签）
    //dt为标题，dd为描述，一个标题可以对应多个描述

  • 链接（a标签）
    //href 超链接
//target="_blank"跳转至新页面

  • 多媒体
    图片（img标签）
    音频（audio标签）
    视频（video标签）

  • 输入（input标签）

  • 选择 label标签——多选、单选
    select标签——下拉选择

  • 引用
    1.长引用

    • blockquote 2.短引用
    • 具体章节 cite
    • 具体内容 q
    • 代码 code

    3.强调

    • 重要 strong
    • 强调 em

HTML搭建页面的内容划分

1. header

• nav

2. main

• article

3. aside
4. footer

语义化

• 内容

1. HTML中的元素、属性及属性值都有某些含义
2. 开发者应该遵循语义来编写，e.g.有序列表用oi；无序列表用ui；lang属性表示内容所使用的语言

• 优点

  1. 代码可读性
  2. 可维护性
  3. 搜索引擎优化
  4. 提升无障碍性

• 做法

  1. 了解每个标签和属性的含义
  2. 思考什么标签最适合描述这个内容
  3. 不使用可视化工具生成代码

好啦，以上就是憨憨的前端之旅的第一站——HTML，虽然是一门前端的基础语言，也是需要打好基础，多加思考，加深对语言的理解，是程序简洁明了，完善自己代码的语义化。

这是我学习这节课写下的的HTML document

最后希望大家的HTML document可以越来越简洁明了。