HTML·第二章网页制作的排版方法

在HTML中浏览器会忽略用户输入的回车符，为了使文字段落排列整齐，通常会使用标签实现这一功能，段落标签<p>是HTML格式中特有的段落元素，HTML会根据文本每行长度进行自动下一行，不必要注意文本长度，格式为：
<p align="left|center|right">文字</p>
属性 align:设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）、right（右对齐），默认为left

以上格式中的“|”表示或者，即是多选项之一

实例：

<! DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>段落标记示例</title>
    </head>
    <body>
        <p align="center">居中示例</p>
        <p align="right">右实例</p>
        <p align="left">左示例</p>
        /*如果段落文字过长HTML会自动排版*/
        <p align="center">这是一段段落示例文本，用于演示段落自动分行的功能，在此可不用考虑文本长度进行编写，HTML会自动给你换行，当然HTML是不会识别你输入的换行符

比如在这里我换行了两次而HTML是不会识别出来</p>
        <p align="center">Copyright &copy;2024 MortalTom</p>
    </body>
</html>
运行图：

2.1.2 标题标签

在网页中，标题是一段文字的核心，所以总是用加强的效果表示；标题使用<h1>至<h6>标签进行定义。由大到小为<h1>——><h6>，HTML会自动在标题前后添加一个额外的换行符。

以下是标题格式：
<h #align="left|center|right">标题文字</h#>
以下是标题示例代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>标题示例</title>
    </head>
    <body>
        <h1>一级标题</h1>
	    <h2>二级标题</h2>
	    <h3>三级标题<h3>
	    <h4>四级标题</h4>
	    <h5>五级标题</h5>
	    <h6>六级标题</h6>
	    <p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
编译运行图：

2.1.3 换行标签

网页并都像段落那样，有时并不需要那么多的<p>标签来分割内容。如果编辑网页内容时只是为了换行可以使用<br/>来进行换行

<br/>标签会将HTML文档中正常段落修改间距和换行。<br/>放在任意一行都会使改行进行换行操作，如果放于文字末尾，可以将后面的文字、图像、表格等显示于下一行，而又不会在行宇行之间留下空行，也就是强制文本进行换行操作。

语法如下：
这是演示文本<br/>在此处强制换了一行
以下是示例代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>换行符示例</title>
    </head>
    <body>
		这是一段文字将会在这里进行换行操作<br/>可以看到已经进行换行操作了
		也可以当作修改布局的美化<br/><br/><br/>
		在此处换行了三次<br/>
	<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
以下是浏览器运行图：

2.1.4 水平线标签

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

格式为：
<he align="center|right|left" size="横线粗细(输入数值)" width="横线长度(可以输入百分比)" color="横线颜色(一般输入十六进制数或者直接输入颜色的英文名但是色域少)" noshade="noshade"/>
颜色表：

颜色十六进制码

颜色色彩英文名十六进制代码
黑色 black #000000
蓝色 blue #0000ff
棕色 brown #a52a2a
青色 cyan #00ffff
灰色 gray #808080
绿色 green #008000
乳白色 ivory #fffff0
橘黄色 orange #ffa500
粉红色 pink #ffc0cb
红色 red #ff0000
白色 white #ffffff
黄色 yellow #ffff00
深红色 crimson #cd061f
紫色 purple #800080
淡紫色 lavender #dbdbf8

演示代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>水平线示例</title>
    </head>
    <body>
		在这里插入一条颜色为#ffff33的一条大小粗细为5的水平线占据整个界面
		<hr align="center" size="5" width="100%" color="#ffff33" noshade="noshade"/>
		<br/>
		在这里插入一条颜色为blue的一条大小粗细为50的水平线站距半个界面于中间
		<hr align="center" size="50" width="50%" color="blue" noshade="noshade"/>
	<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
效果为：

颜色十六进制码
颜色	色彩英文名	十六进制代码
黑色	black	#000000
蓝色	blue	#0000ff
棕色	brown	#a52a2a
青色	cyan	#00ffff
灰色	gray	#808080
绿色	green	#008000
乳白色	ivory	#fffff0
橘黄色	orange	#ffa500
粉红色	pink	#ffc0cb
红色	red	#ff0000
白色	white	#ffffff
黄色	yellow	#ffff00
深红色	crimson	#cd061f
紫色	purple	#800080
淡紫色	lavender	#dbdbf8

2.1.5 预格式化标签

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

