HTML笔记——②HTML常用标签、属性

yanqiu12138

已于 2023-10-12 22:46:00 修改

阅读量253

点赞数 2

分类专栏：前端学习文章标签： html 前端 javascript

于 2022-12-28 16:09:52 首次发布

本文链接：https://blog.csdn.net/yanqiu12138/article/details/128464469

版权

前端学习专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本系列笔记为nmy专属定制修改

一 HTML的标签

1.1 标签分类

HTML的标签（又称标记或元素）是由尖括号包围的关键词，分为单标签和双标签
常规标签（双标签）

<标记></标记>
<标记 属性=“属性值属性=“属性值”></标记>
<head></head>

空标记（单标记）

<标记/>
<标记属性=“属性值”/>
<br/>

1.2 HTML5 代码规范

HTML5 在代码验证时相对于XHTML会更宽松一点。

首行声明文档类型、元素名、属性名中可以使用混合大小写字母
不必关闭所有元素，包括空元素
允许属性值不加引号（前提是属性值没有空格）
允许等号两边的空格

<link rel = "stylesheet" href = "styles.css">

允许省略 <html> 标签和 <body>、<head>
<title> 元素在 HTML5 中是必需的。
短注释应该在单行中书写，并在  之前增加一个空格；长注释，应该在独立的行中书写
使用小写文件名，为了避免从对大小写不敏感的服务器转到一台对大小写敏感的服务器上的情况
属性名和属性值完全一样，可以简写为一个单词

但使用格式良好的“近似 XHTML 的”语法，令其他人更容易理解和使用和更加适配。
10. 首行声明文档类型使用大写，元素名、属性名使用小写
11. 关闭所有 HTML 元素，包括空元素<hr />
12. 属性值加引号
13. 等号两边精简空格
14. 避免长代码行，尽量避免代码行超过 80 个字符。
15. 不推荐省略 <html> 和 <body>、<head>

二 HTML常用标签

2.1 标题

格式：

标题:<h1></h1>   ...  <h6></h6>

在一个网页中，<h1>标题最重要，并且一个.html文件中只能出现一次<h1>标签。而<h5>、<h6>标签在网页中不经常使用。
每个标题独占一行

h1~h6的属性
属性	值	描述
align	left（默认）、center、right、justify（合理的边距）	不推荐使用。请使用Css替代它。

标准属性id, class, title, style, dir, lang, xml:lang

2.2 段落

格式：

段落:<p></p>

缩写文本<abbr title="etcetera">HTML 5</abbr>
	   <acronym title="World Wide Web">HTML 4.01</acronym>

预格式文本：<pre></pre>
<!-- 预格式文本保留了空格和换行。很适合显示计算机代码-->
与此类似的：<code>Computer code计算机代码</code>
<kbd>Keyboard input键盘码</kbd>
<tt>Teletype text打字机代码</tt>
<samp>Sample text计算机代码样本</samp>
<var>Computer variable变量</var>

改变文字方向：<bdo dir="rtl">
			 Here is some Hebrew text
			 </bdo>

段落之间存在空隙
属性不推荐使用align

2.2 文本修饰标签

格式：

加粗:<strong></strong>、<b></b>
斜体:<em></em>、<i></i>
下标:<sub></sub>
上标:<sup></sup>
删除线:<del></del>、<s></s>
下划线: <ins></ins>、<u></u>

文本修饰标签效果
一般情况下，删除文本都是和插入文本配合使用的。

2.3 div、span标签

<div></div>
<h3><span>体育</span><span style="color:gray;">sports</span></h3>

div标签：没有语义，用来划分页面的区域，独占一行。
在这里插入图片描述
span标签：没有语义，主要应用在对于文本独立修饰的时候。

2.4 间隔符

HTML语言中是不识别间隔符的，会统一按照一个空格输出，当输出多个空格或者其他间隔符时需要用标签

换行符：<br/>
水平线：<hr/>

在 XHTML 中，把结束标签放在开始标签中，也就是 <br />

2.5 图片

格式：

<img src="URL地址" alt="替换文本" title="提示文本">

图片的基本属性
img：图片标签
src : 引入图片的地址
alt : 图片不显示之后（加载失败）的提示信息

title : 鼠标悬停上去之后的提示信息
width、height : 图片的大小，输入数字即可，默认等比例缩放
请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。

2.6 路径的引入

相对路径（相对于html文件的位置）
. / 下一级
../ 上一级
绝对路径 （盘符可省略）：绝对路径是指文件在硬盘上真正存在的路径，如E:\book\网页布\代码\第2章\bg.jpg；
亦或者是完整的网络地址https://img-blog.csdnimg.cn/6fe1f68588804f59bcfc7162272cf5fa.png

