溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)HTML入門(mén)基礎(chǔ)的知識(shí)點(diǎn)有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
標(biāo)記、標(biāo)簽、元素
標(biāo)簽和元素通常是描述同樣的意思，但是嚴(yán)格來(lái)說(shuō)，一個(gè)HTML元素包含了開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。
一個(gè)標(biāo)準(zhǔn)的HTML頁(yè)面
<!DOCTYPE html> <!--聲明了文檔類(lèi)型--> <html> <!--描述了文檔類(lèi)型--> <head> <!--可以插入<script>腳本，樣式文件(css)以及各種meta信息 <meta http-equiv="content-type" content="text/html;charset="utf-8" /> <title>頁(yè)面標(biāo)題</title> </head> <body> <!--可視化網(wǎng)頁(yè)內(nèi)容（文檔的主體）</body>
常用標(biāo)簽
①HTML標(biāo)題：<h></h>
標(biāo)題是通過(guò)<h2>~<h7>標(biāo)簽來(lái)定義的，h是"header"的縮寫(xiě)。h2是主標(biāo)題，只能使用一次，h3是副標(biāo)題，h4~h7一次遞減字體大小。
②HTML段落：<p></p>
段落是通過(guò)標(biāo)簽<p>來(lái)定義的，p是"paragraph"的縮寫(xiě)，經(jīng)常被用來(lái)創(chuàng)建一個(gè)段落。
③HTML連接<a></a>
鏈接是通過(guò)標(biāo)簽<a>來(lái)定義的。a標(biāo)簽也叫archor(錨點(diǎn))元素，既可以用來(lái)鏈接到外部地址實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能，也可以鏈接到當(dāng)前頁(yè)面的內(nèi)部導(dǎo)航功能。
href="網(wǎng)址導(dǎo)航" target="_self"：在當(dāng)前頁(yè)面進(jìn)行跳轉(zhuǎn)（默認(rèn)） target="_blank"：新開(kāi)頁(yè)面跳轉(zhuǎn)
錨點(diǎn)：是文檔中某行的一個(gè)記號(hào)，用于鏈接到文檔中的某個(gè)位置。
定義錨點(diǎn)：<a name="錨點(diǎn)名"></a>
鏈接到錨點(diǎn)： <a href=#"錨點(diǎn)名">回到頂部</a>
如果只寫(xiě)<a href="#"></a> 默認(rèn)回到頁(yè)面頂部
④HTML圖像<img/>
圖像通過(guò)單標(biāo)簽<img/>來(lái)定義。
<img src="location" alt="error" width="寬" height=“高”/>
src指“source”。源屬性的值是圖像的URL地址。
alt屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。
title屬性可以讓鼠標(biāo)懸停在圖像上時(shí)顯示title內(nèi)容（通常是圖像標(biāo)題）。
⑤特殊字符與標(biāo)簽
<br>標(biāo)簽可以進(jìn)行換行操作 <hr>標(biāo)簽可以定義水平線(xiàn) 空格 < < > >
⑥HTML文本格式化
可以使用標(biāo)簽<b>與<i>對(duì)輸出的文本進(jìn)行粗體或斜體轉(zhuǎn)換。通?？梢允褂?lt;strong>和<em>代替前者。然而，這些標(biāo)簽的含義不同：
<b>與<i>定義粗體或斜體文本。
<strong>與<em>意味著這段文本是重要的，所以要突出顯示。
<small>縮小文本</small> <big>放大文本</big>
<sub>下標(biāo)</sub> <sup>上標(biāo)</sup>
<pre>保留文本里所有的空格和換行操作</pre>
對(duì)于HTML，無(wú)法通過(guò)在HTML代碼中添加額外的空格和空行，所有連續(xù)的空格（換行）會(huì)被合并為一個(gè)。
⑦HTML區(qū)塊
HTML可以通過(guò)<p>和<span>將元素組合起來(lái)。大多數(shù)HTML元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素（行內(nèi)元素）。
塊級(jí)元素：獨(dú)占一行，元素前后自動(dòng)換行。例如：<h>、<p>、<p>、<ul>、<table>
內(nèi)聯(lián)元素：在顯示時(shí)通常不會(huì)以新行開(kāi)始。例如：<span>、<a>、<i>、<em>、<b>、<td>、<img/>
p是塊級(jí)元素，它是可用于組合其他元素的容器。如果與CSS一同使用，p可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
span是內(nèi)聯(lián)元素，可用于作為文本內(nèi)容的容器。當(dāng)與CSS一同使用時(shí)，span可用于為部分文本設(shè)置樣式屬性。
⑧HTML列表
無(wú)序列表（unorderlist）：此列項(xiàng)目使用粗體圓點(diǎn)進(jìn)行標(biāo)記。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
· Coffee
· Milk
有序列表（orderlist）：此列項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
1.Coffee
2.Milk
自定義列表（definedlist）：不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
Coffee
- black hot drink
Milk
- white cold drink
⑨HTML表格
表格由<table>標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（tablerow），每行被分割為若干單元格（tabledata）?？梢詾楸砀裰付╳idth和height屬性，如果不定義邊框?qū)傩?，表格將不顯示邊框。
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <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> </table>
在瀏覽器顯示如下：
跨行和跨列的表格單元格
<table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h5>單元格跨兩列:</h5> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
瀏覽器中顯示如下：
| Name | Telephone | |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
| First Name: | Bill Gates |
|---|---|
| Telephone: | 555 77 854 |
| 555 77 855 |
Cell spacing 增加單元格之間的距離
<h5>沒(méi)有單元格間距:</h5> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h5>單元格間距="0":</h5> <table border="1" cellspacing="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h5>單元格間距="10":</h5> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
⑩HTML表單
表單是一個(gè)包含表單元素的區(qū)域。
表單元素是允許用戶(hù)在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。
表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置。
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。
輸入類(lèi)型是由類(lèi)型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類(lèi)型如下：
文本域通過(guò)<input type="text"> 標(biāo)簽來(lái)設(shè)定，當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
瀏覽器顯示如下：
First name:
Last name:
注意:表單本身并不可見(jiàn)。同時(shí)，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個(gè)字符。
密碼字段通過(guò)標(biāo)簽<input type="password"> 來(lái)定義:
<form> Password: <input type="password" name="pwd"> </form>
瀏覽器顯示效果如下:
Password:
注意:密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代。
<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
瀏覽器顯示效果如下:
Male
Female
<input type="checkbox"> 定義了復(fù)選框. 用戶(hù)需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。 <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
瀏覽器顯示效果如下:
I have a bike
I have a car
上傳文件
<input type="file" name="fileName" />
<form action=""> <select name="cars" size=1> <!--size=1時(shí)是下拉框，size>1時(shí)是滾動(dòng)框--> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
文本域（Textarea）
<textarea rows="10" cols="30"> 文本域只能通過(guò)rows和cols屬性設(shè)置尺寸，如果文本內(nèi)容超出限制會(huì)變成下拉框。 </textarea>
Label標(biāo)簽
label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
label 元素不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果。不過(guò)，它為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
"for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
<form action="demo_form.phpp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="提交"> </form>
帶邊框的表單（Fieldset）
<form action=""> <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> E-mail: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> </fieldset> </form>
按鈕
普通按鈕
<input type="button" value="按鈕"/> <!--自定義按鈕，和JS關(guān)聯(lián)，執(zhí)行客戶(hù)端腳本-->
提交按鈕
<input type="submit" value="提交"/> <!--傳送表單數(shù)據(jù)到服務(wù)器-->
重置按鈕
<input type="reset" value="重置"/> <!--清空表單內(nèi)容為最初默認(rèn)值-->
HTML5的button標(biāo)簽
<button type="button">確認(rèn)</button>
在button元素內(nèi)部可以放置內(nèi)容，比如文本或圖像。這是該元素與使用input元素創(chuàng)建按鈕之間的不同之處。請(qǐng)始終為button元素規(guī)定type屬性。
感謝各位的閱讀！關(guān)于“HTML入門(mén)基礎(chǔ)的知識(shí)點(diǎn)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
