深海
深海
2022-12-27
目录

HTML

# 1.HTML 是什么

HTML（Hyper Text Markup Language的缩写）中文译为“超文本标签语言”。是用来描述网页的一种语言。

所谓超文本，有两层含义:

  • 它可以加入图片、声音、动画、多媒体等内容 （超越文本限制）
  • 还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接 （超级链接文本）

# 2.HTML 基本结构

<!DOCTYPE html>
<!-- HTML5标准网页声明 -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 设置字符集为utf-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 设置浏览器的标题 -->
  </head>
  <!-- 文档的主体 -->
  <body></body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# lang 属性

声明当前页面的语言类型。

<html lang="en"></html>
1
  • 常见语言类型
    • en：定义页面语言为英语。
    • zh-CN：定义页面语言为中文。
  • lang 的作用
    • 帮助翻译工具做识别。
    • 根据根据 lang 属性来设定不同语言的 css 样式，或者字体。
    • 告诉搜索引擎做精确的识别。

# head 标签

<head> 标签用于定义文档的头部，它是所有头部元素的容器。样式表，脚本都可以引用

# meta 标签

<meta>标签提供了 HTML 文档的元数据。meta 常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

元数据 元数据（Metadata）是数据的数据信息。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

meta 标签共有两个属性，分别是http-equiv属性和name属性。

# name属性

主要用于描述网页，比如网页的关键词，叙述等，与之对应的属性值为 content，content 中的内容是对 name 填入类型的具体描述，便于搜索引擎抓取。

name 的常用属性有：keywords、description、viewport。用户也可以自定义 name 属性。

  • keywords：用于告诉搜索引擎，你网页的关键字。
  • description：用于告诉搜索引擎，你网站的主要内容。
  • viewport：视口(viewport)就是浏览器中用于呈现网页的区域。
  • robots：用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content 的参数有 all,none,index,noindex,follow,nofollow。默认是 all。
  • author：标注网页的作者。
  • generator：网页制作软件。
  • copyright：说明网站版权信息。
<meta name="robos" content="all" />
<meta name="author" content="网页的作者" />
<meta name="generator" content="制作软件" />
<meta name="copyright" content="版权" />
1
2
3
4
# viewport

手机端视口默认为 980px

约束视口 目的：约束视口的意义在于，无论在何种分辨率的屏幕下，那些针对当前视口而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户

  • 属性
属性 作用
width "device-width" 表示布局 viewport 的值是设备的宽度
initial-scale 初始缩放比例，1.0
maximum-scale 最大缩放比例 1.0
minimum-scale 最小缩放比例 1.0
user-scalable 用户是否可以缩放，yes 或 no（1 或 0）
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"
/>
1
2
3
4

  • 说明

    • 设置视口默认宽度时，一般使用 device-width, 它能获取设备的真实宽度
    • initial-scale 的值一般设置为 1，不进行缩放
    • 为了解决不同浏览器的横竖屏兼容，一般会同时设置 width 和 initial-scale 两种属性

  • 视口相关单位

    vw、vh、vmin、vmax 是一种视口单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视口（Viewport）大小来决定的

    • 描述

      • vw：视口宽度的百分比（1vw 代表视口的宽度为 1%）
      • vh：视口高度的百分比（1vh 代表视口的高度为 1%）
      • vmin：当前 vw 和 vh 中较小的一个值
      • vmax：当前 vw 和 vh 中较大的一个值

    • 区别

      • % 是相对于父元素的大小设定的比率，vw、vh 是视口大小决定的
      • vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势

# http-equiv属性

相当于 http 的文件头作用

属性:content-Type、X-UA-Compatible、cache-control、expires、refresh、Set-Cookie

  • content-Type:设定网页字符集，便于浏览器解析与渲染页面。

  • X-UA-Compatible：浏览器采取何种版本渲染当前页面。

  • cache-control：指定请求和响应遵循的缓存机制，值与 http 请求头一样。

    • no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
    • no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）。
    • public : 缓存所有响应，但并非必须。因为 max-age 也可以做到相同效果。
    • private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说 CDN 就不允许缓存 private 的响应）。
    • maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60 表示响应可以再缓存和重用 60 秒。

  • expires：网页到期时间。

  • refresh：自动刷新并指向某页面。

  • Set-Cookie：cookie 设定。

