小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

学习笔记---web前端_web书签链接

作者：小蓝xlanll | 2024-04-24 15:57:37

踩

web书签链接

一、HTML5内容类型

二、HTML5 基本结构

1. 标签

HTML文档由标签和被标签的内容组成。标签能产生所要的各种效果，其功能类似于一个排版软件，将网页的内容排成理想的效果。标签(tag)是用一对尖括号“<”和“>”括起来的单词或单词缩写，各种标签的效果差别很入，但总的表示形式却大同小异，大多数都成对出现。在HTML中，通常标签都是由开始标签和结束标签组成的，开始
标签用“<标签>”表示，结束标签用“</标签>”表示。

其格式为: <标签>受标签影响的内容</标签>

2.属性
标签仅仅规定这是什么信息，但是要想显示或控制这些信就需要在标签后面加
上相关的属性。标签通过属性来制作出各种效果，通常都是以“属性名="值"”的形式来表示，用空格隔开后，还可以指定多个属性，并且在指定多个属性时不用区分顺序。

其格式为: <标签:属性1="属性值1" 属性2="属性值2"…>受标签影响的内容 </标签>
3.元素
元素指的是包含标签在内的整体，元素的内容是开始标签与结束标签之间的内容。没有内容的HTML元素被称为空元素，空元素是在开始标签中关闭的。

三、HTML5编写规范

标签的规范 (1)标签分单标签和双标签，双标签往往是成对出现，所有标签(包括空标签) 都必须关闭，如<br/>、<img/>、<p>…</p >等。 (2)标签名和属性建议都用小写字母。(3)多数HTML标签可以嵌套，但不允许交叉。
属性的规范
(1)根据需要可以使用该标签的所有属性，也可以只用其中的几个属性。在使用时，属性之间没有顺序。
(2)属性值都要用双引号括起来。
(3)并不是所有的标签都有属性，如换行标签就没有。
元素的嵌套
(1)块级元素可以包含行级元素或其他块级元素，但行级元素却不能包含块级元素，它只能包含其它的行级元素。
(2)有几个特殊的块级元素只能包含行级元素，不能再包含块级元素，这几个特殊的标签是:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<dt>。
代码的缩进
HTML代码并不要求在书写时缩进，但为了文档的构性和层次性，建议初学者使用标记时首尾对齐，内部的内容向右缩进几格。
基本文档结构

四、head元素

<title>标签

<title>标签是页面标题标签，它将HTML文件的标题显示在浏览器的标题栏中，用
以说明文件的用途，这个标签只能应用于<head>与</head>之间。<title>标签是对文件
内容的概括，一个好的标题能使读者从中判断出该文件的大概内容。
网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。<title>标签位于<head>与</head>中，用于标示文档标题。格式如下:<title>标题名</title>
<meta>标签

<meta>标签是元信息标签，该标签可重复出现在头部标签中，用来指明本页的作者、
制作工具、所包含的关键字，以及其他一些描述网页的信息。语法格式为:
<meta name="参数"content="参数值">
name属性主要用于描述网页摘要信息，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。
name属性主要有以下两个参数:keywords和descrin on。
1. keywords(关键字)
keywords用来告诉搜索引擎网页使用的关键字。
2. description(网站内容描述)
description用来告诉搜索引擎网站主要的内容。
<link>标签

<link>标签是关联标签，用于定义当前文档与Web集合中其他文档的关系，建立一
个树状链接组织。<link>标签并不将其他文档实际链接到当前文档中，只是提供链接该文档的一个路径。link标签最常用的是用来链接CSS样式文件，格式如下:
<link rel="stylesheet"href="外部样式表文件名.css" type="text/css">
.<script>标签 <script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可在文档中包含一段客户端脚本程序。此标签可以位于文档中任何位置，但常位于<head>标签内，以便于维护。格式如下:<script type="text/javascript"src="脚本文件名.js"></script>

五、文本元素

1.标题文字标签

在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。
<h# align="left|center|right"> 标题文字 </h#>
“#”用来指定标题文字的大小，#取1~6之间的整数值，取1时文字最大，取6时文字最小。

2.基础标签

3.特殊符号

4.文本层次语义元素

文本层次语义元素主要包括： time元素，mark元素和cite元素

<time>标签 用于定义公历的时间（24小时制）或日期，时间和时区偏移是可选的。 <time>标签不会在浏览器中呈现任何特殊效果。<time>标签的属性见下表。

<mark>标签 用来定义带有记号的文本，其主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意

<cite>标签 可以创建一个引用标记，用于对文档参考文献的引用说明，一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符

六、基本排版元素

1. 段落标签

段落标签<p>是HTML格式中特有的段落元素，在HTML格式里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉，它会根据窗口的宽度自动转折到下一行。

段落标签的格式为：

<p align="left|center|right"> 文字 </p>

2.换行标签

<br/>标签将打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行中都会使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。换行标签的格式为：

文字 <br />

3.预格式化标签

<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。预格式化标签的格式为：

