html簡介

本文轉載自查看原文 2017-04-14 07:14 3112 web前端

1、什么是html

HTML是用來制作網頁的標記語言
HTML是Hypertext Markup Language的英文縮寫,即超文本標記語言
在html中，雖然有文本，但是這些文本需要使用html語言中的標記來標識。
當被html中的標記標識之后的文本，它就超出了我們所理解的簡單文檔范疇。
不再是一個普通的文本。而這些文本可以被瀏覽器進行識別，並且以不同的形式展示在瀏覽器上。
HTML語言是一種標記語言,不需要編譯,直接由瀏覽器執行
HTML文件是一個文本文件,包含了一些HTML元素,標簽等.HTML文件必須使用html或htm為文件名后綴
HTML是對大小寫不敏感的,HTML與html是一樣的；但是我們一般規定：書寫時一律小寫
HTML是由W3C組織的維護的

2、html手冊(API)介紹

手冊來自w3c組織。

w3c組織：這個制定了互聯網上眾多通信協議規則和基本的網站開發技術規則。

3、html文件的書寫規范

任何的語言書寫的源碼代碼都有自己的書寫規范。

html規范：

約定: 所有的html代碼都需要保存在html 標簽中

格式：

Html可以分為三個部分：

1.html標簽：html文件的所以代碼都要在html標簽中。

2.head標簽：head標簽中的內容不會瀏覽器的窗體中顯示。Title標簽是網頁的標題名稱。

3.body標簽：body標簽中的代碼才會顯示在瀏覽器的窗體中。

注意：在html中不區分大小寫。但是建議一律小寫.

4、html標簽介紹

通常要用兩個角括號括起來:“<”和“>”。
標簽都是閉合的（兩種格式：雙標簽（成對）與 單標簽（不成對）

雙標簽：<標簽名>標簽名稱</標簽名> 如：<table></table> 分結束標簽和開始標簽

單標簽：<標簽名/> 如：<br/> <hr/>

　　注意：由於html是一種弱勢語言，所以如果單標簽不寫 / 一般也不會報錯，但如果放在某些規定比較嚴格的瀏覽器上運行，可能會出現問題，所以，建議還是按照規范的格式寫代碼

標簽是大小寫無關的,<body>跟<BODY>表示意思是一樣的，標准推薦使用小寫，這樣符合XHTML標准

　標簽的屬性：

格式：<標簽名屬性名1="屬性值" 屬性名2="屬性值" ... 屬性名>書寫內容</標簽名>
HTML屬性一般都出現在HTML標簽中, 是HTML標簽的一部分。
標簽可以有屬性,它包含了額外的信息.屬性的值一定要在雙/單引號中。
標簽可以擁有多個屬性。
屬性由屬性名和值成對出現。
示例：

當我們把html源代碼書寫完成之后，需要交給瀏覽器解析運行。這時瀏覽器會啟動html語言的解析引擎，然后解析當前的html文件，

在解析的過程中，瀏覽器遇到不同的標簽，然后根據具體的屬性數據的值確定以什么方式在頁面上顯示當前標簽中的數據。

5、常用標簽介紹

HTML注釋:

作用：HTML注釋,我們經常要在一些代碼旁做一些HTML注釋,這樣做的好處很多,比如:方便查找,方便比對,方便項目組里的其它程序員了解你的代碼,而且可以方便以后你對自己代碼的理解與修改等等.

語法：

HTML代碼格式

任何回車，空格和Tab鍵在源代碼中都是不起作用的，所以在編寫HTML代碼時，都可以使用回車或者空格進行代碼排版，這樣可以使代碼清晰，也便於團隊合作。必須保持嚴格的縮進規則，以“Tab”鍵為准。

5.1、排版標簽

所有的瀏覽器默認情況下都會忽略空格和空行和tab鍵

html中表示長度的單位都是像素。HTML只有一種單位就是像素。

p標簽：p代表一個段落，前后各空一行

