HTML 基础知识

HTML 基础概念

HTML（超文本标记语言——HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。

HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。
HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。然而，习惯上与实践上都推荐将标签名全部小写。
注释：
示例：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Document</title>
  </head>
  <body></body>
</html>

空元素：<area>、<base>、<br>、<col>、<embed>、<hr>、<img>、<input>、<link>、<meta>、<source>、<track>、<wbr>
无论你在 HTML 元素内容中使用了多少空白（可以包括一个或多个空格字符，也包括换行），HTML 解析器在渲染代码时都会将每个空白序列减少为单个空格。从 JavaScript 访问元素的 innerHTML 将保留所有空白。

转义字符：

字面字符	字符引用等效项	英文
<	`<`	less than（小于）
>	`>`	greater than（大于）
"	`"`	quotation（引语）
'	`'`	apostrophe（撇号）
&	`&`	ampersand‌（和）
空格	` `	Non-Breaking Space‌（不换行空格）
©	`©`	Copyright‌（版权符号）
®	`®`	Registration‌（注册）

HTMl 头部

元数据

html

<!-- 字符编码 -->
<meta charset="utf-8" />
<!-- 页面的作者 -->
<meta name="author" content="情枫 QingFeng" />
<!-- 页面的简要描述 -->
<meta name="description" content="The MDN Web Docs />

自定义图标

html

<!-- 含有高分辨率 Retina 显示屏的 iPad Pro：-->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png"
/>
<!-- 三倍分辨率的 iPhone：-->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png"
/>
<!-- 没有 Retina 的 iPad、iPad mini 等：-->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png"
/>
<!-- 二倍分辨率的 iPhone 和其他设备：-->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- 基本图标 -->
<link rel="icon" href="/favicon.ico" />

CSS 和 JS

html

<link rel="stylesheet" href="my-css-file.css" />
<!-- defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript -->
<script src="my-js-file.js" defer></script>

HTML 语义化

HTML 语义化是指根据内容的结构化（内容语义化）来选择合适的标签（代码语义化），即用正确的标签做正确的事情

语义化的优点

HTML 语义化增强文档的可识别性

可以使页面在没有 CSS 样式表的情况下也能呈现出很好的内容结构
有利于 SEO 优化（爬虫依赖 HTML 的标签来确定渲染关键字的权重）
方便其他设备解析（屏幕阅读器、盲人阅读器）提升了用户体验
增强了代码的可读性和可维护性

常用标签

<header>：表示导航或者介绍性的内容
<nav>：表示导航
- 在 header 中大多表示文章目录
- 在 aside 中大多是关联页面或者是整站地图
<main>：表示文章的主要内容，每个页面上只能用一次
<article>：表示文章主体部分
<aside>：表示跟文章主体不那么相关的部分，一般包含导航、广告等工具性质的内容
<section>：表示文章中的“节”或“段”
<footer>：通常出现在尾部，包含作者信息、相关链接、版权信息等
<h1> ~ <h6>：表示文章中不同层级的标题
<details> 和 <summary>：表示可以查看或隐藏的其他详细信息
<figure> 和 <figcaption>：表示与文章相关的图像、照片等流内容
<span> 是一个行级无语义元素
<div> 是一个块级无语义元素

示例

页眉：<header>。
导航栏：<nav>。
主内容：<main>。主内容中还可以有各种子内容区段，可用 <article>、<section> 和 <div> 等元素表示。
侧边栏：<aside>。经常放置在 <main> 中。
页脚：<footer>。

HTML5 标签选择流程图

HTML5 标签选择流程图

HTML 中的语义 —— MDN

HTML 标签

标题（Heading）

<h1></h1>

段落（Paragraph）

<p></p>

强调

强调语气

<em></em>——（emphasis）浏览器默认样式为斜体,仅仅为了获得斜体样式而不增加语义辅助,使用 <span> 元素和一些 CSS，或者是 <i> 元素

着重强调

