HTML基礎學習心得分享

時間 2019-11-20

標籤 html 基礎學習心得分享欄目 HTML 简体版

原文原文鏈接

開始學些Html的時候主要進行一些簡單的靜態網頁的處理：
一、HTML 標題
HTML 標題（Heading）是經過 h1-h6 加中括號<>等標籤進行定義的。
二、HTML 段落
HTML 段落是經過html

標籤進行定義的。
三、HTML 連接
HTML 連接是經過《a》標籤進行定義的。
四、HTML 圖像
HTML 圖像是經過標籤進行定義的。
五、HTML 元素
HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼。
六、HTML 元素語法
a、HTML 元素以開始標籤起始
b、 HTML 元素以結束標籤終止
c、元素的內容是開始標籤與結束標籤之間的內容
d、某些 HTML 元素具備空內容（empty content）
e、空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
f、大多數 HTML 元素可擁有屬性編程

HTML的通常結構以下：ruby

<html>----以<html>開始，以</html>結束，表示之間的文檔是HTML服務器

<head>----HTML文檔的頭部，主要放文檔的標題信息ide

<title>未使用CSS的HTML文件</title>字體

</head>網站

<body>----HTML的主體部分 ui

<h1>未使用CSS的HTML文件</h1>搜索引擎

<hr>----在網頁中插入一條水平線編碼

<p>未使用CSS的HTML文件</p>

</body>

</html>

3.標記語法

(1)標記在使用時必須用尖括號"<>"括起來；標記的大小寫做用相同；

(2)單標記：<標記名稱>，例如<br>它表示換行；

(3)雙標記：<標記>內容</標記>

例如：<em>第一：</em>，它表示突出對「第一：」的顯示；

(4)：標記能夠包含標記自己，便可以嵌套使用

<html>

<head>

<title>請輸入密碼</title>

</head>

<body>

<form>

<tr>

<td>請輸入密碼</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

4. 屬性語法

大多數單標記和雙標記的始標記內部均可以包含一些屬性

<標記名字屬性1 屬性2 ...>

例如單標記<img>表示在文檔當前位置插入一幅圖片

其中src屬性規定顯示圖像的路徑，width屬性設置圖像的寬度，height屬性設置圖像的高度，alt屬性規定圖像的代替文本，src屬性爲必需屬性，其餘屬性爲可選屬性。

5. HTML文件命名：

(1)文件的擴展名要以.html或.htm結束；

(2)文件名中只可由英文字母、數字或下劃線組成；

(3)文件名中不要包含特殊符號，如空格、￥等；

(4)文件名師區分大小寫的，在Unix和Windows主機中有大小寫的不一樣；

(5)網站首頁文件名默認是index.htm或index.html；

6. 編寫HTML文件的注意事項：

(1)全部標記都要用尖括號<>括起來；

(2)成對出現的標記不要漏寫；

(3)採用標記嵌套的方式能夠爲同一個信息應用多個標記，如<tag1><tag2>同一個信息</tag2></tag1>；

(4)在代碼中，不區分大小寫；

(5)任何空格或回車在代碼中都無效，插入空格或回車有專用的標記，分別是&nbsp, <br>；

(6)標記中不要有空格；

(7)標記中的屬性，能夠用雙引號("")引發來，也能夠不引；

7.<p></p>表示插入段落文字；

8.繪製表格：三個成對標記<table></table>、<tr></tr>、<td></td>

<table width="650" border="1"> ----<table>是製做表格的標記，其後的屬性依次爲表格寬度，邊框粗細

<tr>----<tr>表示插入行，一對<tr>表示一行

<td>----<td>表示一列

HTML基礎教程<br>

做者：王佔金等

<br>----<br>表示換行，單標記

訂價49.00元<br>

</td>

<td>

</td>

</tr>

<tr>

<td>

搜索引擎營銷-網站流量大提速<br>

做者：（美）亨特<br>

訂價：69.80元<br>

</td>

</tr>

</table>

9. 設置頁面標題：<title>頁面標題</title>；

10. 設置基地網址<base>

(1)<base>標記通常用於設計文件的URL地址；

(2)一個HTML文件只能有一個<base>標記，同時該標記必須放於頭部文件中；

(3)<base href="文件路徑" target="目標窗口">

href用於設置網頁文件連接的地址，target用於設置頁面顯示的目標窗口。

例如：

<html>

<head>

<title>設置基地網址</title>

</head>

<body>

2007年1月16日，電子工業出版社<a href="index">博文視點</a>公司召開了一次晚會。

</body>

</html>

11.定義元信息<meta>

(1)該標記的主要功能是定義頁面中的一些信息，但這些信息不會出如今網頁中，而會在源文件中顯示；

(2)<meta>標記經過一些屬性來定義文件愛你的信息，例如，文件愛你的關鍵字、做者信息、網頁過時時間等，HTML文件的頭部文件能夠有多個<meta>標記；

