HTML学习day02

发表于

HTML 的样式

HTML 的style属性

style属性的作用：提供了一种改变所有HTML 元素的样式的通用方法。 样式是HTML 4引入的，它是一种新的首选的改变HTML元素样式的方式。通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表(CSS文件)进行定义。

HTML样式实例-背景颜色

实例

1
2
3
4
5
6
7
<html>
<body style="background-color:yellow">文章背景颜色(粉粉的少女心有木有)
<h2 style="background-color:red">标题背景颜色</h2>
<p style="background-color:green">段落背景颜色</p>
</body>
</html>

效果

标题背景颜色

段落背景颜色



HTML 样式实例-字体、颜色和尺寸

font-family,color以及font-size属性分别定义元素中文本的字体系列、颜色和字体尺寸

1
2
3
4
5
6
7
8
<html>
<body>
<h1 style="font-family:verdana">标题字体</h1>
<p style="font-family:arial;color:red;font-size:20px;">段落字体</p>
</body>
</html>

效果

标题字体

段落字体



HTML 样式实例-文本对齐

text-align 属性规定了元素中文本的水平对齐方式 
1
2
3
4
5
6
7
8
<html>
<body>
<h1 style="text-align:center">标题居中对齐</h1>
<p sytle="text-align:center">段落居中对齐</p>
</body>
</html>

效果

标题居中对齐

段落居中对齐



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
<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>

效果

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains subscript
This text contains superscript

预格式文本实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
</body>
</html>

效果

这是
预格式文本。
它保留了      空格
和换行。

pre 标签很适合显示计算机代码：

for i = 1 to 10
     print i
next i

不过我还是喜欢直接打三个`号;)



“计算机输出“标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>

效果

Computer code
Keyboard input
Teletype text
Sample text
Computer variable

注释：这些标签常用于显示计算机/编程代码。



地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

效果

Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA
个人感觉这个没啥卵用....

缩写和首字母缩写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>

效果

etc.
WWW

在某些浏览器中，当您把鼠标移至缩略词语上时，title可用于展示表达的完整版本。

仅对于IE5中的acronym 元素有效。

对于Netscape 6.2中的abbr 和 acronym 元素都有效。



文字方向

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<body>
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>

效果

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

Here is some Hebrew text

块引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>
</body>
</html>

效果

这是长的引用：
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是短的引用： 这是短的引用。

使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。

删除字效果和下划线

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>

效果

一打有 二十 十二 件。

大多数浏览器会改写为删除文本和下划线文本。

一些老式的浏览器会把删除文本和下划线文本显示为普通文本。