格式为：
<pre>
这是一段保留了
格式的文字
无论是空    格和换行都会被保留下来
</pre>
以下是示例代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>格式保留示例</title>
    </head>
    <body>
		<h1 align="center">这种标签适合于代码演示，比如以下JAVA代码：</h1>
		<pre align="center">
			public static void main(String[]args){
				String i="MortalTom的代码演示";
				System.out.println(i);
			}
		</pre>
	<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
运行如图：

2.1.6 缩排标签

<blockquote>标签可定义一个块引用。此标签体内所有的文本会从常规文本中分离出来，经常会在左右两边进行缩进，而且有时会使用斜体，也就是说，块引用拥有自己独立的空间，本文章也使用了块引用

格式为：
<blockquote>文本</blockquote>
演示代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>块引用示例</title>
    </head>
    <body>
		<h1 align="center">以下便是块引用：</h1>
		这里便是正常文本显示
		<blockquote>
		在这里浏览器给我们自动添加了换行效果<br/>
		在这里便是块引用
		</blockquote>
		这样可以更直观的看到块引用的区别
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
以下便是运行图：

2.1.7 案例

让我们使用以上的标签进行项目编写吧

以下是包含以上标签的代码：

<!--示例-->
<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>实例</title>
    </head>
    <body>
		<h1 align="center">京东JD.COM-专业综合网上购物商城</h1>
		<hr align="center" size="10" color="red" width="100%" noshade="noshade"/>
		<p align="left">&nbsp;&nbsp;&nbsp;销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、健康、母婴、美妆、个护、食品、旅游等品类。<br/></p>
		<pre>京东PLUS会员	免费体验30天！ 更多优惠尽在京东！</pre>
		<blockquote>京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！</blockquote>
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>

运行如图

2.2 超链接

一个网站是由多个页面组成的，创建超链接有利于页面之间的转跳，从而将整个网站中的页面关联起来，它是网站的重要元素。超链接在本质上属于网站的一部分，通过超链接将各个网页连接在一起后组成一个网站

2.2.1 超链接简介

2.2.1.1 超链接的定义

所谓超链接(Hyperink)，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址。超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以个文件，甚至是一个应用程序。将网站建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观形式为彩色(一般为蓝色)且带下划线的文字或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。

2.2.1.2 超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。

2.2.1.3 路径

URL--统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输人完全的地址。用户只需要确定当前文档同站点根目录之间的相对路径关系。
创建超链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径。
(1)绝对路径

        绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。例如，D:\web\index.html代表了index.html文件的物理绝对路径;htp://www.hao123.com/index.html 代表了一个 URL,绝对路径。
(2)根目录相对路径

        根目录相对路径是指从站点根文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜杠(/)开始。例如，/support/tips.htm是文件(tips.htm)的站点根目录相对路径，该文件位于站点根文件夹的support 子文件夹中。

(3)文档目录相对路径

        他是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合创建网站内部链接。

2.2.2 超链接的应用

超链接的另外一个叫法称为锚，它是使用<a>标签标记的，可以用两种方式表示，一是通过使用<a>标签的href属性来创建超文本链接，以链接到同一文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标;二是通过使
用<a>标签的name属性或id属性在文档中创建一个文档内部的书签。

2.2.2.1 锚点标签<a>···</a >

HTML使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a>结束。锚可以指向网络上的任何资源:一张HTML页面、一幅图像、一个声音或视频文件等。<a>标签的语法:
<a href="url" title="指向链接时显示的文字" target="新建窗口名称">文本</a>
用户可以单击<a>和</a>标签之间的文本文字来实现网页的浏览访问，通常<a>和</a>标签之间的文本文字用颜色和下划线加以强调。

以下是演示代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>超链接实例</title>
    </head>
    <body>
		<a href="https://mortaltom.blog.csdn.net" title="打开MortalTom的博客" target="blank">博客</a>
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
以下是运行图

建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建个不链接到其他位置的空超链接，可用“#”代替URL。
属性target:设定链接被单击后所要开始窗口的方式有以下4种:

1)blank：在新窗口中打开被链接的文档

2)sef：默认值，在相同的框架中打开被链接的文档。

3)parent：在父框架集中打开被链接的文档。

4)top：在整个窗口中打开被链接的文档。

2.2.2.2 指向其他页面的超链接

创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径

(1)链接到同一目录内的网页文件，语法:
<a href="目标文件名.html">热点文本</a>
其中,“目标文件名”是链接所指向的文件。

以下是演示代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>超链接实例</title>
    </head>
    <body>
		<a href='new_file.html'></a>
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
文件目录：

运行图：

点击图：