(3)基本語法：

http-equiv屬性用於設置一個http的標題域，但肯定值由content屬性決定，name屬性用於設置元信息出現的形式，content用於設置元信息出現的內容。

12.設置頁面關鍵字--keywords

(1)基本語法：<meta name="keywords" content="value">

(2)語法說明：keywords用於說明定義的是關鍵字，value用於說明該網頁定義的關鍵字，能夠是多個關鍵字；

(3)例子：

<html>

<head>

<title>設置關鍵字</title>

</head>

<body>

......

</body>

</html>

13. 設置頁面過時時間--expires

(1)基本語法： <meta http-equiv="expires" content="value">

(2)語法說明： expires用於設計頁面過時時間，content屬性設置具體過時時間值；

(3)例子：

<html>

<head>

<title>設置頁面過時時間</title>

</head>

<body>

......

</body>

</html>

14.設置頁面背景

(1)基本語法：<body bgcolor="">

(2)語法說明：bgcolor能夠設置網頁的背景顏色；

(3)例子：

<html>

<body style="background-color:blue">----此行代碼表示：將網頁背景顏色設置爲藍色，也能夠設置爲 red white等，也能夠十六進制數表示，例如「#00ff00」，或者rgb(0,0,0)的形式

......

</body>

</html>

15.設置頁面邊距

(1)基本語法：<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>

(2)語法說明：topmargin 設置到頂端的距離

leftmargin設置到左邊的距離

rightmargin設置到右邊的距離

bottommargin設置到低端的距離

(3)例子：

<html>

  2016年5月9日，陰雨

</body>

</html>

16.設計正文顏色

(1)基本語法：<body text=""> ...</body>

(2)語法說明：利用text屬性設置文檔的顏色時，還能夠進行其餘設置，例如：背景、字體等；

(3)例子：

<html>

  2016年5月9日，陰雨

</body>

</html>

17.添加註釋 <!-->

註釋信息不會在網頁中顯示，能夠放在HTML文件的任何地方

18. 添加空格  

在主體中使用，一個&nbsp表明空一個字符

19.添加刪除線 <del></del>

使用成對標記<del></del>，在主體中添加

<body>

<del>請在此輸入須要添加刪除線的文字</del>

</body>

20. 插入特殊符號

符號對應代碼

&&amp

TM &trade

￥&yen

等~~

21.設置文字標註標記<ruby>

<ruby>

被說明的文字（當代最可愛的人）

<rt>

文字的標註（志願者）

</rt>

</ruby>

22.簡單文字修飾（加粗、斜體、下劃線）

<body>

普通文字的顯示<br>

<b>加粗文字的顯示</b>

<u>給文字加下劃線</u>

</body>

23.肯定文字上下標-<sup>/<sub>

<body>

</body>

24.設置地址文字<address>

在網頁中添加地址文字，是爲了更方便地突出顯示聯繫方式，將聯繫人的地址信息突出顯示

<body>

<address>請在此添加地址信息</address>

</body>

25.設置等寬文字 <tt> <samp> <code> <kdd>

多數狀況用在英文文字顯示中

<body>

<tt>打字機風格顯示</tt>

<code>等寬文字設置內容</code>

<samp>等寬文字設置內容</samp>

</body>

26.段落<p></p>----雙標記

回車<br>----單標記，強制性換行，能夠放在<p></p>之間使用

預格式化<pre></pre>

利用<pre></pre>標記對網頁中文字段落進行預格式化，在輸入過程當中，按鍵盤上的回車鍵，就能夠生成一個段落；

設置段落縮進<backquote>

利用一對<backquote></backquote>標記能夠縮進5個字符

插入並設置水平線<hr>

水平線的屬性有：align---水平線對齊方式，取值有3種：left，right和center

width---水平線的長度，如500px

size---水平線的粗細

color---水平線的顏色，如red

noshade---水平線是否有陰影

標題標記<hn>，其中n爲數字1-6，共分6級，數字越小，字體越大，表示越重要

27.插入列表

列表類型標記符號

定義列表<dl></dl>

無序列表<ul></ul>

目錄列表<dir></dir>

有序列表<ol></ol>

(1)插入定義列表<dl></dl>

<dl>

<dt>聯繫人<dd>*** ----<dt>定義名稱部分，只在<dl>中使用

<dt>聯繫地址<dd>北京市海淀區----<dd>解釋說明部分，只在<dl>中使用

<dt>郵政編碼<dd>100876

</dl>

輸出結果爲：

聯繫人

***

聯繫地址

北京市海淀區

郵政編碼

100876

(2)插入無序列表<ul></ul>

<ul>

<li>聯繫地址：北京市海淀區</li>

</ul>

輸出結果爲：

·聯繫人：***

·聯繫地址：北京市海淀區

·郵政編碼：100876

補充：無序列表<ul>中用type屬性來控制行的標號

