您的位置：首页 > Web前端 > HTML

HTML学习笔记之网页元素编辑

2015-10-17 14:55 483 查看

一,文字编排

1.段落与换行

在HTML文件中，由回车所产生的换行符，在浏览器中并不视为换行标签，而产生的是段落标签。 称为换行标签,它是一个单标签，作用是令其后的内容在下一行显示。由于浏览器会自动忽略原代码中的空白和换行的部分，这使得 成为最常用的标记之一。其语法格式如下：

前一行文字 后一行文字

示例：

<html>
<head>
<title>测试换行标签</title>
</head>
<body>
这是我的第一个网页<br>
欢迎光临
</body>
</html>

运行结果：

称为分段控制标签，它可以单独使用，也可成对使用，其作用是留一空白行。文件段落的开始由来标签，段落的结束由来标签，是可以省略的。

的属性有align,其属性可选值：right，left，center。默认值：algin="left"。其语法格式如下：

段落文字或段落文字

示例：

<html>
<head>
<title>测试分段控制标签</title>
</head>
<body>
<p>第一段居左显示</p>
<p align="center">第一段居中显示</p>
<p align="right">第一段居右显示</p>
</body>
</html>

运行结果：

2.<center>称为居中对齐标签，它是一个双标签，其作用是进行居中控制。被<center>标签包含的部分，将以居中对齐的方式显示在网页中。其语法格式如下：

<center>居中文字</center>

3.插入水平线

<hr>称为水平分隔线标签，它是一个单标签，其作用是在标签所在位置上插入一条水平线，用以分割页面中的不同部分。

<hr>的属性有align,size,width,color,noshade.

align设定水平线摆放位置，其属性可选值:right，left，center。默认值:align=”center".

size设定水平线的粗细，以像素作单位，默认值为2.

width设定水平线的长度，以像素作单位，可以是百分比作单位，默认值：100%。如果使用百分比作为单位来设定水平分隔线的宽度，其宽度值可随窗口的大小变化而变化，相对比例保持不变。

color设定线条颜色，默认值：黑色。

noshade设定水平线不显示3D阴影，若无noshade属性则有3D阴影。其语法格式如下：

<hr align=参数值 size=参数值 width=参数值 color=参数值 noshade>或<hr align=参数值 size=参数值 width=参数值 color=参数值>

示例：

<html>
<head>
<title>测试水平分隔线标签</title>
</head>
<body>
<center>八阵图
<hr size="6" color="red" width="50%" noshade>
功盖三分国，名成八阵图.<br>
江流石不转，遗恨失吞吴.<br>
</center>
</body>
</html>

运行结果：

4.插入特殊符号

HTML常见特殊字符及其代码表

特殊或专用字符	数字代码	字符代码
<	<	<
>	>	>
&	&	&
"	"	"
!	!
©	©	©
:	;
®	®	®
空格

二.文字美化

1.字体设置

<hn>称为标题文字标签,它是一个双标签，其作用是设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。

<hn>的标签一共六级，由<h1>到<h6>逐渐变小，标题文字具体的大小会因浏览器的不同而不同。每个标题标记所标示的字句将独占一行且上下留一空白行。

<hn>的属性有align，其属性可选值：right,left,center.默认值：align=“left”。其语法格式如下：

<hn align=参数值>标题文字</hn>

称为文字格式控制标签，它是一个双标签，其作用是设置文字的字体、大小和颜色；

的属性有face,size,color；

face设定文字字体，其属性为字体名称；

size设定文字的大小，取值1~7，默认值为3.也可以采用"+"，“-"来设置相对值。

color设定文字颜色，可以用#nnnnnn，也可以此采用颜色的名称。其语法格式如下：

文字

2.文字修饰

比较常用的文字修饰标签

标签	显示效果
粗体字<b></b>	文字将以粗体的方式显示
斜体字<i></i>	文字将以斜体的方式显示
加下划线<u></u>	文字将以加下划线
删除线<s></s>	文字将以加删除线的方式显示
放大<big></big>	将文字以放大字体的方式显示
缩小<small></small>	将文字以缩小字体的方式显示
上标<sup></sup>	将文字以上标字体的方式显示
下标<sub></sub>	将文字以下标字体的方式显示