<strong></strong>——（strong importance）浏览器默认样式为粗体,仅仅为了获得粗体样式而不增加语义辅助，使用 <span> 元素和一些 CSS，或者是 <b> 元素

<i></i> 被用来传达传统上用斜体表达的意义
<b></b> 被用来传达传统上用粗体表达的意义
<u></u> 被用来传达传统上用下划线表达的意义

列表（List）

无序列表（Unordered List）

<ul></ul>
<li></li>（list item，列表项）

有序列表（Ordered List）

<ol></ol>
<li></li>（list item，列表项）

描述列表（Description List）

<dl></dl>
<dd></dd>（description definition，描述定义）

换行

<br />

水平分割线

<hr />

引用

块引用

<blockquote></blockquote>——浏览器的默认样式会将其渲染为缩进的段落

行内引用

<q></q>——浏览器默认将其作为普通文本放入引号内表示引用

引文

<cite></cite>——引文默认的字体样式为斜体

缩略语

<abbr></abbr>——它常被用来包裹一个缩略语或缩写

联系方式

<address></address>——标记联系方式的元素

上标和下标

<sup></sup>——上标
<sub></sub>——下标

计算机代码

<code>：用于标记计算机通用代码。
<pre>：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在渲染的页面上看到它。但是，如果你将文本包含在 <pre></pre> 标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>：用于标记具体变量名。
<kbd>：用于标记输入电脑的键盘（或其他类型）输入。
<samp>：用于标记计算机程序的输出。

时间和日期

时间和日期标记为可供机器识别的格式的 <time> 元素

链接

普通链接

邮件链接

主题（subject）、抄送（cc）、密送（bcc）和主体（body）

属性

href 超文本引用（hypertext reference）
title 当鼠标指针悬停在链接上时，标题将作为提示信息出现
download 提供一个默认的保存文件名

图片

语义化：<figcaption> 元素告诉浏览器和辅助技术工具，这段说明文字描述了 <figure> 元素的内容。

figure 可以是几张图片、一段代码、音视频、方程、表格或类似的东西。

视频音频

html

<!-- 视频 -->
<video src="rabbit320.webm" controls>
  <p>
    你的浏览器不支持 HTML 视频。可点击<a href="rabbit320.mp4">此链接</a>观看。
  </p>
</video>

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png"
>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<!-- 音频 -->
<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>你的浏览器不支持该音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

<source> 标签当中，这些元素分别指向各自的资源，含有 type 属性，建议添加
width 和 height 控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比——也叫做纵横比
autoplay 立即播放
loop 循环播放
muted 默认关闭声音
poster 封面图
preload
- "none"：不缓冲文件
- "auto"：页面加载后缓存媒体文件
- "metadata"：仅缓冲文件的元数据
<audio> 元素不支持 width/heigth 属性,不支持 poster 属性

提供音频/视频中话语的文字记录

只需使用 WebVTT 文件格式和 <track> 元素即可。
WebVTT 是一个格式，.vtt 文件
用 <track> 标签链接 .vtt 文件，<track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是 subtitles(外语材料的翻译字幕)、captions(同步翻译对白，或是描述一些有重要信息的声音) 还是 descriptions(由媒体播放器朗读的文本)。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。最后，添加 label，以帮助读者在查找时识别语言。示例：

html

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

表格

<tr> 元素（table row）第一行、第二行...
<td> 元素（table data）第一个单元格、第二个单元格...
<th> 元素（table header）表头

colspan合并列和 rowspan 合并行

样式列 <col> 和 <colgroup> 元素 <caption> 元素为你的表格增加一个标题

<thead>、<tbody>和 <tfoot>，这些元素允许你把表格中的部分标记为表头、表体和表尾三部分

<thead> 元素必须包住表格的表头部分。一般是第一行，往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 <col>/<colgroup> 元素，那么 <thead> 元素就需要放在它们的下面。
<tbody> 元素需要包住表格内容的主要部分（不是表头和表尾）。
<tfoot> 元素需要包住表格的表尾部分。一般是最后一行，往往是对前面所有行的总结。

表单

html

