闲聊
最近在b站看一些html的教程。尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频,在此记录学习笔记。
一些基础概念
注释
文档声明
放置在html文件第一行，文档声明不算是标签
HTML5的文档声明
<!DOCTYPE html>
字符编码
ASCII （128个）英文大小写字母、一些符号
ISO 8859-1 （256个） 在ASCII码上添加了一些希腊字母
GB2312 进一步扩充，收录了6763个常用汉字，682个字符
GBK 收录汉字和符号两万多个，支持繁体中文
UTF-8 万国码，包含世界所有语言的所有文字和符号，最常用
在html文件中声明编码方式
<head>
<meta charset="UTF-8">
</head>
设置语言
<html lang="en">
</html>
常用 语言-地区/国家
| lang | 语言 |
|---|---|
| zh-CN | 中文-中国大陆（简体） |
| zh-TW | 中文-中国台湾（繁体） |
| zh | 中文 |
| en | 英语 |
| en-US | 英语-美国 |
| en-GB | 英语-英国 |
查询语言见HTML 语言代码参考手册
查询地区/国家见HTML ISO 国家/地区代码参考手册
HTML 和 XML 中的语言标记
标准结构
在vs code中可以输入英文感叹号! 再按Tab键 快速生成
自动生成的html结构中lang=“en”,可以在设置-Emmet-Variables-添加项,进行修改
如果需要显示网页图标，需要在文件夹根目录放置favicon.ico图片，在浏览器中使用强制刷新SHIFT-刷新可以看到
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浏览器标签栏上的标题</title>
</head>
<body>
</body>
</html>
文档
- 官方文档 https://html.spec.whatwg.org/multipage/
- 非官方中文文档 https://www.w3school.com.cn/
- 非官方文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML
推荐使用第三种文档，因为vs code的鼠标悬停提示使用的是第三种的文档
常见图片格式
jpg/jpeg 是一种有损压缩格式。支持的颜色丰富，占用空间较小，不支持透明背景，不支持动图。适用于对图片细节没有极高要求的场景。此格式在网页中很常见
png 是一种无损压缩格式，能更高质量的保存图片。支持的颜色丰富，占用空间略大，支持透明背景，不支持动图。使用场景：想让图片有透明背景、想要高质量呈现图片。如，公司logo等
bmp 是一种不进行压缩格式，在最大程度上保留图片更多的细节。支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动图。适用于对图片细节要求极高的场景（大型游戏）
gif 仅支持256种颜色，色彩呈现不是很完整。支持的颜色较少，支持简单透明背景，支持动图。适用于网页中的动图
webp 专门用在网页中呈现图片。具有上述格式的优点，兼容性不太好。
base64 加密，本质是一串特殊的文本，需要使用浏览器打开，看图软件无法打开。原理：把图片进行base64编码，形成一串文本。使用时直接作为img标签的src属性的值即可，不受文件位置的影响。适用于一些较小的图片，或者需要和网页一起加载的图片。
标签（元素）
语义化标签
优化代码可读性，有利于SEO（搜索引擎优化），方便解析。
div不是语义化标签
块级元素和行内元素
块级元素独占一整行,例如排版标签
行内元素不独占一行，例如input,span
- 块级元素内可以有行内元素和块级元素
- 行内元素内能有行内元素，不能有块级元素
- p中不能有块级元素
排版标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>排版标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<div>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</div>
</body>
</html>
- 标题标签h1-h6
h1标签最好只出现一次，h4/h5/h6使用较少，不能互相嵌套使用 - 段落标签p
不能在p中嵌套h1-h6或div或p - div标签
无实际意义，常将段落p放在其中，便于排版和管理
文本标签
通常是行内元素
常用的文本标签，常与p嵌套使用
| 标签名 | 标签语义 |
|---|---|
| em | 强调（斜体） |
| strong | 强调（粗体），语气强于em |
| span | 无语义，用于包裹短语的通用容器，类似于div |
以上都是双标签
不常用的文本标签
| 标签名 | 标签语义 |
|---|---|
| i | 类似于语文中的心理描写、语言描写用的引号，现在常用于呈现字体图标（斜体） |
| cite | 作品标题（斜体） |
| dfn | 特殊用语/专属名词（斜体） |
| del | 删除的文本（删除线） |
| ins | 插入的文本（下划线） |
| sub | 下标文本 |
| sup | 上标文本 |
| code | 一段代码（字号略小） |
| samp | 从正常的上下文中，将某些内容提取出来，例如：标识设备输出（字号略小） |
| kbd | 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中（字号略小） |
| abbr | 缩写，最好配上title属性（虚线下划线，如果配置了title属性，鼠标悬停时会显示title内容） |
| bdo | 更改文本方向，要配合dir属性，可选值：ltr(默认值，从左到右)/rtl（从右到左） |
| var | 标记变量，可与code标签一起使用（斜体） |
| small | 附属细则，很少使用。例如：版权/法律文本（字号略小于p） |
| b | 摘要中的关键字、评论中的产品名称，很少使用（加粗） |
| u | 与正常内容有反差的文本，很少使用，例如：错的单词、不合理的描述（下划线） |
| q | 短引用，很少使用（双引号） |
| blockquote | 长引用，很少使用（换行+首行缩进） |
| address | 地址（换行+斜体） |
以上都是双标签，blockquote和address是块级元素，其他都是行内元素
图片标签
img标签（单标签）
常用属性
-src图片路径
-alt图片描述，图片加载失败时显示图片描述，加载成功时不显示。搜索引擎根据alt得知图片的内容
-width图片宽度，单位像素
-height图片高度
通常width和height参数只需要传入一个，图片将进行等比例缩放
超链接
CTRL-SHIFT-DELETE删除Google chrome缓存
a标签（双标签）（行内元素）
常用属性
-href要跳转到的具体位置（网址/文件地址）如果href中放的是文件地址，浏览器可以打开的文件会直接打开，无法打开的会跳转到下载
-target跳转时如何打开页面，可以取的值是_self(默认，本标签页打开)/_blank(在新标签页打开)
-download跳转下载文件，download可以不传入值（下载时文件默认名称为href最后一个/之后的文件名），传入值时属性值即为下载文件的名称
a虽然是行内元素，但是可以包裹除它自身以外的任意元素
代码中的多个回车、多个空格都会被浏览器解析成一个空格
浏览器可以直接打开图片、视频、pdf、音频等文件，只需要将这些文件拖到浏览器窗口即可。
超链接——跳转锚点
锚点，网页中的一个标记点。
使用方法
第一步：设置锚点
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">这是一个位置</h2>
推荐使用第二种方式。
具有href属性的a标签是超链接，具有name属性的a标签是锚点。
name和id都是区分大小写的，id最好不要用数字开头。name和id都不允许出现重名。
第二步：跳转锚点
<!-- 跳转到test1锚点 -->
<a href="#test1">跳转到test1锚点</a>
<!-- 跳转到test2锚点 -->
<a href="#test2">跳转到test2锚点</a>
<!-- 跳转到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">跳转到demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js代码，javascript:和;之间放置想要执行的js代码 -->
<a href="javascript:alert(1);">点我弹窗</a>
超链接——唤起指定应用
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:123456@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
列表
列表项li标签(list item)
列表可以嵌套使用
li标签最好写在ol或ul标签中，不要单独使用
- 有序列表(ordered list),每个列表项li开头都会自动添加数字序号1、2、3等
ol标签，列表项使用li标签 - 无序列表(unordered list)，每个列表项li开头都会自动添加黑点
ul标签，列表项使用li标签 - 自定义列表(definition list)
dl标签，每个列表项使用一个术语名称dt和任意个术语描述dd标签，后者内容是前者内容的解释
表格
table标签(双标签)
table的常用属性：
-border边框，单位像素px，控制外边框（单元格边框自动设置为1）
-width表格宽度
-height表格高度
-cellspacing单元格间距
tr标签，行(table row)，常用属性和tbody/tfoot相同
th标签，单元格(table head)（表头），常用属性如下：
-width单元格宽度
-height单元格高度
-align水平对齐方式，取值left(左对齐，默认)/right(右对齐)/center(居中)
-valign垂直vertical对齐方式，取值middle(居中，默认)/top(顶部对齐)/bottom(底部对齐)
-rowspan占据的行数
-colspan占据的列数
td标签，单元格(table data)（表格主体），常用属性和th相同
以下四个标签需要包裹在table标签内部：
- caption标签，表格标题
- thead标签，表头
里面需要包裹tr和th
thead的常用属性
-height表头高度
-align水平对齐方式，取值center(居中，默认)/left(左对齐)/right(右对齐)
-valign垂直vertical对齐方式，取值middle(居中，默认)/top(顶部对齐)/bottom(底部对齐) - tbody标签，表格主体
里面需要包裹tr和td
tbody常用属性
-height表格主体高度
-align水平对齐方式，取值left(左对齐，默认)/right(右对齐)/center(居中)
-valign垂直vertical对齐方式，取值middle(居中，默认)/top(顶部对齐)/bottom(底部对齐) - tfoot标签，表格脚注(可写可不写，有些表格没有脚注)
里面需要包裹tr和td
tfoot常用属性
-height表格脚注高度
-align水平对齐方式，取值left(左对齐，默认)/right(右对齐)/center(居中)
-valign垂直vertical对齐方式，取值middle(居中，默认)/top(顶部对齐)/bottom(底部对齐)
一个课程表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body>
<table cellspacing="0" border="2">
<caption>课程表</caption>
<tdead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</tdead>
<tbody align="center" valign="middle">
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="6">休息</td>
</tr>
<tr>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>语文</td>
<td>英语</td>
<td>篮球比赛</td>
</tr>
<tr>
<td>化学</td>
<td>物理</td>
<td>体育</td>
<td>地理</td>
<td>语文</td>
<td rowspan="2">周练考试</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>生物</td>
<td>历史</td>
<td>地理</td>
<td>政治</td>
<td>数学</td>
<td rowspan="2">社会实践</td>
</tr>
<tr>
<td>物理</td>
<td>化学</td>
<td>物理</td>
<td>生物</td>
<td>体育</td>
</tr>
</tbody>
</table>
</body>
</html>
几个常用标签
| 标签名 | 标签语义 | 单/双标签 |
|---|---|---|
| br | 换行 | 单标签 |
| hr | 分割线 | 单标签 |
| pre | 按原文显示，即代码中写的是什么在浏览器上就显示什么 | 双标签 |
表单
表单基本结构
form标签，表单，双标签，以下为常用属性：
-action用于指定表单的提交地址
-target表单提交后如何打开页面，取值_self(本标签页打开，默认)/_blank(新标签页打开)
-method表单的提交方式，取值get(默认)/post
input标签，输入框，单标签
button标签，按钮，双标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://www.baidu.com/s" target="_blank" method="get">
<input type="text" name="wd">
<button>百度搜索</button>
</form>
<hr>
<form action="https://search.jd.com/Search" target="_blank" method="get">
<input type="text" name="keyword">
<button>京东搜索商品</button>
</form>
</body>
</html>
input标签
- 文本输入框
-type="text"文本输入框
-name数据的名称(键)
-value提交的数据值(值)
-maxlength输入框最大可输入长度
<input type="text">
- 密码输入框
-type="password"密码输入框
-name数据的名称(键)
-value提交的数据值(值)(一般不用，无意义)
-maxlength输入框最大可输入长度
<input type="password">
- 单选框
-type="radio"单选框
-name数据的名称(键)。注意：如果想要单选效果，多个radio的name属性值要保持一致
-value提交的数据值(值)
-checked让该单选按钮默认为选中
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male" checked>男
- 复选框
-type="checkbox"复选框
-name数据的名称(键)。
-value提交的数据值(值)
-checked让该单选按钮默认为选中
<input type="checkbox" name="hobby" value="smoke">吸烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="drive" checked>开车
- 隐藏域
用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据
-type="hidden"隐藏域
-name指定数据的名称(键)
-value指定的是真正提交的数据(值)
<input type="hidden" name="from" value="baidu">
- 提交按钮(功能和button标签类似)
-type=“submit” 提交按钮
-value按钮显示的文字，不传入value时按钮上的文字默认显示为提交
<!-- 确认按钮：第一种写法 -->
<button>确认</button>
<!-- 确认按钮：第一种写法 -->
<button type="submit">确认</button>
<!-- 确认按钮：第二种写法 -->
<input type="submit" value="确认">
- 重置按钮(功能和button标签类似)
-type=“reset” 提交按钮
-value按钮显示的文字，不传入value时按钮上的文字默认显示为重置
<!-- 重置按钮：第一种写法 -->
<button type="reset">重置</button>
<!-- 重置按钮：第二种写法 -->
<input type="reset" value="重置">
- 普通按钮(功能和button标签类似,需要配合js使用)
-type="button"普通按钮
<!-- 普通按钮：第一种写法 -->
<button type="button">检验账户是否被注册</button>
<!-- 普通按钮：第二种写法 -->
<input type="button" value="检验账户是否被注册">
文本域
textarea标签
-rows指定默认显示的行数，会影响文本域的高度。
-cols指定默认显示的列数，会影响文本域的宽度。
-其他属性，与普通文本输入框一致。
<textarea name="other" cols="23" rows="3"></textarea>
下拉框
select标签，下拉框
-name指定数据的名称。
option标签，选项，双标签
-value如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
-selected默认选中
<select name="place">
<option value="京">北京</option>
<option value="渝">重庆</option>
<option value="津">天津</option>
<option value="沪" selected>上海</option>
</select>
禁用表单控件
给表单控件的标签设置disabled属性可禁用表单控件。
input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性
label 标签
可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
-for用于与其他标签的id相对应，从而获取焦点
两种与 label 关联方式如下：
- 让 label 标签的 for 属性的值等于表单控件的 id 。
- 把表单控件套在 label 标签的里面。
fieldset 与 legend 的使用
fieldset 可以为表单控件分组、 legend 标签是分组的标题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="https://search.jd.com/Search" target="_blank">
<!-- 主要信息 -->
<fieldset>
<legend>主要信息</legend>
<!-- 文本输入框 -->
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" value="张三" maxlength="10"><br>
<!-- 密码输入框 -->
<label for="mima">密码：</label>
<input id="mima" type="password" name="pwd" value="123" maxlength="6"><br>
性别：
<input type="radio" name="gender" value="male" id="boy">
<label for="boy">男</label>
<input type="radio" name="gender" value="female" checked id="girl">
<label for="girl">女</label><br>
</fieldset>
<!-- 附加信息 -->
<fieldset>
<legend>附加信息</legend>
<!-- 多选框 -->
爱好：
<label>
<input type="checkbox" name="hobby"value="smoke"checked>抽烟
</label>
<label>
<input type="checkbox" name="hobby"value="drink">喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="drive" checked>开车
</label><br>
<label for="qita">其他：</label>
<textarea id="qita" name="other" cols="23" rows="3"></textarea><br>
籍贯：
<select name="place">
<option value="京">北京</option>
<option value="渝">重庆</option>
<option value="津">天津</option>
<option value="沪" selected>上海</option>
</select>
</fieldset>
<!-- 隐藏域 -->
<input type="hidden" name="from" value="baidu"><br>
<!-- 确认按钮：第一种写法 -->
<!-- <button>确认</button> -->
<!-- 确认按钮：第二种写法 -->
<input type="submit" value="确认">
<!-- 重置按钮：第一种写法 -->
<!-- <button type="reset">重置</button> -->
<!-- 重置按钮：第二种写法 -->
<input type="reset" value="重置">
<!-- 普通按钮：第一种写法 -->
<!-- <button type="button">检验账户是否被注册</button> -->
<!-- 普通按钮：第二种写法 -->
<input type="button" value="检验账户是否被注册">
</form>
</body>
</html>
框架标签
iframe标签，在网页中嵌入其他网页或文件，双标签
常用于在网页中嵌入广告，与超链接或表单的 target 配合，展示不同的内容。
-name ：框架名字，可以与 target 属性配合。
-width ： 框架的宽。
-height ： 框架的高度。
-frameborder ：是否显示边框，值：0(无边框)/1(有边框)
<!-- 利用iframe嵌入一个普通网页 -->
<iframe src="https://www.bilibili.com/" frameborder="0" width="900" height="300"></iframe>
<!-- 利用iframe嵌入一个广告网页 -->
<iframe width="300" height="250" src="https://pos.baidu.com/lcam?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=4244999833&s2=3949228475&dri=0&dis=0&dai=2&ps=2293x1059&enu=encoding&exps=110279,110275,110261,110252,110011&ant=0&psi=1c36b65e6cce1b1f&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1738411370040&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0109&kws=%E6%96%B0%E9%97%BB%2C%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83%2C%E6%96%B0%E9%97%BB%E9%A2%91%E9%81%93%2C%E6%97%B6%E4%BA%8B%E6%8A%A5%E9%81%93&dps=%E6%96%B0%E9%97%BB%2C%E6%96%B0%E9%97%BB%E4%B8%AD%E5%BF%83%2C%E5%8C%85%E5%90%AB%E6%9C%89%E6%97%B6%E6%94%BF%E6%96%B0%E9%97%BB%2C%E5%9B%BD%E5%86%85%E6%96%B0%E9%97%BB%2C%E5%9B%BD%E9%99%85%E6%96%B0%E9%97%BB%2C%E7%A4%BE%E4%BC%9A%E6%96%B0%E9%97%BB%2C%E6%97%B6%E4%BA%8B%E8%AF%84%E8%AE%BA%2C%E6%96%B0%E9%97%BB%E5%9B%BE%E7%89%87%2C%E6%96%B0%E9%97%BB%E4%B8%93%E9%A2%98%2C%E6%96%B0%E9%97%BB%E8%AE%BA%E5%9D%9B%2C%E5%86%9B%E4%BA%8B%2C%E5%8E%86%E5%8F%B2%2C%E7%9A%84%E4%B8%93%E4%B8%9A&dbv=2&drs=4&pcs=1519x695&pss=1519x9035&cfv=0&cpl=5&chi=1&cce=true&cec=UTF-8&tlm=1738411321&prot=2&rw=695<u=https%3A%2F%2Fnews.163.com%2F<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DtxOaR5oQZFXN32q7UnxXcI8tIvLUXaOOFXnVxesl5FK%26wd%3D%26eqid%3Da7eb30aa0249b3b800000005679e0d61&lcr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DtxOaR5oQZFXN32q7UnxXcI8tIvLUXaOOFXnVxesl5FK%26wd%3D%26eqid%3Da7eb30aa0249b3b800000005679e0d61&eqid=a7eb30aa0249b3b800000005679e0d61&ecd=1&dft=2&uc=1536x816&pis=-1x-1&sr=1536x864&tcn=1738411370&qn=ea92d3bd487a09f6&ft=1"></iframe>
<br>
<!-- 与超链接的target属性配合使用 -->
<a href="https://www.taobao.com/" target="taobao">点我逛淘宝</a><br>
<iframe name="taobao" width="900" height="300" frameborder="0"></iframe><br>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keyword">
<button>搜索</button>
</form><br>
<iframe name="container" width="900" height="300" frameborder="0"></iframe>
HTML实体(类似于转义字符)
在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一个分号 ;
见MDN 和 Named character references
常用实体如下表所示：
| 显示效果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | & nbsp; | & #160; | |
| < | 小于号 | & lt; | & #60; |
| > | 大于号 | & gt; | & #62; |
| & | 和号 | & amp; | & #38; |
| " | 引号 | & quot; | & #34; |
| ´ | 反引号 | & acute; | & #180; |
| ￠ | 分（cent） | & cent; | & #162; |
| £ | 镑（pound） | & pound; | & #163; |
| ¥ | 元（yen） | & yen; | & #165; |
| € | 欧元（euro） | & euro; | & #8364; |
| © | 版权（copyright） | & copy; | & #169; |
| ® | 注册商标 | & reg; | & #174; |
| ™ | 商标 | & trade; | & #8482; |
| × | 乘号 | & times | & #215; |
| ÷ | 除号 | & divide; | & #247; |
HTML全局属性
id给标签指定唯一标识，注意： id 是不能重复的。作用：可以让 label 标签与表单控件相关联；也可以与 CSS 、 JavaScript 配合使用
class 给标签指定类名，随后通过 CSS 就可以给标签设置样式。
style 给标签设置 CSS 样式。
dir 内容的方向，值: ltr (从左到右)、 rtl(从右到左)
title 给标签设置一个文字提示，一般超链接和图片用得比较多。
lang 给标签指定语言
更多全局属性见MDN
meta 元信息
网页相关信息。这些信息有些是便于搜索引擎收录信息
- 配置字符编码
<meta charset="utf-8">
- 针对 IE 浏览器的兼容性配置。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 针对移动端的配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
- 配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">
- 针对搜索引擎爬虫配置：
<meta name="robots" content="此处可选值见下表">
| 值 | 描述 |
|---|---|
| index | 允许搜索爬虫索引此页面 |
| noindex | 要求搜索爬虫不索引此页面 |
| follow | 允许搜索爬虫跟随此页面上的链接 |
| nofollow | 要求搜索爬虫不跟随此页面上的链接 |
| all | 与 index, follow 等价 |
| none | 与 noindex, nofollow 等价 |
| noarchive | 要求搜索引擎不缓存页面内容 |
| nocache | noarchive 的替代名称 |
- 配置网页作者：
<meta name="author" content="tony">
- 配置网页生成工具
<meta name="generator" content="Visual Studio Code">
- 配置定义网页版权信息：
<meta name="copyright" content="2023-2027©版权所有">
- 配置网页自动刷新
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
更多meta元信息见MDN
扫一扫
6805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
