2022-07-27 7978b079f3e87b28c65029e6d42c3211 99+ 15 分钟 2.3 k

HTML-1

1. HTML 简介

（1）HTML 概念

HTML 全名是超文本标记语言 (Hyper Text Markup Language) ，是专门用来描述网页的一种语言

HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

（2）HTML 版本

当下普遍使用的是 HTML5
HTML5 是最新的 HTML 标准，拥有许多令人激动的新特性，目前大多数主流浏览器都支持HTML5的大部分特性
下一个版本的 HTML 标准 —— HTML6 ，正在讨论中，也许不久之后 HTML6 就会面向广大开发者

（3）推荐编辑器

推荐使用 Visual Studio Code 软件进行前端web端的开发
VS code 官方下载链接

2. HTML 基本语法

（1）标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
HTML 标签对中的第一个标签是开始标签（start tag），第二个标签是结束标签（end tag）
开始和结束标签也被称为开放标签和闭合标签

1
2
3

<标签名></标签名>
如：
<html></html>

（2）元素

HTML 元素以开始标签起始，以结束标签终止
HTML 元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

1
2
3

<空元素/>
如：
<img/>

大多数 HTML 元素可以嵌套，即大多数 HTML 元素可以包含其他 HTML 元素， HTML 文档由相互嵌套的 HTML 元素构成

（3）属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性放置在开始标签内
属性总是以键-值对的形式出现，比如：name=”value”

1
2
3

<标签名 属性名="属性值"></标签名>
如：
<a href="http://www.baidu.com">This is a link</a>

（4）注释

HTML 注释使用  描述，注释内容放置于开始标签与结束标签之间

1	<!-- 这是一个HTML注释！ -->

（5）文档结构

以下是一个典型的 HTML 文档的结构

<!-- 文档声名，声名当前网页版本：区别是html、xml等文档类型 -->
<!DOCTYPE html>

<!-- html 根标签，网页中所有元素都写在根元素里边 -->
<html>

  <!-- head 是网页头部，head 中绝大多数内容不会在网页中直接出现，主要用于帮助浏览器和搜索引擎解析网页 -->
 <head>

    <!-- meta 一般用于设置网页元数据，这里 meta 用于设置网页字符集，避免乱码问题 -->
    <!-- 注意：对于中文网页需要使用 <meta charset="utf-8"> 声明为utf-8编码，否则会因为默认编码无法解析汉字出现乱码情况 -->
    <meta charset="utf-8" />

    <!-- title 中的内容会显示在浏览器标题栏中，搜索引擎会主要根据 title 判断网页主要内容 -->
    <title>网页标题</title>

  </head>

  <!-- body 是 html 的子元素，表示网页的主体，网页中所有可见内容都应该写在 body 里 -->
  <body>

    <!-- 这里写的是网页的主体内容 -->

  </body>

</html>

（6）字符实体

在 HTML 中，某些字符是预留的，比如在 HTML 中不能直接使用小于号（<）和大于号（>），这是因为浏览器会把小于号（<）和大于号（>）误认为标签

如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体，比如小于号（<）和大于号（>）可用< 和 >来表示从而正常显示

浏览器常常会截短 HTML 页面中的空格，如果在文本中写 10 个空格，在显示该页面之前，浏览器会合并这些空格，只留下一个空格，如e e在浏览器中实际显示效果为e e，如果需要在页面中增加空格的数量，可以使用  

正常了解以上3个字符实体在开发中是足够了的，更多的字符实体可以参考链接

（7）颜色

HTML中支持多种方式表示颜色，大都基于rgb颜色模式

颜色名，如 white black等

关于浏览器支持的颜色名可参考链接

十六进制，如 #01ef20，特别的如同 #111111 形式的可简写为 #111
rgb函数及rgba函数，如rgb(12,34,250)

我们会在CSS部分讲解更多与颜色相关的知识

（8）代码规范

在编写HTML文档时，遵守一些公认的代码规范有助于提高代码的可读性，也利于团队协作

使用正确的文档类型

始终在文档的首行声明文档类型<!DOCTYPE html>

