哈囉今晚

自言自語礙到誰.

Html筆記

| Comments

最近覺得應該好好學習一下HTML,不然老是半調子,挺討厭的。

<br/><hr/><br/>是斷行,而<hr/>是插入平行線。

加入背景顏色和圖片

<body bgcolor="yellow">這是讓背景都是黃色,但是我覺得不實用,應該是插入背景圖片比較有用處。
<body background="clouds.gif">是插入背景圖片,這個可以用到。

上下標字

這個也是會用到的。x2。就是<sub>代表下標。x3<sup>代表上標。

樣式表

分成外部樣式表和內部樣式表。外部樣式表有點就是CSS的味道。

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

內部樣式表是短暫的定義,不知道怎用?

1
2
3
4
5
6
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

<style> <link> <div> <span>這個之後再討論,這個在CSS應該挺重要的。

HTML的Link,對於網址的連接,很簡單。

但是還有另外一種鏈結 – name 屬性。

1
<a name="label">锚(显示在页面上的文本)</a>

例如

1
<a name="tips">基本的注意事项 - 有用的提示</a>

然後我們在同一文件,另外一個地方指向tips,點下去就可以移到那裏了

1
<a href="#tips">有用的提示</a>

也可以直接指到網址的那個點

1
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

表格

<tr></tr>是定義還有<td></td>是定義表格,所以去包住,幾個表示幾列,幾個表示幾行,所以這裡是2列3行。

1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
row 3, cell 1 row 3, cell 2

搞不清楚的div

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
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>

<!DOCTYPE html>

Content goes here

Comments