(2)链接到下一级目录中的网页文件，格式:
<a href="子目录名/目标文件名.thml">热点文本</a>
示例代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>超链接实例</title>
    </head>
    <body>
		<a href='js/new_file.html'>当前页面跳转</a>
		<hr/>
		<a href="js/new_file.html" target="_blank">新建窗口跳转</a>
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
(3)链接到上一级目录中的网页文件，语法:
<a href="../目标文件名.html">热点文本</a>
其中，“../”表示退到上一级目录中

演示代码：

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>超链接实例</title>
    </head>
    <body>
		<a href='../new_file.html'>当前页面跳转</a>
		<hr/>
		<a href="../new_file.html" target="_blank">新建窗口跳转</a>
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>
(4)链接到同级目录中的网页文件，格式:
<a href="../目标目录/目标文件名.html">热点文本</a>
热点文本表示先退到上一级目录中，然后再进入目标文件所在的目录。

2.2.2.3 指向书签的超链接

在浏览页面时，如果页面篇幅很长，要不断地拖动滚动条，就给用户浏览带来不便。浏览者需要既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读时就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”，就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。
书签就是用<a>标签对网页元素作一个记号，其功能类似于用于固定船的锚，所以书签也称锚记或锚点。如果页面中有多个书签链接，对不同目标元素要设置不同的书签名。

书签名在<a>标签里格式：

<a name="标记名">所需跳转的文字标题</a>

演示：

<!--示例-->
<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>超链接实例</title>
    </head>
    <body>
		<a href="#标题1">《1》</a>
		<a href="#标题2">《2》</a>
		<a href="#标题3">《3》</a>
		<a href="#标题4">《4》</a>
		<br/>
		<br/>
		<br/>
		
		<a name="标题1">《1》</a>
		<h2>湖南省交警总队</h2>
		<p align="center">【警惕网络诈骗 线上线下转账需谨慎[话筒]】<br/>
		#男子用大方遮掩心虚被司机一眼识破# <br/>
		引热议，现如今，网络诈骗层出不穷，你以为一见如故的知己网友，很可能是屏幕后的诈骗分子！
		反诈联盟成员@X玖少年团肖战DAYTOY 提醒您：警惕“杀猪盘”，转账需谨慎。
		加入我们，一起守护您和家人的财产安全。</p><br/><br/><hr/>
		
		<a name="标题2">《2》</a>
		<h2>财红宝呀</h2>
		<p align="center">红宝说法律之【劳动者拒绝调岗，用人单位可以就此解除双方的劳动关系？<br/>
		
		1⃣️依法依规的调岗，可以
		据《唠动法》第47条的规定，用人单位可自主确定本单位的工资分配方式和工资水，且需要根据本单位的生产经营特点和经济效益而定。即需具有必要性、合理性、正当性。
		
		据《唠动法》第3条的规定，唠动者应当完成唠动任务，提高职业技能。
		
		所以，员工拒绝单位依法依规的调岗，可能违反公司劳动纪律，单位可以解除合同。<br/>
		
		2⃣️调岗后的薪酬
		同时引出下个问题：调岗的同时是否有权调薪酬呢？若同意调岗但不同意调薪怎么办?
		
		员工因不胜任原工作而被调整到新的岗位，按照“同工同酬”的规则，其薪酬应据新岗位的标准确定。<br/>
		
		3⃣️怎么依法依规调岗？
		1、单位应有充分的证据，证明员工不胜任现有工作岗位，例如以“岗位说明书”“目标责任书”等文件予以佐证。
		
		2、调整后的岗位，应与员工的唠动能力和技能相适应。
		
		3、有明确的岗位和薪酬对应标准。
		调岗后的薪酬标准不能由单方确定。若无制度规定和合同约定，应协商确定。<br/>
		
		（昨天下班地铁
标签：网页,标签,列表,HTML,超链接,图像,文本,排版	

From： https://blog.csdn.net/m0_68332785/article/details/142182223

HTML·第二章网页制作的排版方法

学习目标

知识要点

学习内容

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.2.1.1 超链接的定义

2.2.1.2 超链接的分类

2.2.1.3 路径

2.2.2 超链接的应用

2.2.2.1 锚点标签<a>···</a >

2.2.2.2 指向其他页面的超链接

2.2.2.3 指向书签的超链接

相关文章

赞助商

阅读排行

HTML·第二章 网页制作的排版方法

学习目标

知识要点

学习内容

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.2.1.1 超链接的定义

2.2.1.2 超链接的分类

2.2.1.3 路径

2.2.2 超链接的应用

2.2.2.1 锚点标签<a>···</a >

2.2.2.2 指向其他页面的超链接

2.2.2.3 指向书签的超链接

相关文章

赞助商

阅读排行

HTML·第二章网页制作的排版方法