树欲静而风不止慢一点吧

树欲静而风不止慢一点吧

目录

HTM5的基础结构

标题

段落

文字装饰效果

上标和下标

文字斜体、下划线与删除线

水平线

图像

大小和边框

替换文本与提示文字

图像间距与对齐方式

超链接

文本链接

书签链接

图像超链接

图像热区链接


HTM5的基础结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> 文件标题</title>
</head>
<body>
文件内容
</body>
</html>

标题

标题标签一共有6个,从<h1>标签到<h6>标签,字号依次变小。

<h1 align="对齐方式">文本内容</h1>

段落

<p>段落文字</p>

<p>段落标签会自动在段落文字前后空行,因此两个相邻的<p>标签间空两行。在一个<p>标签内使用单标签<br>,可以实现换行。

文字装饰效果

上标和下标

可用于实现方程式,例子如下:

上标:X<sup>3</sup>+9X<sup>2</sup>-3=0
下标:3X<sub>1</sub>+2X<sub>2</sub>=10

文字斜体、下划线与删除线

<em>斜体文字</em>
<u>带下划线的文字</u>
<del>带删除线的文字</del>

斜体字也可以用标签<I>或<cite>表示。

水平线

<hr>

图像

<img src="图像地址">

src可以是绝对地址,也可以是相对地址。

若图像文件位于HTML文件的上一级目录中,用“../目录名/文件名”调用。

大小和边框

<img src="图像地址" height="" width="">
<img src="图像地址" border="">

height、width、border属性都可以省略,它们的单位是像素。border属性为图像边框的宽度,默认为0。

替换文本与提示文字

<img src="图像地址" alt="" title="">

鼠标悬停在图像上,显示的提示文字是title属性中的内容;alt属性中的内容为在图像无法显示的情况下显示的替换文本。

图像间距与对齐方式

<img src="图像地址" hspace="" vspace="">
<img src="图像地址" align="相对文字的对齐方式">

属性hspace和vspace调整图像与文字之间的距离。

超链接

文本链接

<a href="" target=""></a>

href:链接地址。target:打开新窗口的方式,主要有以下4个属性值:

_blank:新建一个窗口打开;

_parent:在上一级的窗口打开,常在分帧的框架页面中使用。

_self:在同一窗口打开,默认值。

_top:在浏览器的整个窗口打开,忽略所有框架结构。

参考:target属性里_blank _self _top _parent区别_luoyinbingfen2的博客-CSDN博客

书签链接

 指在同一页面进行位置的跳转。如href中传入"#top",将跳转到页面的顶部。

图像超链接

单击图像,跳转到某界面。

<a href="链接地址" target="目标窗口的打开方式"><img src="图像文件的地址"></a>

图像热区链接

点击图像不同区域,跳转到不同界面。

<img src="图像地址" usemap="#映射图像名称"/>
<map name="映射图像名称">
        <area shape="热区形状" coords="热区坐标" href="链接地址"/>
</map>

<area>标签中,shape参数有"rect"、"circle"、"poly"可选,coords参数用来设置区域坐标。

05-17 00:41