2.7 音频

格式：

<audio src="URL地址" alt="替换文本" title="提示文本">

支持格式Mp3、Ogg、Wav

音频的属性
属性	描述
controls	显示音频控制面板
loop	循环播放
autoplay	浏览器一般会禁用此功能

2.8 视频

格式：

<video src="URL地址"></video>

视频的属性
属性	描述
controls	显示音频控制面板
loop	循环播放
autoplay	浏览器一般仅支持静音状态自动播放
muted	静音播放

2.8 链接标签

格式：

<a href="路径"  title="鼠标悬停上去之后的提示信息"  target="规定在何处打开文档">内容</a>

href属性 : 链接的地址，herf="#" 表示一个空锚，用于未确定连接地址时或者返回页面顶部；
target属性 : 可以改变链接打开的方式；
target="_self"：（默认值）在当前页面打开；
target="_top"：在浏览器的整个窗口打开链接，忽略任何框架；
target="_parent"：在上一级窗口中打开链接；
没有框架时前三者几乎相同
target="_blank" 新窗口打开

base单标签：作用就是改变链接跳转的默认行为的。一般写到<head>当中，

<base target="_blank">

2.9 锚点（页内跳转）

两种做法

#号 + id属性
#号 + name属性（注意name属性需单独一个a标签）

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="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>
  <a href="#1">HTML</a>
  <a href="#2">css层叠样式表</a>
  <a href="#3">JavaScript</a>
 
  <h2 id="1">HTML超文本编辑语言</h2>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  <h2 id="2">css层叠样式表</h2>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  <h2 id="3">JS脚本</h2>
  <p>模拟的段落</p>
  <p>模拟的段落</p>
  
</body>
</html>

name·

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="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>
    <a href="#1">HTML</a>
    <a href="#2">css层叠样式表</a>
    <a href="#3">JavaScript</a>

    <a name="1"></a>
    <h2>HTML超文本编辑语言</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="2"></a>
    <h2>css层叠样式表</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <p>模拟的段落</p>
    <a name="3"></a>
    <h2>JS脚本</h2>
    <p>模拟的段落</p>
    <p>模拟的段落</p>    
</body>
</html>

2.9 网页栏图片设置

<link rel="icon" href="//y.qq.com/favicon.ico?max_age=2592000">
<link rel="shortcut icon " href="favicon.ico" type="image/x-icon">
<!-- 早年微软公司的link标签必须包含一个空格,不遵守w3c的建议,有些其他的图像格式不能被部分浏览器理解 -->

三 HTML初始代码

每个html文件都有的代码叫做初始代码，要复合html文件的规范写法。

! + tab键 : 快速的创建html的初始代码

<!DOCTYPE html> <!-- 文档声明 : 告诉浏览器这是一个html文件 -->
<html lang="en"> <!-- html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站 -->
<head>
    <meta charset="UTF-8"> <!--  规定 HTML 文档的字符编码 charset="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>

3.1 骨架代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <title>这里是title</title>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3.2 `<!DOCTYPE html>`

文档类型声明标签 : 告诉浏览器这个页面采取哪种版本来显示页面，不是HTML标签，只是一条浏览器指令，所以大小写均可，大写更为标准
<!DOCTYPE html>声明使用HTML5版本

使浏览器按照W3C的标准解析渲染页面，否则浏览器可能使用自己的怪异模式解析渲染页面，在不同的浏览器就会显示不同的样式。

3.3 `<html lang="en">`

<html lang="zh-CN" xml:lang="zh-CN">更完善

lang属性：HTML语言声明属性，用来定义当前文档显示的语言。服务于搜索引擎爬虫。

新的XHTML文档中，lang属性已经被xml:lang属性代替。为了兼容性，XHTML 1.0文档的<html>元素中同时使用lang属性和xml:lang属性。
如果网页定义为XHTML1.1或者XML格式,那么可以使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法)。

3.4 meta标签详解

<meta>是HTML语言<head>区的一个辅助性标签，作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等
meta的属性有两种：name和http- equiv。

3.4.1 meta的属性①name

name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类，语法格式是：

<meta name="参数"content="具体的参数值">。

keywords(关键字)，告诉搜索引擎你网页的关键字是什么。

<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">

description(网站内容描述)，告诉搜索引擎你的网站主要内容。

<meta name="description"content="yanqiu12138的博客,html的meta总结，meta是html语言head区的一个辅助性标签。">

robots(机器人向导)，用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
参数有all、none、index、noindex、follow、nofollow。默认是all。

<meta name="robots"content="none">

信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

author(作者)，标注网页的作者

<meta name="author"content="root,root@xxxx.com">

generator说明网站的采用的什么软件制作。

<meta name="generator"content="信息参数"/>