使用小写元素名
关闭所有HTML元素与HTML空元素
使用小写属性名
所有属性值添加引号
合理利用空格和缩进

3. 文本格式化标签及段落标签

（1）标题标签 `<h1>` ~ `<h6>`

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的，
<h1> 定义最大的标题，<h6> 定义最小的标题

（2）段落标签 `<p>`

段落通过

标签定义，浏览器会自动地在段落的前后添加空行

（3）水平线标签 `<hr/>` 与换行标签 `<br/>`

（4）其他文本格式化标签

粗体 <strong>
斜体 <em>
下划线 <ins>
删除线 <del>
上标 <sup>
下标 <sub>

<h1>this is a h1 tag</h1>
<h2>this is a h2 tag</h2>
<h3>this is a h3 tag</h3>
<h4>this is a h4 tag</h4>
<h5>this is a h5 tag</h5>
<h6>this is a h6 tag</h6>

<p>this is a p tag</p>
<p>this is a p tag too</p>

<p>use br tag <br/> like this</p>

<hr/>

<p>this is a <strong>strong</strong> tap</p>
<p>this is a <em>em</em> tap</p>
<p>this is a <ins>ins</ins> tap</p>
<p>this is a <del>del</del> tap</p>

效果如下

其他文本格式化标签可参考 W3School标签参考手册

一般实际开发中很少用到文本格式化标签，更常见的是使用CSS字体样式来实现文本格式化效果，这里仅做简单介绍；一般使用文本格式化标签用于表现相关的语义

4. 块元素与行内元素

（1）概念

块元素：独占一行的元素，如 <p>
行内元素：不会独占一行的元素，如 <img>

大多数 HTML 元素被默认定义为块级元素或内联元素，块级元素在浏览器显示时，通常会以新行来开始（和结束），内联元素在显示时通常不会以新行开始

注意：一般情况下块元素中放置块元素或行内元素，行内元素内仅放置行内元素，而不推荐在行内元素中放置块元素

（2）分组标签

<div> 默认是块元素
<span> 默认是行内元素

标签	描述
`<div>`	定义文档中的分区或节（division/section）
`<span>`	定义 span，用来组合文档中的行内元素

<div> <span> 在前端开发中非常常用，常用于与CSS相互配合，分别实现对大的内容块和部分文本设置样式；或是充当包裹其他HTML元素的容器和文本的容器

5. 语义化标签

（1）概念

语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用；同时也能够提高HTML文档的可读性，便于协作开发与后续维护

（2）优点

代码结构清晰，可读性高，减少差异化，便于团队开发和维护
在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验
对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息

（3）一些语义化标签简介

标签	描述
`<article>`	定义文章。
`<aside>`	定义页面内容以外的内容。
`<details>`	定义用户能够查看或隐藏的额外细节。
`<figcaption>`	定义 `<figure>` 元素的标题。
`<figure>`	规定自包含内容，比如图示、图表、照片、代码清单等。
`<footer>`	定义文档或节的页脚。
`<header>`	规定文档或节的页眉。
`<main>`	规定文档的主内容。
`<mark>`	定义重要的或强调的文本。
`<nav>`	定义导航链接。
`<section>`	定义文档中的节。
`<summary>`	定义 `<details>` 元素的可见标题。
`<time>`	定义日期/时间。

下图给出了一些常见语义化标签的使用场景

Frontend HTML

2022-07-20 788642a79c5d31ad190441403f786195 99+ 9 分钟 1.3 k

前端学习路线

基础

学习资料

初学时可以参考菜鸟教程及W3School文档

学习到一定程度后推荐使用MDN（特别是英文文档，因为中文文档存在更新不及时的情况）或参考相应的官方文档

推荐使用 VSCode IDE

亦可使用 WebStorm IDE（可以申请学生版）

HTML

HTML 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 HTML 的基本语法及常用元素，以及语义化标签的概念，此外，后续对一些 Web API 也需要有足够的了解，如 Web Storage API、Web Worker API、SVG 和 Canvas

CSS

CSS 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 CSS 的选择器、盒模型、浮动布局、定位、弹性盒子布局、响应式设计等有足够的了解

JavaScript

JavaScript 作为前端三件套之一，是非常重要的部分