<br/>代表是換行。

<hr/>:一條分割實線

div: 塊級標簽,單獨占據一行

span: 塊級標簽,但沒有什么效果

<h1> --> <h6> 標題標簽，字體從大到小，加粗，自動換行。

5.2、字體標簽

語法格式：<font 屬性名="屬性值">書寫內容</font>

需求：

1、將字體大小1號、顏色為紅色、字體為黑體

2、將字體大小7號、顏色為綠色、字體為黑體

3、將字體大小100號、顏色為藍色、字體為黑體

代碼：

注意：size超過7也是7的效果；

5.3、特殊字符

諸如 “<” 之類的符號在HTML中擁有特殊的含義，所以在文本中不能直接使用它們。

為了在 HTML 中顯示小於號(<)，我們需要使用特殊字符（轉義字符）。

5.4、標題標簽

<h1> --> <h6> 標題標簽，字體從大到小，加粗，自動換行。

語法格式：<hn>書寫內容</hn>

5.5、超鏈接標簽

1）href和target屬性，超鏈接

鏈接格式：

　　<a href="url" target="_blank">顯示的文字</a>

　常用屬性

href -- 代表一個url鏈接源(就是鏈接到什么地方)

target -- 指定連接的新資源在什么位置打開。

　　　　_blank 是表示在一個新的頁面中打開

　　　　_self 在當前自己所在的頁面中打開(默認)，新頁面會覆蓋本頁面

　　　　_parent 在父頁面中打開

　　　　_top 在頂部打開

超鏈接示例

　　　　1、網站鏈接：<a href="http://www.baidu.com">歡迎訪問百度</a>

　　　　2、電子郵件給我們：<a href="mailto://qqq@qqq.com">聯系我們</a>

　　　　3、鏈接到本地文件：<a href="相對路徑">訪問頁面1</a>

注意事項：

　　　　1、如果連接的是互聯網中的資源，這時需要書寫協議名稱，如http://

　　　　2、如果不寫任何協議，這時默認使用的file協議，即本地文件的地址

　　　　3、在書寫a標簽的時候，指定的不同的協議，這時瀏覽器會識別這些協議完成不同的事情

2）name屬性與href屬性的結合使用，錨點定位

格式：

設置錨點： <a name="錨點名稱"></a>

設置點擊跳躍： <a href="#錨點名稱">書寫內容</a>

舉例：

需求：制作書簽，第一章、第二章、第三章、頂部、頂部書簽

代碼：

注意：只有頁面內容足夠長才可以看出效果；

5.6、列表標簽

列表標簽：3種

1.無序列表(ul)

屬性：type 值：disc(默認，實心原點),square(實心方點),circle(空心圓)

格式：

<ul>

</ul>

練習：

<ul>

</ul>

2.有序列表(ol)

屬性: type 取值：1(阿拉伯數字，默認),a,A,i,I

格式：

<ol>

</ol>

練習：

<ol>

</ol>

3.定義列表(dl)

dt: 列表項的標題

dd: 列表項

格式：

<dl>

</dl>

練習：

<h3>自定義列表</h3>

<dl>

</dl>

注意：列表標簽的有序和無序，不是指順序，而是指序號；

5.7、圖像標簽

img標簽：代表是一副圖片

必須屬性：

alt：圖片描述，如果圖片找不到，就顯示alt中的內容

src：圖片的路徑，既可以是本地的圖片，也可以是網絡上的圖片

兩種寫法：

　　a) : 相對路徑　　相對於頁面所在的路徑，兩個標記 ./ 和 ../ 分表代表當前目錄和父路徑

　b) ：絕對路徑

　　1) : 以盤符開始的路徑 eg: C:\Documents and Settings\Administrator\桌面\images/1.jpg

　　　　2) : 網絡路徑 eg: http://www.baidu.com/images

語法格式：<img alt="圖片找不到顯示的描述" src="圖片路徑"/>

