网页设计基础——html标签整理_文字修饰标记有哪些

作者：Monodyee | 2024-02-16 11:34:53

踩

文字修饰标记有哪些

网页设计基础——html标签整理

1. 常用字体修饰标记

<i> 定义斜体文本。
<b>定义粗体文本。
<big>定义大号文本。（通常使用比正文更大的字号显示）
<small>定义小号文本。（通常使用比正文更小的字号显示）
<sup> 定义上标文本。
<sub>定义下标文本。
<u>…</u> 加底线 。
<h1> to <h6> 定义标题。（通常使用粗体显示。注意：单个页面内最好只使用1个H1标签）
<FONT> …</FONT> 设定字体大小、颜色、字型 ，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。
如 : <FONT SIZE=4> 字体大小为 4 </FONT>
<FONT SIZE=+1> 字体大小为 4 </FONT> 
<FONT SIZE=-2> 字体大小为 1 </FONT>
设定颜色
如 : <FONT COLOR=#FF0000>设定颜色 </FONT>
设定字型
如 : <FONT FACE=标楷体 , 细明体 > 设定字型 </FONT>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.段落标记

段落标记<P>
基本语法： <p> ……</p>
浏览器解析HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。<p>标签式段落标记,浏览器会自动地在段落的前后添加空行。

换行标记<br>
基本语法： <br/>
<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。连续使用两个<br/>等效一个<p>

预格式化标记<pre>
基本语法： <pre> ……</pre>
定义预格式化的文本 被包围在 pre 元素中的文本通常会保留空格和换行符。

居中标记<center>
基本语法： <center> ……</center>
html默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示，可以使用html中的<center>标记。

水平线标记<hr>
基本语法： <hr/> 
在HTML页面中创建水平线，hr元素可用于分隔内容。
默认情况,<hr>标记产生的是占满整个窗口的带阴影的空心立体效果的水平线，如果要改变表现效果，可以使用它的属性来实现。
它的属性有：
width（水平线的宽度标记） 
size（水平线的高度） 
color（水平线的颜色）
noshade水平线去掉阴影属性标记
align：水平线对齐属性
<hr width="490" size="3" color="red" align="left">

<div>和<span>标记
<div>是块级元素，该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级<div>等。使用<div>标记可方便的将若干页面元素组成一个集合，以方便统一设置集合的显示位置及所有元素的样式。
<span>标记也是一个块级元素，它与<div>标记的功能相似，也用来标记页面中一个特殊的区域。一般情况下对于较大的页面区域需要使用<div>进行定义，而<span>标记常被用在某段落或更小的区域中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3. 元信息标记

<meta>
<meta>主要用于设置字符集、网页关键字及描述信息、页面的刷新及跳转等内容
可以在一个页面中使用任意数量的<meta>
1
2
3

属性	描述
http-equiv	生成一个HTTP标题域，它的实际取值由content属性确定。
name	以关键字/值的形式来规定元信息内容，其中name确定“关键字”的内容，“值”由content属性确定
content	确定关键字/值中”值”的内容

设定关键字
基本语法
   <meta name=“keywords” content=“value”>
语法解释
    keywords为“关键字”定义，content中定义“关键字”的内容。
例如：
    <meta name="keywords" content="Dreamweaver，Fireworks，Flash，网页制作三剑客" />
    
设定描述
基本语法
   <meta name=“discription” content=“value”>
语法解释
    discription为“描述”定义，content中定义“描述”的内容。
例如：
   <meta name="discription" content="这是一个详尽介绍网页制作三剑客的网站"/>
   
设定字符集
基本语法
   <meta http-equiv="content-type" content="text/html;charset=value">
语法解释
     http-equiv传送HTTP通信协议标头，content中定义页面的内码， charset 中设定内码的语系。
例如：
   <meta http-equiv="content-type" content="text/html;charset=gb2312 " />

设定自动刷新
示例
<html>
  <head>
     <title>设定页面的自动刷新</title>
     <meta http-equiv="refresh" content=“3">
  </head>
  <body>
   <font size=7 color=red>本页面每隔3秒自动刷新一次</font>
  </body>
</html>

设定自动跳转
html>
  <head>
     <title>设定页面的自动跳转</title>
     <meta http-equiv="refresh" content=“3;url=http://www.sina.com.cn">
  </head>
  <body>
    <p>本页面3秒钟后跳转到新浪网</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

4. 主体标记

<body>
页面的主体标记<body>的作用有二:
一是对页面的各种属性的进行设置；
二是包含所有需要在浏览器中显示的内容
1
2
3
4

属性	描述
text	设定页面正文的颜色
bgcolor	设定页面背景的颜色
background	设定页面的背景图像
bgproperties	设定页面的背景图像为固定，不随页面的滚动而滚动
link	设定页面默认的链接颜色
alink	设定鼠标单击时的链接颜色
vlink	设定访问后的链接颜色
topmargin	设定页面的上边距
bottommargin	设定页面的底边距
leftmargin	设定页面的左边距
rightmargin	设定页面的右边距

5. 超链接标记

<a href=url地址 target=打开窗口的方式>文本</a>
Target用来设置链接到目标资源时，打开窗口的方式：
_blank:在新的窗口打开
_parent:目标直接显示在父框架中
_self:目标显示在当前窗口中，为默认值

图片标记
<img src=图片文件名>
例如：
<html>
<title>在网页中显示图片</title>
<body fontsize=5>
<p align=center>图片显示例子</p>
<p align=right>
   <img border=0 src=“images/dog.jpg“ width=400 height=300 alt=“图片1”></img>
</p>
<center>
   <img border=0 src=“images/xigua.jpg“ width=400 height=220 alt=“图片2”></img>
</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

6. 表格与列表

<table width="800" height=“200”border=“1" >
  <tr>
    <td>姓名</td>
    <td>星座</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>双子座</td>
  </tr>
</table>

有序列表 <OL>
顺序清单，清单项目将以数字、字母顺序排列
无序列表 <ul>
无序清单，清单项目将以圆点等排列
列表嵌套
在一个列表项中嵌套另一个列表的定义
例如：
<ol>
	<li>tea
          <ul type="square">
                 <li>black tea
                 </li>
                 <li>green tea
                 </li>
          </ul>
    </li>                    
    <li>coffee</li>
    <li>milk</li>
</ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

7. CSS样式

CSS（Cascading Style Sheets，级联样式表，也称为层叠样式表）是一种将页面元素样式设置集中化的方法，引入CSS的主要目的就是为了实现将页面结构与页面外观表现分离。
CSS规定了内联式、嵌入式和外部链接式3种定义样式的方法

内联式：
<p style="color:red;font-size:30pt">这里文字是红色。</p>

嵌入式：将所有样式控制代码集中在head区定义
<head>
  <title>嵌入式样式控制</title>
  <style type="text/css">
  h1{font-size:20pt;color:Red}
  h2{font-size:15pt;color:Blue}
  </style>
</head>
<body>
   <div>
     <h1>第1章 ASP.NET与VS开发环境</h1>
     <h2>1.1 C/S和B/S架构体系</h2>
     <h2>1.2 ASP.NET的体系结构</h2>
     <h1>第2章 网页设计基础</h1>
     <h2>2.1 HTML标记语言</h2>
   </div>
</body>

外部链接式：将样式控制代码单独存放在一个以.css为扩展名的文本文件内，通过<link>标记引用其中对样式的定义。
<head>
  <link type="text/css" href="style1.css" rel="stylesheet">
 </head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/92771