<pre>文本块</pre>

4.缩排标签

<blockquote>标签可定义一个块引用。<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。

也就是说，块引用拥有它们自己的空间。缩排标签的格式为：

<blockquote>文本</blockquote>

blockquote元素中一般嵌套p元素，用于标记被引用的文本，这些引用文本并不是直接位于blockquote元素中。如果引文来自在线资源（包括自己网站中的其他地方），那么可以在<blockquote> 标签的cite（引用）属性中指明原始来源的URL。

通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。

5.水平线标签

水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。水平线标签的格式为： <hr />

6.排版标签案例

七、列表元素

无序列表 当创建一个无序列表时，主要使用用HTML的<ul>标签和<li>标签来标记。其中<ul>

标签标识一个无序列表的开始；<li>标签标识一个无序列表项。格式为：

<ul>

<li> 第一个列表项

…

</ul>

有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺

序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表。格式为：

<ol>

<li> 表项1

…

</ol>

定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是

一系列术语以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：

<dl>标签、<dt>和<dd>标签。<dl> 常用于对术语或名词进行解释和描述，与无序和有

序列表不同，定义列表的列表项前没有任何项目符号。

格式为：

<dl>

<dt>…第一个标题项…</dt>

<dd>…对第一个标题项的解释文字…</dd>

<dt>…第二个标题项…</dt>

<dd>…对第二个标题项的解释文字…</dd>

</dl>

嵌套列表

所谓嵌套列表就是无序列表与有序列表嵌套混合使用。嵌套列表可以把页面分为多

个层次，给人以很强的层次感。

列表举例
八、图像元素

网页图像的常用格式

1．常用的网页图像格式

虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在网页上常用的图像格式有3种：GIF、JPEG和PNG。

2．使用网页图像的要点

（1）高质量的图像因其图像体积过大，不太适合网络传输。

（2）如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像

图像标签

在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中的。

图像标签的格式为：

<img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度"

height="图像高度" border="边框宽度" hspace="水平空白" vspace="垂直空白"

align="环绕方式|对齐方式" />

图像标签举例

九、超链接元素

超链接概述

1．超链接的定义

超链接（hyperlink）是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网

页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚

至是一个应用程序。

2．超链接的分类

根据超链接目标文件不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；

根据超链接单击对象不同，超链接可分为文字超链接、图像超链接、图像映射等。

3．路径

创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方

式：绝对路径、根目录相对路径和文档目录相对路径

超连接的应用

1．创建锚点

锚点与链接的文字可以在同一个页面，也可以在不同的页面。在实现锚点链接之前，需要

先创建锚点，通过创建的锚点才能对页面的内容进行引导与跳转。创建锚点的语法格式如下：

<a href="url" title="指向链接显示的文字" target="窗口名称"> 热点文本 </a>

target属性设定链接被单击后所要开始窗口的方式，有以下4种方式。

_blank：在新窗口中打开被链接文档。

_self：默认。在相同的框架中打开被链接文档。

_parent：在父框架集中打开被链接文档。

_top：在整个窗口中打开被链接文档

2．书签链接

书签就是用<a>标签对网页元素作一个记号，其功能类似于用于固定船的锚，所以书签也

称锚记或锚点。如果页面中有多个书签链接，对不同目标元素要设置不同的书签名。书签名

在<a>标签的name属性中定义，格式为：

<a name="记号名"> 目标文本附近的内容 </a>

<a href="#记号名"> 热点文本 </a>

3．下载文件链接

当需要在网站中提供资料下载时，就需要为资料文件提供下载链接。如果超链接指向的不是

一个网页文件，而是其他文件，如zip、rar、mp3、exe文件等，单击链接时就会下载相应的文件。

格式为：

<a href="文件路径"> 热点文本 </a>

十、div和span元素

div元素

div的英文全称为division，意为“区分”。<div>标签是一个块级元素，用来为

HTML文档中大块内容提供结构和背景，它可以把文档分割为独立的、不同的部分，其中

的内容可以是任何HTML元素。

由于<div>标签没有明显的外观效果，所以需要为其添加CSS样式属性，才能看到区

块的外观效果。<div>标签的格式为：

<div> HTML元素 </div>

span元素

<span>标签用来定义文档中一行的一部分，是行级元素。行级元素没有固定的宽度，

根据<span>元素的内容决定。<span>元素的内容主要是文本，其语法格式为：

<span>内容</span>

span与div的区别

span与div在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，

且区域间彼此是独立的。不过，两者在使用上还是有一些差异。

1．区域内是否换行

div标签区域内的对象与区域外的上下文会自动换行，而span标签区域内的对象与

区域外的对象不会自动换行。

2．标签相互包含

div与span标签区域可以同时在网页上使用，一般在使用上建议用div标签包含span

标签；但span标签最好不包含div标签，否则会造成span标签的区域不完整，形成断行

的现象

十一、音视频标签

HTML5嵌入视频

HTML5嵌入音频

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/480274