可選屬性：

width: 寬度，可為具體值，或者百分數

height：高度

title：提示性文本

border: 邊框

一般設置了width就不設置height了，因為系統會自動調節適當的比例展示圖片；

需求：

顯示一張美女圖片，圖片沒找到顯示美女一枚，邊框為10px, 寬為250px，高為150px。

代碼：

5.8、表格標簽（重點）

table: 表格

　　屬性：border:邊框

　　　　　width:寬度，可為具體值或百分比

　　　　 height：高度

　　　　　cellpadding:單元格內容到邊的距離

　　　　　cellspacing:單元格和單元格之間的距離

tr: 行

td: 單元格（列）

th: 列，加粗居中

注意：

表格由行和列組成，在每一行中會有列，列被稱為單元格

編寫表格時，應該先有行tr, 再有列td

如果單元格沒有任何數據，表格也不會在頁面上顯示。

需求：

　　需求1: 編寫一個2行3列的表格

　　需求2: 編寫學生信息展示（學號、姓名、性別）

代碼：

　　<tr>

　　</tr>

　　<tr>

　　</tr>

</table>

<h1>需求2: 編寫學生信息展示（學號、姓名、性別）</h1>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

</table>

5.7、跨行跨列表格

單元格的合並：

單元格的屬性：

　　colspan: 橫向合並

　　rowspan: 縱向合並

值為合並的單元格個數

操作步驟；

第一步：首先做一個完整的表格

第二步：然后再去研究跨行或者跨列的單元格即可。

第三步：在需要使用跨行或者跨列的單元格上使用colspan屬性或者rowspan

需求：

需求1: 實現跨行,制作電話本

需求2: 實現跨列,制作電話本

代碼：

<h1>需求1: 實現跨行,制作電話本</h1>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

</table>

<h1>需求2: 實現跨列,制作電話本</h1>

　　<tr>

　　</tr>

　　<tr>

　　</tr>

</table>

5.8、框架標簽

frameset: 框架的集合

rows: 縱向分部框架.

cols: 橫向分部框架.

寫法有兩種:

　　　　1) 絕對值 "200,*" ,*代表剩余的

　　　 2) 相對值 "30%,*"

frame標簽 -- 定義frameset標簽中每個框架頁的內容

frame標簽是單獨出現的，<frame/>

常用屬性:

name -- 在一個框架頁鏈接到另一框架頁時使用(另一個框架頁可以使用target定義鏈接頁)

src -- 定義了內容頁URL

需求:

主頁面:

<html>

<head>

</head>

</frameset>

</html>

top.html

left.html

<html>

<head>

<title>當前文檔標題</title>

</head>

<body>

<h3>這是左側導航(目錄)</h3>

</body>

</html>

right.html

5.9、表單標簽

表單標簽的主要功能：它是把表單中的數據提交給遠端的服務器。

表單標簽不是一個標簽，而是一組標簽。

<form>

　　子標簽，子標簽中的數據，會被提交給服務器。

</form>

1）表單標簽：form

form 屬性：

　　action:表單提交的地址，即決定提交的位置

　　method:表單提交的方式.

　　get提交:（默認）

　　　　1.將參數鍵值對拼裝在Url地址之后.

　　　　2.get提交安全性相對較差

　　　　3.get提交參數長度有限

　　post提交:

　　　　1.參數不在Url上

　　　　2.post提交安全性相對較好

　　　　3.post提交理論上參數長度沒有限制

2）輸入標簽：input

input標簽是單標簽，<input/>

type屬性:決定輸入的類型屬性值：下列