type=disc 設定一個實心圓點的行標號，表示默認項，如上面所示；

type=circle 設定一個空心圓點做爲行標號；

type=square 設定一個方形實心點做爲行標號；

(3)插入有序列表<ol></ol>

<ol>

<li>聯繫地址：北京市海淀區</li>

</ol>

輸出結果爲：

1.聯繫人：***

2.聯繫地址：北京市海淀區

3.郵政編碼：100876

補充：有序列表的順序是由屬性type和start來設置的。type表示標號的類型，start表示列表的標號從第幾項開始

type=1 表示用數字標號（默認項）

type=A 表示用大寫字母

type=a 表示用小寫字母

type=I 表示用大寫羅馬數字

type=i 表示用小寫羅馬數字

(4)嵌套定義列表

<dl>

<dt>網頁三劍客

<dd>Dreamweaver

<dd>Flash

<dd>Fireworks

<dt>編程三劍客

<dd>VB

<dd>VF

<dd>VC

</dl>

顯示結果爲：

網頁三劍客

Dreamweaver

Flash

Fireworks

編程三劍客

(5)嵌套有序與無序列表

<ul>

<li>水果類

<ol>

</ol>

</li>

<li>蔬菜類

<ol>

</ol>

</li>

</ul>

顯示結果爲：

·水果類

1.蘋果

2.香蕉

·蔬菜類

1.蘿蔔

2.白菜

28.超連接

通常而言，一個網站的文件都是在同一個目錄下的

在HTML文件中提供了三種路徑：絕對路徑，相對路徑，根路徑

在HTNL文件中，超連接能夠分爲內部連接和外部連接。所謂內部連接：指網站內部文件之間的連接；所謂外部連接，指網站內的文件連接到站點內容外的文件。

(1)絕對路徑：只文件的完整路徑，包括文件傳輸的協議http，ftp等，通常用於網站的外部連接，例如：http://ysu.edu.cn, ftp://202.206.251.100

(2)相對路徑：只相對於當前文件的路徑，它包含了從當前文件指向目的文件的路徑。同時只要是處於站點文件夾以內，即便不屬於同一個文件目錄下，相對路徑創建的連接也適合。採用相對路徑是創建兩個文件之間的相互關係，能夠不受站點和所處服務器位置的影響。

相對位置如何輸入

同一目錄輸入要連接的文檔

連接上一目錄先輸入"../"，再輸入目錄名

(3)根路徑：適合內部連接的創建，通常狀況下不使用根路徑，以"/"開頭，後面緊跟文件路徑。

29.超連接的創建

(1)插入內部連接： <a href="index.htm">連接內容</a>

(2)插入外部連接： <a href="http://ysu.edu.cn">燕山大學</a>

(3)設置圖像映射：

基本語法：<img src="URL" usemap=""></img>

</map>

語法說明：<img>標記表示插入圖像文件，src表示插入圖像的路徑，<map>標記表示插入圖像的映射；<area>標記表示圖像映射區域；shape屬性表示映射區域形狀：rect表示矩形區域，circle表示橢圓形區域，poly表示多邊形區域；coords表示感應區域的座標。

30.表格

(1)<table></table>表示插入一個表格；

(2)<tr></tr>表示插入一行，<td></td>表示插入一列；

(3)<caption></caption>表示插入表格標題，用於<table>和<tr>之間；

(4)設置表格表頭<th>：將要做爲表頭的一行，列標記<td>改成<th>便可；

(5)設置劃分結構表格<thead>、<tbody>、<tfoot>

所謂劃分結構表格，指將一個表格分紅三個部分在網頁上顯示

<thead></thead>表示定義一組表頭行

<tbody></tbody>表示定義表格主體部分

<tfoot><tfoot>表示爲表格添加一個標準

(6)設置表格的標記屬性

width設置表格的寬度border設置表格邊框的粗細frame設置表格邊框的樣式rules設置表格內部邊框的屬性

above 顯示上邊框，border顯示上下左右邊框， below顯示下邊框， hsides顯示上下邊框，lhs顯示左邊框，rhs顯示右邊框，void 不顯示邊框，vsides 顯示左右邊框；

all 顯示全部內部邊框

groups 顯示介於行列之間的邊框

none 不顯示內部邊框

cols 顯示列邊框

rows 顯示行邊框

(7)設置表格行：<tr align="" valign="">

align設置行內容的水平對齊：left（左對齊），right，center

valign調整行內容的垂直對齊：top（頂端對齊），middle，bottom，baseline（基線）

(8)設置跨行：rowspan

<table>

<tr>

</tr>

<tr>

</tr>

</table>

顯示結果爲一個兩行三列的表格，可是第一列的兩個表格合併爲一個了，即跨行。

(9)設置跨列：colspan

<table>

<tr>

</tr>

<tr>

</tr>

</table>

顯示結果爲：

一個兩行三列的表格，可是第一行的前兩列表格合併爲一個表格。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。