标签:第二章 网页 标签 语法 超链接 图像 文本 排版
2.1 文字与段落排版
2.1.1 段落标签
段落标签<p>是HTML格式中特有的段落元素,在HTML格式里不需要在意文章每行的宽度。
语法为: <p align="left | center | right">文字<p>
属性align: 设置段落文字在网页上的对齐方式,包括left左对齐 ,center居中,right右对齐
默认为left。
2.1.2 标题标签
标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题,HTML会自动在标题前后添加一个额外的换行。
格式为: <h #align=" left | center | right">标题文字</h#>
属性align: 设置标题在页面中的对齐方式,包括left左对齐 ,center居中,right右对齐
默认为left。
2.1.3 换行标签
<br/>标签会打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行都会是该行换行,如果放在一行的末尾,可以后面的文字,图像,表格等显示于下一行。
格式为: 文字<br/>
2.1.4 水平线标签
水平线可以作为段落与段落之间的分隔线,使文档结构清晰,层次分明。当浏览器解释到HTML 文档中的<h >标签时,会在此处换行,并加入一条水平线段。
水平线标签的格式为: <hr align = " left l center l right" size ="横线粗细" width ="横线长度" color="横线色彩" noshade="noshade"/>
属性size:设定线条粗细,以像素为单位,默认值为2。
属性width:设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终当前窗口。
属性color:设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示。
2.1.5 预格式化标签
<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码预格式化标签的语法为: <pre>文本块</pre>
2.1.6 缩排标签
<blockquote>与</ blockquote>之间的所有文本都<blockquote>标签可定义一个块引用,右两边进行缩进,而且有时会使用斜体。也就是会从常规文本中分离出来,经常会在左、右,块引用拥有它们自己的空间。
缩排标签的语法为: <blockquote>文本</blockquote>
2.2 超链接
超链接在本质上属于网页的一部分,通过超链接将各个网页链接在一起后,才能构成一个网站。
2.2.1 超链接简介
1 超链接的定义
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是一个网页,也可以是相同网页不同的位置,还可以是一个图片等
2 超链接的分类
根据超链接目标文件的不同,超链接可分为页面超链接,锚点超链接和电子邮件超链接等
根据超链接单击对象的不同,超链接可分为文字超链接,图像超链接和图像映射等。
3 路径
路径分为三种为绝对路径,根目录相对路径和文档目录相对路径。
绝对路径:就是主页上的文件或目录在硬盘上的真正路径。
根目录相对路径:是指从站点根目录文件夹到链接文档经过的路径。
文档目录相对路径:它是相对于某个基准目录的路径,以当前文件所在的路径为起点,进行相对文件的查找。
2.2.2 超链接的应用
1 锚点标签<a>···</a >
释义: 指向网页上的任何元素。
语法:<a herf=" url" title="指向链接显示的文字" target="窗口名称">文本文字</a>
2 指向其他页面的超链接
链接到同一目录内的网页文件:<a href="目标文件名.html">热点文本</a>。
链接到下一级目录内的网页文件:<a href="子目录名/目标文件名.html">热点文本</a>。
链接到上一级目录内的网页文件:<a href="./目标文件名.html">热点文本</a>。
链接到同级目录内的网页文件:<a href="../子目录名/目标文件名.html">热点文本</a>。
3 指向书签的超链接
书签就是用<a>标签对网页元素做一个记号,其功能类似于固定船的锚,又称锚点。
语法: <a name="记号名">目标文本附近的内容</a>
(1) 指向页面内书签的超链接 : <a href="记号名">热点文本</a>。
(2) 指向其他页面的超链接 : <a href="目标文件名.html # 记号名">热点文本</a>
4 指向下载文件的超链接
语法为: <a href="下载文件名"> 热点文本</a>
5 指向电子邮件的超链接
语法为:<a href="mailto:E-mail地址">热点文本</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
1 常见的网页图像格式
JPEG: 适合照片
PNG: 适合图形和背景
GIF; 支持动画
2 使用网页图像的要点
确保图片适中,加载速度快,并且有替代文本
2.3.2 图像标签
图像标签常用的属性
1 图像的替换文本说明
当图像无法显示时,alt属性提供一个替代文件。
2 设置图像大小
可以使用width和height属性来设置图像尺寸。
语法: <img src="images/waitao.jpg" width="150" height="200">。
3 图像的边框
可以用border属性为图像添加边框。单位为像素
2.3.3 图像超链接
图像也可以作为超链接热点,单击图像则跳转到被连接到的文件或文本。
语法:<a href="URL"><img src="图像文件名"/></a>
2.3.4 设置网页背景图像
语法为 <body background = "背景图像路径">
2.3.5 图文混排
图文混排技术是指设置图像与同一行中的文本,图像,插件或其他元素的对齐方式。
2.4 列表
2.4.1 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
1 在<ul>后指定符号的样式
<ul type="disc"> 符号为实心圆点
<ul type="circle"> 符号为空心圆点
<ul type="square"> 符号为方块
<ul type="graph,gif"> 符号为指定的图片文件
2 在<li>后指定符号的样式
<li type="disc"> 符号为实心圆点
<li type="circle"> 符号为空心圆点
<li type="square"> 符号为方块
<li type="graph,gif"> 符号为指定的图片文件
2.4.2 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
2.4.3 定义列表
格式为:
<dl>
<dt> 第一个表题项 </dt>
<dd> 对第一个表题项解释的文字 </dd>
<dd> 第二个表题项 </dd>
<dd> 对第二个表题项解释的文字 </dd>
</dl>
2.4.4 嵌套列表
格式为:
<ul>
<li>项目一
<ul>
<li>子项目一</li>
<li>子项目二</li>
</ul>
</li>
<li>项目二</li>
</ul>
标签:第二章,
网页,
标签,
语法,
超链接,
图像,
文本,
排版
From: https://blog.csdn.net/2402_87161397/article/details/142183810