V2AS问路
人人都懂的HTML基础知识-HTML教程(1)
阅读原文时间：2023年07月08日阅读：1

01、HTML基础简介

HTML (HyperText Markup Language，超文本标记语言) 不是一门编程语言，而是一种用于定义内容结构的标记语言，用来描述网页内容，文件格式为.html。HTML 由一系列的元素（elements）组成，这些元素用来实现不同的内容。HTML5是HTML新的修订版本，2014年由W3C制定发布，增加了很多语义化标签。

W3C：World Wide Web Consortium，万维网联盟组织，是一个国际互联网标准化组织，1994年成立，核心目的是制定WEB规范标准。

WEB标准主要包括三个方面：

  • 结构标准（HTML）：超文本标记语言（HyperText Markup Language），定义网页内容的组织结构。
  • 表现标准（CSS）：层叠样式表（Cascading Style Sheets），用于设置网页元素的版式、颜色、大小等外观样式。
  • 行为标准（JS）：JavaScript，用于实现网页的交互和行为。

详见前端技术路线图

**HTML **是一种<XML>格式的标记语言，每一个标签都是以尖括号“<>”来定义的。HTML不区分大小写，HTML中的标签名、属性名都统一小写，都按照小写来处理，就是说如果你大写的也会被转换为小写，️自定义标签、属性时需注意。

<标签名 属性名=“属性值”>内容</标签名>

一个元素主要部分：开始标签、结束标签与内容相结合，开始标签中还包括属性/值。

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围，表示元素从这里开始或者开始起作用。
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠/，这表示元素的结尾。
  • 内容（Content）：元素的内容，元素标签内的内容。
  • 属性：属性定义元素的一些额外信息，一个属性就是一个键值对组成属性名="属性值"，值必须添加引号，多个属性空格隔开。

单标签（空元素）：<标签名>，<标签名 属性名="属性值">。大部分元素标签都是是双标签的形式，具有开始标签、结束标签。也有小部分元素没有结束标签，称为单标签，或空元素。HTML5中的单标签不需要写斜杠/，可兼容斜杠，如<hr>，<br>，<img>，<input>，<link>，<meta>，<base>、table中的<col>、<source>，<embed>…

HTML中的注释格式：<!--注释-->

HTML中的有些字符是内置的特殊关键字或特殊符号，如 <>、"、'、空格 、换行（用<br>元素）、tab，不能直接在HTML中显示。需要用转义字符（特殊编码），以符号&开始，以分号(;结束。如下表，HTML中用实体名称、实体编码（字符的unicode编码）都可以。

元素内容中空格（空白字符、换行），HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

显示结果

描述

实体名称

实体编号

空格

 

 

全角空格，1个中文字宽

<

小于号

<

<

>

大于号

>

>

&

和号

&

&

"

引号

"

"

'

撇号

' (IE不支持)

'

¥

元（yen）

¥

¥

€

欧元（euro）

€

€

版权（copyright）

注册商标

商标

<p>&nbsp;&nbsp;&nbsp;&nbsp;一个段落，转移字符添加空格</p>
<p>&lt;一个段落，转移字符添加尖括号&gt;</p>

媒体类型MIME（ Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。在很多需要引入资源、申明资源类型的地方使用。

通用结构：type/subtype，大小写不敏感，一般都小写

类型

描述

典型示例值

text

表明文件是普通文本，理论上是人类可读的

text/plain：未知类型的普通文本- text/html：html内容
text/css：css文件，引入css文件时指定类型type ="text/css"，可省
text/javascript：js文件，<script>引入js时可省略

image

表明是某种图像。不包括视频，动态图（比如动态 gif）也使用 image 类型