<!-- form标签里面有button按钮，提交到action路径使用method方法 -->
<form action="./submit_page" method="get"></form>
<!-- label的for属性与input的id属性对应，input的name是提交的键值对的名称，value是值，required必填-->
<label for="name">姓名（必填）：</label>
<input type="text" name="name" id="name" required />
<!-- button按钮，type="submit" type="reset" type="button"-->
<input type="button" name="button" value="Button" />
<!-- 没有默认行为的按钮，form里建议用button按钮 -->
<input type="button" name="button" value="Button" />
<!-- 复选框（每个复选框的 name 属性值不同，没有设置 value 属性则提交的值为 on） -->
<input type="checkbox" name="checkbox" />
<input type="checkbox" name="coffee" />
<!-- 颜色 -->
<input type="color" name="color" />
<!-- 日期 -->
<input type="date" name="date" />
<!-- 日期时间 -->
<input type="datetime-local" name="datetime-local" />
<!-- 邮箱 -->
<input type="email" name="email" />
<!-- 隐藏 -->
<input id="userId" name="userId" type="hidden" value="abc123" />
<!-- 图片 -->
<input type="image" name="image" src="" alt="image input" />
<!-- 年月 -->
<input type="month" name="month" />
<!-- 数字 -->
<input type="number" name="number" />
<!-- 密码 -->
<input type="password" name="password" />
<!-- 单选 （每组单选按钮的 name 属性值必须相同，必须包含一个 value 属性）-->
<input type="radio" name="radio" value="economy" checked />
<input type="radio" name="radio" value="penthouse" />
<!-- 数字范围 -->
<input type="range" name="range" min="0" max="25" />
<!-- 重置表单 -->
<input type="reset" name="reset" />
<!-- 搜索 -->
<input type="search" name="search" />
<!-- 提交表单 -->
<input type="submit" name="submit" />
<!-- 电话号码 -->
<input type="tel" name="tel" />
<!-- 单行文本 -->
<input type="text" name="text" />
<!-- 时间 -->
<input type="time" name="time" />
<!-- url -->
<input type="url" name="url" />
<!-- 年和周 -->
<input type="week" name="week" />
<!-- 下拉菜单 -->
<select name="transport">
  <option value="">--请选择一项--</option>
  <option value="plane" selected>乘坐飞机</option>
  <option value="bike">骑自行车</option>
  <option value="walk">徒步</option>
  <option value="bus">乘坐公交</option>
  <option value="train">搭乘火车</option>
  <option value="jetPack">使用喷气背包</option>
</select>
<!-- 多行文本 浏览器默认使用 cols="20" 和 rows="2"-->
<textarea name="comments" rows="5" cols="33"></textarea>

HTML 基础知识 ​

HTML 基础概念 ​

HTMl 头部 ​

元数据 ​

自定义图标 ​

CSS 和 JS ​

HTML 语义化 ​

常用标签 ​

示例 ​

HTML 标签 ​

标题（Heading） ​

段落（Paragraph） ​

强调 ​

强调语气 ​

着重强调 ​

列表（List） ​

无序列表（Unordered List） ​

有序列表（Ordered List） ​

描述列表（Description List） ​

换行 ​

水平分割线 ​

引用 ​

块引用 ​

行内引用 ​

引文 ​

缩略语 ​

联系方式 ​

上标和下标 ​

计算机代码 ​

时间和日期 ​

链接 ​

普通链接 ​

邮件链接 ​

图片 ​

视频音频 ​

表格 ​

表单 ​

HTML 基础知识

HTML 基础概念

HTMl 头部

元数据

自定义图标

CSS 和 JS

HTML 语义化

常用标签

示例

HTML 标签

标题（Heading）

段落（Paragraph）

强调

强调语气

着重强调

列表（List）

无序列表（Unordered List）

有序列表（Ordered List）

描述列表（Description List）

换行

水平分割线

引用

块引用

行内引用

引文

缩略语

联系方式

上标和下标

计算机代码

时间和日期

链接

普通链接

邮件链接

图片

视频音频

表格

表单