跳至主要內容

常用标签

Hu Wujie

常用标签

一、常用标签

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

1.1、单标签

  • 注释标签 ：<!-- 注释 -->
  • 换行标签：<br> 或 <br />
  • 水平线标签：<hr> 或 <hr />
  • 图片标签：<img> 或 <img />

src : 图片的来源（必写属性）

alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求）

title : 提示文本，鼠标放到图片上显示的文字

width : 图片宽度

height : 图片高度

PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放

  • 输入框：<input> 或 <input />
  • 外部资源链接：<link href="example.css" rel="stylesheet">

1.2、双标签

  • 段落标签：<p></p>

一般用作一段段的文字。上下自动生成空白行。br 换行不会生成空白行。

  • 标题标签：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>

h1 在一个页面里最好只出现一次。（作用是：便于SEO 搜索引擎优化）

  • 文本加粗 ：<strong></strong> 或者 <b></b>

工作里尽量使用strong，对于盲人来说 strong有语义强调的功能。

  • 文本倾斜：<em></em> <i></i> <!-- 工作里尽量使用em，原因同strong -->
  • 删除线标签：<del></del> <s></s> <!--工作里尽量使用del -->
  • 下划线标签：<ins></ins> <u></u> <!--工作里尽量ins-->

二、超链接

<a href="" title="" target="">填写内容</a>

href ：超链接指向的url地址。（跳转的页面， 必写属性

title ： 提示文本，鼠标放到链接上显示的文字

target="_self" （默认值），在自身页面打开（关闭自身页面，打开链接页面）

target=”_blank” 打开新页面，（自身页面不关闭，打开一个新的链接页面）

PS：当 href 的值为 javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转。

2.1、锚链接

我们先搞清楚什么是锚链接：

锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。

锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。

<p id="AAA">
  
</p>
...
<a href="#AAA"></a>   // 超链接到锚点

2.2、空链

不知道链接到那个页面的时候，用空链

<a href="#">空链</a>

PS：空链相当于 #top，实际点击此链接的时候会跳转到页首的位置。

2.3、文件下载

<!--压缩文件下载-->
<a href="./test.rar"></a>

<!--文件下载-->
<a href="" download="5.html">点击下载</a>

2.4、超链接优化写法

<base target="_blank">   // 让所有的超链接都在新窗口打开

PS：写的位置在 head 里面。

三、特殊字符（HTML 实体）

是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）。

实体常常用于显示保留字符（这些字符会被解析为 HTML 代码，比如<括号）和不可见的字符（如“不换行空格”）。你也可以用实体来代替其他难以用标准键盘键入的字符。

特殊符号字符代码
(空格)&nbsp;
<&lt;
>&gt;
&&amp;
¥&yen;
©&copy;

参考链接：HTML特殊字符编码对照表

四、列表

4.1、无序列表

<ul> 元素（或称 HTML 无序列表元素）表示一个内部包含多个元素的无序列表或项目的元素。

<ul type="">
	<li></li>    <!-- 列表项 -->
	<li></li>
	<li></li>
	......
</ul>

属性：

  • type：着重号样式

type="square" ：小方块

type="disc" ： 实心小圆圈

type="circle" ： 空心小圆圈

4.2、有序列表

<ol> 元素表示有序列表，通常渲染为一个带编号的列表。

<ol type="" start="">
    <li></li>   <!-- 列表项 -->
    <li></li>
    <li></li>
    ......
</ol>

type="1,a,A,i,I" ，type的值可以为1,a,A,i,I

start="3" 指定了列表编号的起始值（只能是数字）。

reversed：指定列表中的条目是否是倒序排列的

4.3、自定义列表

通常用于展示词汇表或者元数据 (键 - 值对列表)。

<dl>
  <dt></dt>    <!-- 标题（1条或多条） -->
  <dd></dd>   <!-- 解释标题（1条或多条） -->
  <dd></dd>   <!-- 解释标题（1条或多条） -->
</dl>

五、音频/视频标签

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
<video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

属性：

width：音频/视频展示区域的宽度，单位是 CSS 像素。

height：音频/视频展示区域的高度

src：音频/视频文件的 URL。

controls: 显示音频/视频控件（比如播放/暂停按钮）

autoplay: 音频/视频在就绪后马上播放

loop: 每当音频/视频结束时重新开始播放。

muted：默认值是 false，设置为true的时候，视频播放的时候音频会关闭 。

poster：一个海报帧的 URL，用于在用户播放或者跳帧之前展示。

preload: 有三个值：auto，metadata，none 是否在页面加载后载入音频/视频。（如果设置了 autoplay 属性，则忽略该属性）

  • auto: 当页面加载后载入整个音频
  • metadata: 当页面加载后只载入元数据
  • none: 当页面加载后不载入音频
  • 空字符串：也就代指 auto 值。

六、head标签相关知识

head标签是文档相关的配置信息（元数据），包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息。

头部标签元素描述了文档的各种属性和信息，包括文档的标题、作者，关键字，文档的描述，以及与外部资源之间的关系等等。

下面列举一些head标签中常用的标签：

title标签

<title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。

base标签

<base> 元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

link标签

link标签规定了当前文档与外部资源的关系，常用于链接样式表CSS，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标) 。

<!--链接样式表CSS-->
<link rel="stylesheet" type="text/css" href="./demo.css" />
<!--设置网站icon图标-->
<link rel="icon" href="favicon.ico" />

rel="stylesheet"：链接的是什么？比如：样式表stylesheet，还是图标icon type="text/css"：规定链接文件的类型是css文件 href="./demo.css"：链接的文件路径

style标签

<style>元素主要设置文档的样式信息。

<style>
    p {
        color: blue;
    }
</style>

meta标签

meta元素可以定义文档的各种元数据，提供各种文档信息，通俗点说就是可以理解为提供了关于网站的各种信息。被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

下面列举一些meta标签常用属性：

charset编码

声明了文档的字符编码。

<meta charset="UTF-8">

ASCII/ANSI/Unicode：英语 GBK ：亚洲通用字符集 GB2312：中文简体 Big5 ：台澳港繁体 UTF-8：世界通用字符集

name和content

name属性和content属性一般结合起来使用，name用来表示元数据的类型，表示当前meta标签的具体作用；content属性用来提供值。

namecontent
application-name网页中所运行的应用程序的名称
keywords描述网站内容的关键词,以逗号隔开，用于SEO搜索
description一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
author当前页的作者名
copyright版权信息
referrer控制由当前文档发出的请求的 HTTP Referer 请求头。
rendererrenderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面
viewport它提供有关视口初始大小的提示，仅供移动设备使用

author示例：

<meta name="author" content="前端队长">

http-equiv和content

http-equiv属性定义了一个编译指示指令。

http-equiv属性content
content-type声明网页字符编码。其值必须是text/html; charset=utf-8
refresh指定一个时间间隔(以秒为单位),在此时间过去之后从服务器重新载入当前页面,也可以另外指定一个页面.
X-UA-Compatible浏览器采取何种版本渲染当前页面
expires设定网页的到期时间，过期后网页必须到服务器上重新传输
catch-control指定所有缓存机制在整个请求/响应链中必须服从的指令

示例：网页自动跳转

<!--网页5秒后自动跳转到百度首页 -->
<meta http-equiv="reflesh" content="5; http://www.baidu.com">

（完）