COPYRIGHT说明网站版权信息。

<META NAME="COPYRIGHT"CONTENT="信息参数">

revisit-after代表网站重访

<META name="revisit-after"CONTENT="7days">

3.4.2 meta的属性②http- equiv

相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content。

<meta http-equiv="参数"content="参数变量值">；

expires(期限)使用GMT的时间格式，用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">

Pragma(cache模式)禁止浏览器从本地计算机的缓存中访问页面内容。这样设定，访问者将无法脱机浏览。

<meta http-equiv="Pragma"content="no-cache">

Refresh(刷新)自动刷新并指向新页面。

<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

2是指停留2秒钟后自动刷新到URL网址。

Set-Cookie(cookie设定)如果网页过期，那么存盘的cookie将被删除。同样必须使用GMT的时间格式。

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

Window-target(显示窗口的设定)强制页面在当前窗口以独立页面显示。用来防止别人在框架里调用自己的页面。

<meta http-equiv="Window-target"content="_top">

content-Type(显示字符集的设定)

<meta http-equiv="content-Type"content="text/html;charset=gb2312">

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

相当于<meta charset="UTF-8">

content-Language（显示语言的设定）

<meta http-equiv="Content-Language"content="zh-cn"/>

Cache-Control(指定请求和响应遵循的缓存机制)

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

ly-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下

Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

<meta http-equiv="Cache-Control" content="no-siteapp" />

用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

http-equiv="imagetoolbar 指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

<meta http-equiv="imagetoolbar"content="false"/>

Content-Script-Type W3C网页规范，指明页面中脚本的类型。

<Meta http-equiv="Content-Script-Type"Content="text/javascript">

3.5 `<meta charset="UTF-8">`

声明编码方式，一般采用UTF-8保证中英文兼容，要与右下角的编码方式相同
在这里插入图片描述
是content-Type的简写

3.6 `<meta http-equiv="X-UA-Compatible" content="IE=edge">`

X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。
为了避免制作出的页面在IE8下面出现错误，建议直接将IE8使用IE7进行渲染。即content="IE=7"
content="IE=5"/content="IE=7"使用 Windows Internet Explorer 5/7 的标准渲染模式。
content="IE=8"开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。
content="edge"以最高级别的可用模式显示内容
content="IE=Edge,chrome=1" 如果IE有安装Google Chrome Frame浏览器有效，外观是IE的菜单和界面，使用的是Google Chrome浏览器内核。
content="IE=EmulateIE7"使用 <!DOCTYPE> 指令确定如何呈现内容，标准模式指令以Windows Internet Explorer 7 标准模式显示，Quirks 模式指令以 IE5 模式显示。对于多数网站来说，它是首选的兼容性模式。

在开发AngularJS项目时（只支持IE8及以上版本或chrome/firefox），而有些同事IE8登录却还提示“请使用IE8及以上版本或chrome/firefox，如果您使用IE8，请在”工具”菜单中，调整为非“兼容性视图”！
将项目中的.html及.jsp文件的<head>的最前面加上

<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>

（即如上meta加在其它meta之前）

3.7 `<meta name="viewport" content="width=device-width, initial-scale=1.0">`

主要针对移动设备缩放的问题
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

3.8 DNS预解析dns-prefetch

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。
目前每次DNS解析，通常在200ms以下。针对DNS解析耗时问题，一些浏览器通过DNS Prefetch 来提高访问的流畅性。

Dns请求虽然占用了很少的带宽，但会有很高的延迟，由其以移动网络会更加明显。通过dns预解析技术可以很好的降低延迟
在firefox上使用dns-prefetch，dns预解析是与页面加载是并行处理的，且不用影响到页面加载的性能.

DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//www.zhix.net">

<link rel="dns-prefetch" href="//api.share.zhix.net">

<link rel="dns-prefetch" href="//bdimg.share.zhix.net">
<!--如果不确定是http还是https连接的话建议如下写法 -->
<link rel="dns-prefetch" href="//renpengpeng.com" />

3.9 link标签详解

引入css样式表

<link rel="stylesheet" href="styles/main.css">

页面图标设置

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon " href="favicon.ico" type="image/x-icon">

<link href="链接" rel="preload" as="类型">书写一些声明式的资源获取请求，浏览器的主渲染机制介入前就进行预加载。

audio: 音频文件。
document: 一个将要被嵌入到或内部的HTML文档。
embed: 一个将要被嵌入到元素内部的资源。
fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font: 字体文件。
image: 图片文件。
object: 一个将会被嵌入到元素内的文件。
script: JavaScript文件。
style: 样式表。
track: WebVTT文件。
worker: 一个JavaScript的web worker或shared worker。
video: 视频文件。