<head></head>
文档头标签:
用来设置网页的配置项,紧跟在起始标签<html>
之后,可包含 title、meta、link、style、script 等。是所有其他头元素的容器,标记的内容不会在浏览器中显示。
<title></title>
文档标题标签:
用来设置网页的标题,没有属性,必须写在<head></head>
元素中。一个文档只能有一个,文字会显示在浏览器的标签栏上。
<title>慕课网-程序员的梦工厂</title>
<title></title>
也是搜索引擎收录网站时显示的标题。
<meta>
文档元标签:
用来设置网页的基础配置。是单标签。
合理设置网页的标题、关键字和页面描述,是 SEO 的重要手段。
SEO:Search Engine Optimization,搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,让网站在搜索引擎的结果中占据领先地位,获得品牌收益。
常用属性有:
- name:
属性值有:- Keywords:用来设置网页关键词。
- Description:用来设置网页描述。
页面描述也是搜索引擎显示的简介词语。
<meta name=”Keywords” content=”慕课网, JAVA, 前端, 大数据”> <meta name=”Description” content=”慕课网是 IT 既能学习平台”>
- content:内容,可以用逗号分隔不同的关键字。
- charset:字符集。
属性值有:- UTF-8:涵盖全球所有国家、民族的文字和大量图形字符。一个汉字占用 3 个字节数。适用于制作有非汉语的网页。
- GB2132:收录所有汉字字符和英语、少量韩文、日语和图形字符。一个汉字占用 2 个字节数。适用于制作只有汉字和英语的网页,由于一个汉字仅占 2 字节,网页文件尺寸明显减少。
无论使用 charset 设置哪种字符集,一定要在 VScode 编辑器中将文件也设置为相同的字符集,否则网页打开会出现乱码。
<meta charset=”GB2132”>
<link />
链接标签:
用来链接外部文件,主要用于引入样式表文件、图标文件,以及其他与文档相关的资源。是单标签。
属性有:
- rel:与文档之间的关系。
- href:外部资源的 URL。
// 引入 CSS 文件
<link rel=”stylesheet” href=”css/index.css”>
// 引入图标文件
<link rel=”icon” href=”images/favicon.ico”>
<body></body>
文档体标签:
用来设置网页的内容。
属性有:
- bgcolor:设置背景颜色。
- text:设置文本颜色 。
- link:设置链接颜色;vlink:已经访问了的链接的颜色;alink:正在被点击的链接的颜色。
浏览器默认html100%,body自带8px的外边距。
<hn></hn>
标题标签:
h 是 headline 的缩写。用于设置标题。
格式为:<hn>内容</hn>
,n 的范围为 1 到 6。从<h1>
到<h6>
,即从标题 1 到标题 6,标题字号由大到小。
搜索引擎非常看重
<h1></h1>
标签的内容,开发时应该将重点内容放到<h1></h1>
标签中。
但是,一个页面一般只能放置一个<h1></h1>
标签,否则会被搜索引擎视为作弊,将不会进行内容的拉取。
<p></p>
段落标签:
p 是 paragraph 的缩写。用于设置段落。
格式为:<p>内容</p>
。与前后的文本都换行分开,以单独的段落显示,还会添加一段额外的垂直空白距离,作为段落间距。
属性有:align。
<div></div>
块分区标签:
div 是 division 的缩写。用于为元素分组,常用于页面布局。
格式为:<div>内容</div>
。宽度为整一行,可以定义宽度和高度。能嵌套使用。
<span></span>
行内分区标签(内联标签):
用于为元素分组,常用于页面布局。
格式为:<span>内容</span>
。设置同一行的不同格式,宽度只为一小段,不可以定义宽度和高度。能嵌套使用。
<img>
图像标签:
img 是 image 的缩写。用来在网页中引用图像,为空标记。
格式为:<img src=”路径/文件名.文件格式” alt=”属性值”>
属性有:
- src:是 source 的缩写。用来设置图像的 URL。
- alt:是 alternate 的缩写。是对图像的文本描述。
- 当网页上的图像被加载完成后,鼠标移到上面去,会显示这个图像指定的属性文字。
- 如果图像没有下载或者加载失败,会用文字来代替图像显示。
- 搜索引擎可以通过这个属性的文字来抓取图像。
- 盲人使用的网页朗读器会朗读 alt 中的文本。
- width、height:设置图像的宽度和高度。如果省略其中的一个属性,则表示按原始比例缩放图像。单位是像素,但是不需要写出来。
<a></a>
超链接标签:
a 是 anchor 的缩写。用来创建超链接。超链接是将网页和网页连接在一起的方法,点击超链接可以跳转到其他网页。
格式为:<a href=”url” target=”属性值”>内容</a>
属性有:
-
href:hypertext reference,超文本引用,用于指定超链接目标的 URL。属性值可以是任何有效文档的相对路径或绝对路径,还可以是片段标识符和 JavaScript 代码段。
只有加上 href 属性(即使属性值为空),a 标签才会改变颜色并且出现下划线。
相对路径:文件或目录相对于当前工作目录的位置。
./
表示当前目录,../
表示上一级目录。
绝对路径:文件或目录相对于根目录的位置,绝对路径都从“/”开始。javascript:
是一个伪协议,表示在触发<a>
的默认动作时,执行一段 JavaScript 代码,而javascript:;
表示什么都不执行,也就是点击<a>
时没有任何效果。 -
target:定义超链接的打开方式。
属性值(在 HTML 4 中,属性值前面需要加上一个下划线):self
:默认,在当前窗口打开链接。blank
:在一个新窗户中打开链接。parent
:在父窗口中打开链接(框架中使用较多)。top
:在顶层窗口中打开链接(框架中使用较多)。
-
title:设置鼠标的悬停文本。
-
rel:用于指定当前页面与被链接页面的关系。属性值以空格分割。
- noreferrer:由当前页面跳转到被链接页面时,阻止 Request Headers 将当前页面地址或任何其他值作为 Referrer 发送。
在被链接页面,可以通过
document.referrer
获取来源页面。 - noopener:由当前页面跳转到被链接页面时,阻止被链接页面获得对当前页面的任何访问权限。
在被链接页面,可以通过
window.opener
拿到来源页面的 window 对象。
当添加rel=noopener
后,在被链接页面的window.opener
为 null。
- noreferrer:由当前页面跳转到被链接页面时,阻止 Request Headers 将当前页面地址或任何其他值作为 Referrer 发送。
锚点:
使用锚点可以精准跳转到指定的位置。
给某个元素添加唯一标识 id,然后 <a></a>
标签的 href 设置为 #id
,点击 <a></a>
标签就可以跳转过去。
<a href="#">回到顶部</a>
,href 设置为#
,点击会回到页面顶部。
// 同一页面的锚点
<a href=”#footer”>跳转到页面底部</a>
<a id=”footer”>这是页面底部</a>
// 不同页面的锚点
// index.html
<a href=”test.html#footer”>跳转到 test.html 页面底部</a>
// test.html
<div id=”footer”>这是页面底部</div>
下载链接:
href 属性指向 exe、zip、rar 等文件格式的链接,将自动成为下载链接。
邮件链接:
有 mailto
前缀的链接是邮件链接,系统将自动打开 Email 相关的软件。
<a href="mailto:999@qq.com">给小明发邮件</a>
电话链接:
有 tel:
前缀的链接是电话链接,系统将自动打开拨号盘。
<a href="tel:123456789">给小明打电话</a>
<br/>
换行标签:
为空标记,在任何地方创建手工换行。
<hr>
水平分割线标签:
段落之间的分割线。
属性有:
- width:设置宽度。
- size:设置粗细。
- color:设置颜色。
- align:设置对齐方式。
- title:当用户将鼠标悬停在分割线上时会出现 title 属性设置的属性值。
<pre>
预格式化标签:
可定义预格式化的文本。一个常见的应用就是用来表示计算机的源代码。
HTML框架:
框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果。
划分框架标签<frameset></frameset>
:
直接跟在<head></head>
标记之后,不需要<body></body>
,可以嵌套使用。
属性有:
- cols:分割左右窗口。“
*
”表示框架平均分成两个,还可以使用像素数和百分比分割。 - rows:分割上下窗口。
- frameborder:指定是否显示边框。0不显示,1显示。
- border:设置边框的大小。默认5px。
<frameset cols=”10%,3*,*,*></frameset>//生成四列。第一列占10%,第二列占剩余空间的3/5,第三列、第四列各占剩余空间的1/5.
子窗口标签<frame/>
:
是单标记,在<frameset></frameset>
中设置了几个窗口,就必须对应使用几个<frame/>
框架,而且必须使用src属性指定一个网页。
属性有:
- src
- name:框架名称。
- noresize:表示不能调整框架大小,没有设置则可以调整。
- scrolling:是否需要滚动条。属性值:auto根据需要自动出现;yes有;no无
- frameborder:指定是否显示边框。0不显示,1显示。