<input type="text"/>	文本輸入框，用戶可以輸入文本數據
<input type="password"/>	密碼框，主要是輸入不可見的文本數據
<input type="radio"/>	單選按鈕，主要讓用戶選擇數據
<input type="checkbox"/>	多選按鈕，主要讓用戶選擇數據
<input type="file"/>	上傳文件的組件
<input type="button" value="內容"/>或者<button value=”顯示內容”>	顯示一個按鈕，但點擊沒有任何效果，按鈕上的文件需要使用value屬性書寫
<input type="hidden"/>	頁面上的隱藏域。這個數據在頁面上會存在，但是不會顯示
<input type="image"/>	它是在頁面上嵌入一個圖片，使用這個圖片可以完成頁面數據的提交
<input type="reset"/>	重置頁面上的所有輸入項，恢復默認狀態
<input type="submit" value=“內容”/>	把當前form標簽中的所有輸入項中的數據提交給服務器

name屬性:提交的鍵

value屬性：name對應的值

注意：

　　1.提交給服務器的參數是以鍵值對的形式提交的（name=value），如果不指定name屬性就不會提交到服務器的；

　　2.如果type的值是需要輸入的文本類型，比如text和password，只需要name屬性即可，value屬性的值是我們輸入的內容；

　　3.如果type的值是需要選擇的文本類型，比如radio和checkbox，同時需要name和value屬性，才會提交到服務器中；

　　4.對於同一組的內容，比如使用radio來表示性別，必須用相同的name屬性的值來將其綁定為一組，checkbox也是這樣；

size屬性:文本輸入框的顯示長度

maxlength屬性:限制文本框輸入長度

readonly:只讀.不可修改文本內容.會提交

disabled:禁用.被禁用的表單項不會被提交. 所有input都可以使用

3）下拉框標簽：select

select標簽是成對出現的,以<select>開始,以</select>結束

此標簽中的每對option標簽代表一個選擇項

注意：一般要在select中寫name屬性，在option中寫value屬性

select標簽屬性:

　　name -- 表單項名稱

　　size -- 選擇域的高度

　　multiple -- 可以有多個選擇

option 標簽 -- 代表選擇列表的一個選擇項，option標簽是成對出現的,以<option>開始,以</option>結束

屬性:

　　value -- 說明選擇項的值

　　selected -- 此選擇項已經被選擇

4）文本域標簽：textarea

屬性：

　　name：提交的鍵名稱，輸入的內容為value值

　　disabled:禁用

　　readonly:只讀

注意：表單標簽的所以標簽都沒有自動換行的功能，需要自己換行；

5.10、form表單的細節

form標簽上的action和method屬性：

　　action：通過這個action屬性，指定要把當前form標簽中的所有輸入的數據提交給那個服務器。

　　action屬性中書寫的具體的服務器的地址（URL）

　　URL:統一資源定位符。 http://sh.itcast.cn:80/index.html 它代表的是一個具體的網絡位置

　　method:表示當前瀏覽器以什么方式把form表單中的數據提交給服務器

　　method有8種格式，現在主要使用2種:分別 get 和 post

　　一般使用form表單給服務器提交數據，統一都會使用post提交。

============================================================================================

如果需要把form標簽中的所有數據提交給服務器，要求form標簽中的每個數據對應的標簽上必須有一個name屬性。

只有加了name屬性之后，瀏覽器才會發送表單項的數據,服務器才會接受到當前標簽中輸入的數據，並且數據的格式是：name=”提交參數的key”

注意：當form標簽中的子標簽中的數據，如果是讓用戶輸入的，這時可以在標簽上不用書寫value屬性。

如果是讓用戶選擇的，這時必須書寫value屬性，這個value屬性的值，就是提交給服務器的數據

對於select標簽，name屬性需要寫在select標簽中，而value屬性需要寫在option標簽

需求：

1、完善form標簽的action屬性值

2、完善表單選項對應的name屬性值

3、完善單選、多選、下拉框的value值

<!--

form標簽：

　action 表示當前表單提交服務器的地址

　method 表示提交方式

　　　 get 在瀏覽器地址欄中可以看到

　　　post 在瀏覽器地址欄不可以看到

如果是用戶選擇得值,如單選、多選、下拉框需要用戶指定value屬性值