<!-- //旧的HTML，不推荐 -->
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
<!-- HTML5设定网页字符集的方式，推荐使用UTF-8 -->
<meta charset="utf-8" />
<!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 指定请求和响应遵循的缓存机制 -->
<meta http-equiv="cache-control" content="no-cache" />
<!-- 网页到期时间。 -->
<meta http-equiv="expires" content="Sunday 26 October 2022 01:00 GMT" />
<!-- 意思是2秒后跳转向我的博客 -->
<meta http-equiv="refresh" content="2;URL=https://www.cenxiaodong.cn" />
<!-- 必须使用GMT的时间格式 -->
<meta
  http-equiv="Set-Cookie"
  content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 3.HTML 标签

来源于W3School (opens new window)

# 基础

标签 描述
<!DOCTYPE> 定义文档类型。
<html> 定义 HTML 文档。
<head> 定义关于文档的信息。
<title> 定义文档的标题。
<body> 定义文档的主体。
<h1> ~ <h6> 定义 HTML 标题。
<p> 定义段落。
<br> 定义简单的折行。
<hr> 定义水平线。
<!--...--> 定义注释。

# 格式化

标签 描述
<acronym> 定义只取首字母的缩写。 HTML5 中不支持。请使用 <abbr> 代替。
<abbr> 定义缩写。
<address> 定义文档作者或拥有者的联系信息。
<b> 定义粗体文本。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<blockquote> 定义长的引用。
<center> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。
<font> 定义大号文本 HTML5 中不支持。请使用 CSS 代替。
<i> 定义斜体文本。
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark> 定义有记号的文本。
<meter> 定义预定义范围内的度量。
<pre> 定义预格式文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。
<strike> 定义加删除线文本。 HTML5 中不支持。请使用 <del> 或 <s> 代替。
<strong> 定义语气更为强烈的强调文本。
<sup> 定义上标文本。
<sub> 定义下标文本。
<template> 定义用作容纳页面加载时隐藏内容的容器。
<time> 定义日期/时间。
<tt> 定义打字机文本。 HTML5 中不支持。请使用 CSS 代替。
<u> 定义下划线文本。
<var> 定义文本的变量部分。
<wbr> 定义可能的换行符。

# 表单和输入

标签 描述
<form> 定义供用户输入的 HTML 表单。
<input> 定义输入控件。
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表（下拉列表）。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<isindex> 定义与文档相关的可搜索索引。HTML5 中不支持。
<datalist> 定义下拉列表。
<keygen> 定义生成密钥。
<output> 定义输出的一些类型。

# 框架

标签 描述
<frame> 定义框架集的窗口或框架。HTML5 中不支持。
<frameset> 定义框架集。HTML5 中不支持。
<noframes> 定义针对不支持框架的用户的替代内容。HTML5 中不支持。
<iframe> 定义内联框架。

# 图像

标签 描述
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像地图内部的区域。
<canvas> 定义图形。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组，以及它们的标题。
<svg> 定义 SVG 图形的容器。

# 音频/视频

标签 描述
<audio> 定义声音内容。
<source> 定义媒介源。
<track> 定义用在媒体播放器中的文本轨道。
<video> 定义视频。

# 链接

标签 描述
<a> 定义锚。
<link> 定义文档与外部资源的关系。
<nav> 定义导航链接。

# 列表

标签 描述
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 定义大号文本。HTML5 中不支持。请使用 CSS 代替。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。 目前所有主流浏览器都不支持该标签。
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<command> 定义命令按钮。

# 表格

标签 描述
<table> 定义表格。
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容（脚注）。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。

# 样式和语义

标签 描述
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header> 定义 section 或 page 的页眉。
<footer> 定义 section 或 page 的页脚。
<main> 定义文档的主要内容。
<section> 定义 section。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<details> 定义元素的细节。
<dialog> 定义对话框或窗口。
<summary> 为 <details> 元素定义可见的标题。
<data> 添加给定内容的机器可读翻译。

# 元信息

标签 描述
<head> 定义关于文档的信息。
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。

# 编程

标签 描述
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> 定义嵌入的 applet。 HTML5 中不支持。请使用 <embed> 和 <object> 代替。
<embed> 为外部应用程序（非 HTML）定义容器
<object> 定义嵌入的对象。
<param> 定义对象的参数。
上次更新: 2025/02/08, 22:43:24
CSS基础

CSS基础→

最近更新
01
TypeScript是什么
06-15
02
项目搭建
05-21
03
Prettier
02-27
更多文章>
Theme by Vdoing | Copyright © 2022-2025 京ICP备2020044002号-4 京公网安备11010502056618号