3列表与项目符号

无序列表标签为<ul>，它是一个双标签、

其语法格式如下：

<ul type=值1>

<li>编号1

<li>编号2

······

<li>编号n

</ul>

其中，type用来设定控制符号，其属性值有disc，circle，square。

disc用于设定一个实心圆点，为默认值。

circle用于设定一个空心圆点。

square用于设定一个实心方形。

有序列表标签为<ol>，它是一个双标签、

其语法格式如下：

<ol type=值1 start=值2>

<li>编号1

<li>编号2

······

<li>编号n

</ul>

<ol>的属性有type，start。

start设定列表的符号从第几项开始。

type设定符号类型，属性值有1,A,a,i,I。

其中：

1 设定列表项为数字列表(1,2,3,···);

A 设定列表项为大写英文字母符号(A,B,C,···);

a 设定列表项为小写英文字母符号(a,b,c,···);

i 设定列表项为小写罗马数字符号(i,ii,iii,···);

I 设定列表项为大写罗马数字符号(I,II,III,···);

如果插入或删除一个列表项，到下次浏览时，编号会自动调整。

三.图像插入

向网页插入图形需要用到<img>标签，它是一个单标签。

其语法格式如下：

<img src=参数值 alt=参数值 border参数值 align=参数值 height=参数值 width=参数值 vspace=参数值 hspace=参数值>

<img>的属性有src,alt,border,align,height/width,vspace/hspace等。

src设定图形路径名，指定要导入的图片文件的保存位置与名称。导入的图片文件的位置，可以是位于同一服务器中的文件，也可以是位于网络上的其他服务器中

height/wigth设定图形高度/宽度,以像素作单位，可以是百分比作单位。若<img>标签没有设置height/width属性时，网页中将以图片的原始宽度显示。

alt设定图形的代替文字，将鼠标悬停于图片上方时，会出现提示性的文字，当浏览器不能显示所指定的图片时，则显示一段说明该图片的文字，代替图文件。

border设定图形的边框，单位为像素，默认或取0时为无边框。

hspace 和 vspace 属性可以设置图像周围的空间。hspace，可以以像素为单位，指定图像左边和右边的文字与图像之间的间距；而
vspace 值则是上面的下面的文字与图像之间的距离的像素数。

align设定图像的对齐方式，其属性可选值：top,bottom,middle,right,left等。设置和显示：

top将文字显示在图片某一侧（默认左侧)顶端的位置。

middle将文字显示图片某一侧中部的位置。

bottom将文字显示在图片某一侧底部的位置。

right将文字在图片右侧显示。

left将文字在图片左侧显示。

如果文本没有填满图像周围的空间，而希望从图像下面重新开始另一行文本时，普通的换行标签 就不起作用了，它只能在图像旁边另起一行，而不能把文本排到图像下面去，这就需要在 标签中使用clear属性来满足这一要求

clear=left：文本在图像下面另起一行，用于图像在左边的情况。

clear=right：文本在图像下面另起一行，用于图像在右边的情况。

clear=all：文本在图像下面另起行处。

示例：

<html>
<head>
<title>CAI是什么</title>
</head>
<body>
<p>
<img src="1.jpg" align=left >
<h1><u>CAI是什么</u></h1>
<font color="red" ><i>CAI是"计算机辅助教学"(Computer Asstited Instructing)
的英文名称首字母缩写</i></font><br>其含义就是把自己的教学想法，包括教学目
的、内容、实现教学活动的策略、教学的顺序、控制方法等，用计算机程序进行描述，
并存入计算机，经过调试成为可以运行的程序。由于计算机有着存储信息、处理信息、
工作自动化等功能<br clear="left">因此，CAI课件可以将大容量的信息非顺序地呈
现，可以选择学习内容和掌握学习进度，实现因人施教的原则和及时反馈信息原则等特
点集于一身，并因之区别于其他媒体教学。
</p>
</body>
</html>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 博客

相关文章推荐

新的分享

章节导航