-->

　　用戶名<input type="text" name="username"/> <br/>

　　密碼 <input type="password" name="pwd"/><br/>

　　確認密碼 <input type="password" name="repwd"/><br/>

　　性別<input type="radio" name="sex" value="男"/> 男

　　愛好<input type="checkbox" name="hobby" value="高爾夫"/> 高爾夫

　　　　<input type="checkbox" name="hobby" value="騎馬"/> 騎馬

　　　　<input type="checkbox" name="hobby" value="帆船"/> 帆船

　　學歷<select name="edu">

　　 </select> <br/>

　　個人介紹<textarea rows="5" cols="50" name="info"></textarea><br/>

　　<input type="reset"/> //這里不需要設置value值，系統默認值為“重置”；

</form>

表單的通過表格美化:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>美化注冊表單</title>

</head>

<body>

　　　　 <tr>

　　　　 </tr>

　　　　<tr>

　　　　 </tr>

　　　　 <tr>

　　　　</tr>

　　　　 <tr>

　　　　　　 <td>

　　　　　　　　<input type="radio" name="sex" value="男"/> 男

　　　　　　　　 <input type="radio" name="sex" value="女"/> 女

　　　　　　 </td>

　　　　 </tr>

　　　　<tr>

　　　　　　<td>

　　　　　　　　<input type="checkbox" name="hobby" value="高爾夫"/> 高爾夫

　　　　　　　　 <input type="checkbox" name="hobby" value="騎馬"/> 騎馬

　　　　　　　　 <input type="checkbox" name="hobby" value="帆船"/> 帆船

　　　　　　　　 <input type="checkbox" name="hobby" value="F1賽車"/> F1賽車

　　　　　　 </td>

　　　　 </tr>

　　　　 <tr>

　　　　　　 <td>

　　　　　　　　</select>

　　　　　　 </td>

　　　　 </tr>

　　　　 <tr>

　　　　 </tr>

　　　　<tr>

　　　　　　 <td>

　　　　　　</td>

　　　　 </tr>

　　</table>

</form>

</center>

</body>

</html>

5.11、其他標簽

div標簽：

span標簽：

p標簽：

div、span標簽它們僅僅是用來封裝數據，而對數據不做任何的樣式效果的設置。
P：html中的段落標簽，被p標簽封裝的數據，前后各有一行空行。
出現div和span標簽的目的是主要讓html標簽從負責數據的封裝和樣式進行分離。
早期的html標簽，它既可以封裝數據，同時通過標簽的屬性可以對封裝的數據進行樣式效果的設置。
后期網頁設計中，我們主要使用div和span，以及html中的其他標簽完成頁面上要顯示的數據的封裝，
而不再使用html標簽的屬性來控制頁面上數據的樣式，把樣式交給了新的技術CSS。
html主要負責數據的封裝，CSS技術負責頁面的數據顯示的樣式。
div和span以及p標簽將來在頁面上重點不是封裝數據，而是對頁面進行划分和布局

需求1、書寫三個div、三個span、三個p

<body>

<!--

　　 html優點: 既可以封裝數據, 也可以修飾樣式

　　缺點：就是因為他太強大了, html標簽將數據和樣式封裝到一起, 這樣的話會導致閱讀困難, 修改困難, 維護困難, 開發困難，所以html 以后只負責數據封裝, 而把樣式的修飾交給了css來負責，div span p 除了負責數據的封裝, 頁面的布局

-->

<div color="xxx" yyy="xxxx" >這是div1</div>

<div>這是div2</div>

<div>這是div3</div>

<span>這是span1</span>

<span>這是span2</span>

<span>這是span3</span>

</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Html的簡介 HTML簡介 html標簽簡介（常用） HTML5簡介 HTML個人簡介 requests-html簡介 HTML5 indexedDB簡介 HTML5 WebAudioAPI簡介(一) HTML個人簡介【HTML5】webworker簡介