学习角度来说，主要是掌握 JavaScript 的基本语法，同时特别注意 JavaScript 的语言特性，并关注 ES6 的发展，此外还需要了解浏览器的 BOM 模型和 DOM 模型、浏览器事件机制、异步编程等方法

Ajax

Ajax 是前端中主流的物理请求方式，主要包括 XMLHttpRequest API 和 Fetch API 两种，此外可以了解一下前端常用的 axios 网络请求库

学习角度来说，主要是了解 XMLHttpRequest 的基本使用以及封装，Fetch 可以作为进阶了解

计算机网络基础

前端中计算机网络也是重要的一部分

学习角度来说，主要了解 OSI 七层网络模型与 TCP/IP 五层网络模型、HTTP 请求方法和请求头及响应头以及状态码、HTTP 协议及 HTTPS 协议、DNS 协议、TCP 协议与 UDP 协议、WebSocket 协议等

Git

Git 是编程领域中目前最主流的版本管理工具，基本上不管是日常开发还是工作开发都在广泛地使用 Git

同时，Github 作为全球最大的技术交流平台，积极参与社区建设也是很重要的一环

学习角度来说，主要了解一些 Git 的基本概念、一些 Git 的基本命令以及 GitHub 的基本操作

Node.js

Node.js 允许在浏览器之外的环境运行 JavaScript 代码

学习角度来说，主要了解 Node.js 的使用以及一些 Node.js 的常见模块

包管理工具

目前主流的包管理工具主要是 npm yarn pnpm

学习角度来说，主要了解 npm 的基本使用及常用指令；yarn 和 pnpm 与 npm 大同小异，可作为进阶内容了解

项目构建工具

目前主流的项目构建工具主要是 webpack vite

学习角度来说，两者都有必要学习，webpack 主要关注其基本概念，vite 主要关注其基本原理

Vue

Vue 框架是国内主流的前端框架之一，被一些中小互联网企业广泛使用

学习角度来说，学习 Vue 可以直接从 Vue3 composition API 开始，除了了解 Vue 的基本开发之外，还需要重点了 Vue 的基本原理，此外需要注意 Vue 的性能优化

TypeScript

TypeScript 是目前前端领域使用最广泛的 JavaScript 超集语言，主要是解决 JavaScript 弱语言的问题，增加了强大且自由的类型系统，在一些大型互联网公司的大型项目中使用非常广泛

学习角度来说，学习 TypeScript，类似与学习 JavaScript，主要是对语言特性的学习；但就 TypeScript 而言，不需要专门去了解类型体操

React

React 框架是国内主流的前端框架之一，被一些大型互联网企业广泛使用

学习角度来说，学习 React 可以直接从 React functional component 开始，除了了解 React 的基本开发之外，此外需要注意 React 的性能优化

参考

黑马程序员前端学习路线个人比较推荐这个学习路线，更加突出重点
尚硅谷前端学习路线个人觉得这个的内容非常全面，但需要注意没必要都学习其中的内容

Frontend Other

HTML-1

HTML-1

1. HTML 简介

（1）HTML 概念

（2）HTML 版本

（3）推荐编辑器

2. HTML 基本语法

（1）标签

（2）元素

（3）属性

（4）注释

（5）文档结构

（6）字符实体

（7）颜色

（8）代码规范

3. 文本格式化标签及段落标签

（1）标题标签 <h1> ~ <h6>

（2）段落标签 <p>

（3）水平线标签 <hr/> 与换行标签 <br/>

（4）其他文本格式化标签

4. 块元素与行内元素

（1）概念

（2）分组标签

5. 语义化标签

（1）概念

（2）优点

（3）一些语义化标签简介

前端学习路线

基础

HTML

CSS

JavaScript

Ajax

计算机网络基础

Git

Node.js

包管理工具

项目构建工具

Vue

TypeScript

React

参考

hello world

链接

widget.followit

最新评论

最新文章

分类

归档

标签

广告

（1）标题标签 `<h1>` ~ `<h6>`

（2）段落标签 `<p>`

（3）水平线标签 `<hr/>` 与换行标签 `<br/>`