HTML常用标记
一、文本标记
1.标题标记
标题标记的语法格式:
<hn align="对齐方式">标题文本</hn>
<!--
HTML中提供了6级标题,为<h1>至<h6>,其中<h1>最大,<h6>最小
n代表1,2,3,4,5,6
align属性有三种,分别是:left(左对齐),center(居中),right(右对齐)
-->
例子:
<body>
<h1>
HTML 常用标记
</h1>
</body>
结果:
2.字体标记
默认情况下,中文网页中的文字一黑色,宋体,3号的效果显示。
字体标记的语法格式如下:
<font face="字体名称" size="字体字号" color="字体颜色">
文字
</font>
<!--face舒总设置字体,默认是宋体;size属性指定文字的大小,是1~7;color属性设置字体的颜色-->
例子:
<font face="times new roman" size="7" color="red">
HTML 常用标记!
</font>
结果:
3.段落与换行标记
在HTML中既可以使用但标记也可以使用双标记,都能创建一个段落;不同点是,但标记创建的段落会与上文产生一个空行的间隔;双标记创建的段落则与上下文同时产生一个空行的间隔。
段落标记的语法格式:
<p align="对齐方式"> 段落内容 </p> (双标记)
<p /> 段落内容 (单标记)
<!--<p>标记是块级元素,浏览器会自动在<p>标记后面加上一定的空白。-->
换行标记是<br>
,该标记是一个单标记。在XHTML、XML以及HTML版本中,不允许出现没有闭合标签的HTML元素,所以这种单标记都把结束放在开始标记中,也就是<br />
。该标记的作用是换行,不能设置任何的属性。
例子:
<font face="times new roman" size="5" color="red">
《登鹳雀楼》<p />
白日依山尽,<br />
黄河入海流,<br />
欲穷千里目,<br />
更上一层楼。
</font>
结果:
4.转义字符
有一些字符是没法通过键盘输入的,这些字符对于网页来说都是特殊字符。要想在网页中使用这些字符,必须使用转义字符的方式输入。
转义字符的语法格式如下:
&实体名称;
显示结果 | 描述 | 实体名称 |
---|---|---|
空 格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和 号 | & |
" | 引 号 | " |
’ | 撇 号 | ' (IE不支持) |
x | 乘 号 | × |
÷ | 除 号 | ÷ |
5.文字修饰符
使用为你做修饰符可以设置文字的粗体、倾斜、下划线、等格式。
标记 | 描述 |
---|---|
… | 加粗 |
… | 斜体 |
… | 下划线 |
删除线 | |
… | 上标 |
… | 下标 |
例子:
<u>
下划线
<i>
倾斜下划线
<b>加粗倾斜下划线</b>
</i>
</u>
<h1>
H<sub>2</sub>O<br/>
X<sup>2</sup>+Y<sup>2</sup>=Z<sup>2</sup>
</h1>
结果:
6.列表标记
列表有两种,一种是有序列表,一种是无序列表。前者使用编号来记录项目顺序,后者使用项目符号来标记项目。
(1)有序列表
有序列表的语法格式如下:
<ol type="列表项的标记符" start=“起始值”>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
......
</ol>
<!--type属性值的取值范围可以是数字,
也可以是大小写的英文字母或者是罗马字母-->
例子:
Web前端语言
<ol type="1" start="4">
<li>HTMl</li>
<li>CSS</li>
<li>JaveScript</li>
</ol>
Web服务器端语言
<ol type="a" start="a">
<li>PHP</li>
<li>ASP.NET</li>
<li>JSP</li>
结果:
(2)无序列表
无序列表的语法格式如下:
<ul type="列表项的标记符">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
......
</ul>
<!--type属性的取值定义如下:
disc:默认值,为实心圆;
circle:空心圆;
square:实心方块;
-->
例子:
Web前端语言
<ul type="disc">
<li>HTML</li>
<li>CSS</li>
<li>JaveScript</li>
</ul>
Web服务器端语言
<ul type="circle">
<li>PHP</li>
<li>ASP.NET</li>
<li>JSP</li>
</ul>
结果:
(3)嵌套列表
将有序列表和无序列表混合使用。
例子:
电脑
<ul type="square">
<li>台式电脑</li>
<ol type="1" start="1">
<li>戴尔台式</li>
<li>联想台式</li>
</ol>
<li>笔记本电脑</li>
<ol type="a" start="a">
<li>戴尔笔记本</li>
<li>联想笔记本</li>
</ol>
</ul>
结果:
二、分隔线标记
分隔线的标记是<hr>
分隔线的语法格式如下:
<hr align="对齐方式" size="数字" width="宽度" color="颜色”>
width:属性值可以是像素也可以是百分比。
size:属性值可以是数字也可以是像素或者是百分比。
例子:
<center>
<font face="times new roman" size="5" color="red">
《登鹳雀楼》
<hr size="5" width="50px" color="black">
白日依山尽,<br />
黄河入海流,<br />
欲穷千里目,<br />
更上一层楼。
<hr align="center" size="6" width="50%" color="crimson">
</font>
</center>
结果:
三、超链接标记
1.文本链接
使用一对<a>
标签创建文本标签,其语法格式如下:
<a href="目标url" target="目标窗口">
指针文本
</a>
target属性值 | 说明 |
---|---|
_blank | 在新窗口中的打开目标资源 |
_self | 默认值,在当前窗口或框架窗口中打开目标资源 |
_parent | 在父框架集中打开目标资源 |
_top | 在整个窗口中打开目标资源 |
例子:
<ul type="disc">
<li>
<a href="https://www.csdn.net/" target="_blank">
潮落叹息
</a>
</li>
<li>
<a href="https://www.baidu.com/" target="_blank">
百度
</a>
</li>
<li>
<a href="https://www.bilibili.com/" target="_blank">
哔哩哔哩
</a>
</li>
</ul>
结果:
点击相对应的文本就可以跳转到对应的页面。
2.书签链接
创建书签链接需要两步,第一步是创建书签,第二步是创建书签链接。
(1).创建书签
创建书签的标记与链接标记相同,都是使用<a>
标记。其基本语法格式如下:
<a name="书签名">
[文字或图片]
</a>
“[文字或图片]”中的“[]”表示一个可选项,其中的文字图片可有可无,书签将在当前<a>
标记位置建立一个name属性值指定的书签。注意:书签名不能有空格。
(2).创建书签链接
链接到同一页面的书签链接的定义语法如下:
<a href="#书签名">
源端点
</a>
链接到不同页面的书签链接的定义语法如下:
<a href="file_URL#书签名">
源端点
</a>
例子:
1.创建书签
<ul>
<li><a name="top1">第一章</a></li>
<li><a name="top2">第二章</a></li>
<li><a name="top3">第三章</a></li>
<li><a name="top4">第四章</a></li>
</ul>
2.创建书签链接
<li><a href="index.html#top2">第二章</a></li>
<li><a href="index.html#top3">第三章</a></li>
结果:
1.创建书签
2.创建书签链接
点击链接就可以跳转到上一个页面
四、图片标记
在HTML中使用<img>
标记在网页中嵌入图像,并设置图像的属性。基本的语法格式如下:
<img src="图片文件的路径" alt="提示文本" height="图片高度" width="图片宽度" />
1.将整个图片设置为链接
基本的语法格式如下:
<a href="目标URL">
<img src="图片文件的路径" alt="提示文本" height="图片高度" width="图片宽度" />
</a>
<!--alt是党图片的路径不对或显示不出来是给出的提示-->
例子:
<a href="https://www.bilibili.com/" target="_blank">
<img src="../img/image.png" alt="哔哩哔哩" height="100px" width="200px">
</a>
结果:
点击图片就可以跳转到B站首页。
2.设置图片的热点区域
基本的语法格式如下:
<img src="图片文件路径" usemap="#map名" />
<map name="map名">
<area shape="图像热区形状" coords="热区坐标" href="链接地址">
</map>
shape属性的属性值可以设置为:
(1) rect:指定可单击区域为矩形,此时coords的值为x1,y1,x2,y2;用以规定矩形左上角(x1,y1)和右下角的坐标(x2,y2)。
(2) circle:指定可单击区域为圆形,此时coords的值为x,y,z;其中,x和y代表圆心的坐标,z代表半径。
(3) poly:指定多边形个边的坐标,此时coords的值为x1,y1,x2,y2…xn,yn;其中x1,y1为多边形第一个顶点的坐标,以此类推。
例子:
<img src="../img/image.png" width="300px" height="150px" usemap="#myimage">
<map name="myimage">
<area shape="rect" coords="0,0,300,75" href="https://www.bilibili.com/">
<area shape="rect" coords="0,75,300,150" href="https://www.baidu.com/">
</map>
结果:
这张图片的上面一部分是B站链接;下面一部分是百度链接。
最后,关于这个坐标。