image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon 特定格式的图像
image/*：图片通配

audio

表明是某种音频文件

audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
audio/*

video

表明是某种视频文件

video/webm, video/ogg
video/*

application

表明是某种二进制数据

application/octet-stream：未知的应用程序文件
application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf

multipart

复合文档

multipart/form-data：表单form提交数据中有二进制文件
multipart/byteranges：用于把部分的响应报文发送回浏览器，状态码206

02、网页结构/骨架

  • H5版本申明：<!DOCTYPE html>，文档（第一行）必备的文档类型申明，避免浏览器怪异行为，这不是一个标签。
  • 主根元素：<html>整个网页</html>，定义html文档，也限定了文档的开始和结束点。
  • 头部元素：<head>网页头部信息，当前网页的一些元数据信息</head>，用于描述文档的各种属性和信息，包括文档标题。这部分内容是给浏览器、开发者使用的，不用向用户显示。
  • 内容根元素：<body>网页内容区域</body>，文档内容的主体，包含文档所有的正式内容，用于给用户显示。

body有背景色bgcolor、前景色text等属性，不过样式一般用css管理样式。

<!DOCTYPE html>
<html>
  <head>
    <!-- 头部，网页的一些元数据信息 -->
  </head>
  <body bgcolor="blue" text="red">
    <!-- 我们看到的网页内容区域 -->
  </body>
</html>

⌨️快捷键（VSCode）：半角的叹号!快速输入HTML的主体网页结构内容，然后Tab键切换修改（预置）参数值，或Esc。

  • ：用于描述HTML文档的属性、关键词等元数据的元素，如文档编码字符集charset。

  • </strong>：网页标题，出现在浏览器标签上。是head中唯一必须包含的元素，有利益SEO优化。</p></li> <li><p><a rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link"><strong><link></strong></a>：引入外部资源，常用的如css资源。</p></li> <li><p><a rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script"><strong><script></strong></a>：内部js代码，或引入外部js文件，script必须是双标签。</p></li> <li><p><a rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/base"><strong><code><base></code></strong></a>：文档根 URL 元素，每个文档只能一个，指定当前文档的根URL地址。</p> <p><head></p> <!-- 头部，网页的一些属性申明信息 --> <p><meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <base href="http://www.example.com/"><br /> <title>网页标题-HTML学习

    无标签的不规范内容，这行文字会被自动处理到body中

（ /ˈmetə/元）元数据就是描述数据的数据，支持多种属性值，用来设置当前网页的各种参数和行为。

如<meta charset="utf-8"> ，该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符，基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。

•

meta类型

描述

值

charset

文档的字符编码，一般用"utf-8"

<meta charset="utf-8"/>

name

指定元数据的类型，配合content使用，标准元数据名称

description：文档的描述
keywords：关键词，逗号分割，用于SEO
viewport：设置视口的大小等属性，主要用于移动端
referrer(/rɪˈfɜːrə/ 推荐人，来历)：控制http的 Referer 请求头。

http-equiv

定义了一个编译指示指令

content-type(过时)：推荐使用meat的charset属性代替。
default-style：默认样式（首选样式）
x-ua-compatible( /kəmˈpætəbl/ 兼容的)：设置兼容性
refresh：页面载入的时间间隔设置
Cache-Control：控制HTTP缓存，常用content值如下：
  ● no-cache：和服务器确认没修过过才缓存
  ● no-store：不存储，每次都重新请求
  ● public可以被任意缓存，private只在运行的浏览器缓存
  ● max-age：缓存时长（s）
  ● no-transform：中间代理不允许格式转换，避免中间被压缩转换
Expires：过期时间（GMT），推荐用上面的max-age
Content-Security-Policy：CSP内容安全策略，可配置安全权限

content

http-equiv 或name 属性的值

<meta name="keyword" content="购物,淘宝">

请求头Referer实际上是 "referrer"，属于拼写错误（少了一个r），上个世纪制定HTTP/1.0协议时发生的拼写错误，后来被大量服务使用就没有改了。

<meta charset="UTF-8">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容… ">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易...">
<!-- viewport：设置视口大小及缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<!-- 如果目标更加安全，则发送完整 URL。否则不发送referrer -->
<meta name="referrer" content="no-referrer-when-downgrade">
<!-- format-detection：禁用（IOS）上的电话号码、邮箱检测 -->
<meta name="format-detection" content="telephone=no, email=no">
<!-- 浏览器内核：webkit -->
<meta name="renderer" content="webkit">
<!-- 网站类型(百度定义的)，pc,mobile -->
<meta name="applicable-device" content="pc">
<!-- 淘宝自己定义的元数据，用于跟踪电商数据 -->
<meta name="spm-id" content="a21bo">

<!-- 文档编码类型Content-Type -->
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<!-- 过期时间：0立即过期 -->
<meta http-equiv="expires" content="0">
<!-- 浏览器兼容性设置：优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- no-transform主要是用在 proxy 服务器，不允许进行格式转换 -->
<meta http-equiv="Cache-Control" content="no-transform">
<!-- 是早期百度提供的禁止将网页进行转码的代码 -->
<meta http-equiv="Cache-Control" content="no-siteapp">

<link>用于加载外部资源，并指定当前文档与外部资源的关系（relationship）。一般都是放在在head中使用，常用于引入样式资源，ref为stylesheet时也可以放到body中。

属性

描述

值/备注

rel

关系（relationship），表示引入的文件与前文件与的关系

stylesheet：样式文件css，比较常用；icon：网站图标；
preload：预加载。更多链接类型

href

外部文件路径，支持url、文件路径的资源地址

参考资源路径

type

被连接文件的MIME 类型

text/css（样式文件，常用）、text/html等MIME类型

media

媒体查询，满足媒体条件才会被加载

media="screen and (max-width: 600px)"

disabled

禁用该样式资源

charset

字符编码，已淘汰的属性

<link type ="text/css" rel="stylesheet" href="css1.css">
<link rel="icon" href="/res/favicon.ico" type="image/x-icon">

注意： 如果你的网站使用了内容安全策略（Content Security Policy，CSP）来增加安全性，这个策略会应用在图标上。如果你遇到了图标没有被加载的问题，你需要确认 Content-Security-Policy 响应头的 img-src 指令有没有禁止访问图标。