标签（一）：排版标签，字体标签

来源：互联网发布：客户达软件多少钱编辑：程序博客网时间：2024/05/21 17:48

HTML的各种标签

明确：每个标签都有私有属性。也都有公有属性。

html中标签属性的值可以用双引号，单引号也可以没有引号。
html中表示长度的单位都是像素。HTML只有一种单位就是像素。

请打开html开发工具，一边阅读本文，一边尝试各种属性

1. body

bgcolor: 背景颜色，值可以是响应颜色值，或rgb值；
background:背景图片；
text: 文本颜色， body内各种未规定颜色的文字的颜色；

<body bgcolor="red" text="aqua">张华楷</body>

2. 排版标签

所有的浏览器默认情况下都会忽略空格和空行，所以需要使用相应标签进行排版。

2.1 p：p代表一个段落，会与前面的内容和后面的内容用一个空行分开。

属性： align:对齐方式. 取值：left,right,center

<body>The first paragraph<p>The second paragraph</p>The third paragraph</body>

2. 2 `<br>`代表是换行,没有属性，也可以写成`<br/>` 。

前后内容不会有空行

<body>The first paragraph<br>The second paragraphThe third paragraph</body>

2.3 `<hr>`横线，必须占用一行,也可写成`<hr/>`。如果前后有内容都会换行。默认居中显示。

属性：

width：值可以是绝对值（如width=”500”），也可以是相对值（width=50%，会随着浏览器的大小变化而变化）
size：粗细；
color：线条颜色；
noshade:无阴影；不需要负值，在其他值都不规定的时候，线条会有阴影，mac上更明显。加上之后就没有阴影了。

<hr width="50%" size="10" color="red" noshade/>

2.4 `<center></center>`，已过时，这个标签内的内容都会居于浏览器的中间。

2.5 `<pre></pre>`，预格式化标签。因为浏览器默认忽略空格和换行。所以如果想按源码中的文本格式展示，将内容放在`<pre>`标签就可以了。

<pre>    离离原上草    一岁一枯荣    野火烧不尽    春风吹又生</pre>

2.6`<div></div>`块级标签，

会独自占有一行。将多个标签组成一个块，更有利于分块开发。

2.7 `<span></span>`作用于`<div>`相同，区别在于`<span>`不换行.

3. 字体标签

3.1 h1…h6:定义字体大小属性： align :居中,默认占用一行，且行间距较一般字体大。

<body>title<br/>front content<h1>the first font</h1><h2>the second font</h2><h3>the third font</h3><h4>the forth font</h4><h5>the fifth font</h5><h6>the sixth font</h6>end content<br/>end</body>

3.1 font:字体标签,已过时

属性

color:字体颜色,颜色的写法有3种：
- 英文单词: red
- 十六进制：#00ffcc
- RGB(三原色) : new RGB(124,156,23)
size:字体大小,最大为7，最小为1。大于7按7显示，字体大小略大于<h1>，小于1按1处理，字体大小小于<h6>。
face：字体类型

你好<font face="courier">你好</font>

注：最大最小字体只能h标签和font标签所能展示的大小，如果想更大或更小只能使用css。

<font style="font-size: 800px">css</font>

4. 特殊字符：

<小于号
>大于号
& &符号
'单引号
©版权 ©
™商标 ™
 空格
扩展：级 汉字“级”，数字为字符对应的ASIIC码值

5. 各种字体样式标签

<b>: 加粗（bold）
<strong>: 加粗
<i>:斜体（italic）
<em>: 斜体（）
<u>: 下划线（underline）
<s>: 中划线(删除线)
<sup>: 上标（superscript）
<sub>: 下标（subscript）

这些标签没有其他属性，而且这些标签都不重要，都可以通过css来实现。

<body><b>加粗</b><br/><strong>加粗</strong><br/><i>斜体</i><br/><em>斜体</em><br/><u>下划线</u><br/><s>中划线(删除线)</s><br/>5<sup>2</sup><br/>O<sub>2</sub><br/></body>

效果如下：
加粗
加粗
斜体
斜体
下划线
中划线(删除线)
5²
O₂

0 0