跟大家講解下有關HTML入門基礎，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說HTML入門基礎，小編也收集到了有關HTML入門基礎的相關資料，希望大家看到了會喜歡。
本篇文章主要介紹HTML入門基礎，感興趣的朋友參考下，希望對大家有所幫助。標記、標簽、元素
標簽和元素通常是描述同樣的意思，但是嚴格來說，一個HTML元素包含了開始標簽和結束標簽。
一個標準的HTML頁面
<!DOCTYPE html> <!--聲明了文檔類型--><html> <!--描述了文檔類型--><head> <!--可以插入<script>腳本，樣式文件(css)以及各種meta信息<meta http-equiv="content-type" content="text/html;charset="utf-8" /><title>頁面標題</title></head><body> <!--可視化網頁內容（文檔的主體）</body>常用標簽
①HTML標題：<h></h>
標題是通過<h1>~<h6>標簽來定義的，h是"header"的縮寫。h1是主標題，只能使用一次，h2是副標題，h3~h6一次遞減字體大小。
②HTML段落：<p></p>
段落是通過標簽<p>來定義的，p是"paragraph"的縮寫，經常被用來創建一個段落。
③HTML連接<a></a>
鏈接是通過標簽<a>來定義的。a標簽也叫archor(錨點)元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的內部導航功能。
href="網址導航" target="_self"：在當前頁面進行跳轉（默認） target="_blank"：新開頁面跳轉
錨點：是文檔中某行的一個記號，用于鏈接到文檔中的某個位置。
定義錨點：<a name="錨點名"></a>
鏈接到錨點： <a href=#"錨點名">回到頂部</a>
如果只寫<a href="#"></a> 默認回到頁面頂部
④HTML圖像<img/>
圖像通過單標簽<img/>來定義。
<img src="location" alt="error" width="寬" height=“高”/>
src指“source”。源屬性的值是圖像的URL地址。
alt屬性用來為圖像定義一串預備的可替換的文本。
title屬性可以讓鼠標懸停在圖像上時顯示title內容（通常是圖像標題）。
⑤特殊字符與標簽
<br>標簽可以進行換行操作 <hr>標簽可以定義水平線 空格 < < > >
⑥HTML文本格式化
可以使用標簽<b>與<i>對輸出的文本進行粗體或斜體轉換。通常可以使用<strong>和<em>代替前者。然而，這些標簽的含義不同：
<b>與<i>定義粗體或斜體文本。
<strong>與<em>意味著這段文本是重要的，所以要突出顯示。
<small>縮小文本</small> <big>放大文本</big>
<sub>下標</sub> <sup>上標</sup>
<pre>保留文本里所有的空格和換行操作</pre>
對于HTML，無法通過在HTML代碼中添加額外的空格和空行，所有連續的空格（換行）會被合并為一個。
⑦HTML區塊
HTML可以通過<p>和<span>將元素組合起來。大多數HTML元素被定義為塊級元素或內聯元素（行內元素）。
塊級元素：獨占一行，元素前后自動換行。例如：<h>、<p>、<p>、<ul>、<table>
內聯元素：在顯示時通常不會以新行開始。例如：<span>、<a>、<i>、<em>、<b>、<td>、<img/>
p是塊級元素，它是可用于組合其他元素的容器。如果與CSS一同使用，p可用于對大的內容塊設置樣式屬性。
span是內聯元素，可用于作為文本內容的容器。當與CSS一同使用時，span可用于為部分文本設置樣式屬性。
⑧HTML列表
無序列表（unorderlist）：此列項目使用粗體圓點進行標記。
<ul><li>Coffee</li><li>Milk</li></ul>· Coffee· Milk
有序列表（orderlist）：此列項目使用數字進行標記。
<ol><li>Coffee</li><li>Milk</li></ol>1.Coffee2.Milk
自定義列表（definedlist）：不僅僅是一列項目，而是項目及其注釋的組合。
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>Coffee- black hot drinkMilk- white cold drink
⑨HTML表格
表格由<table>標簽來定義。每個表格均有若干行（tablerow），每行被分割為若干單元格（tabledata）。可以為表格指定width和height屬性，如果不定義邊框屬性，表格將不顯示邊框。
<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><h4>單元格跨兩列:</h4><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>瀏覽器中顯示如下：
單元格跨兩格:NameTelephoneBill Gates555 77 854555 77 855單元格跨兩列:First Name:Bill GatesTelephone:555 77 854555 77 855Cell spacing 增加單元格之間的距離
<h4>沒有單元格間距:</h4><table border="1"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table><h4>單元格間距="0":</h4><table border="1" cellspacing="0"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table><h4>單元格間距="10":</h4><table border="1" cellspacing="10"><tr> <td>First</td> <td>Row</td></tr><tr> <td>Second</td> <td>Row</td></tr></table>
⑩HTML表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
表單使用表單標簽 <form> 來設置。
多數情況下被用到的表單標簽是輸入標簽（<input>）。
輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
文本域（Text Fields）文本域通過<input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>瀏覽器顯示如下：
First name: Last name:
注意:表單本身并不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
密碼字段密碼字段通過標簽<input type="password"> 來定義:
<form>Password: <input type="password" name="pwd"></form>瀏覽器顯示效果如下:
Password:
注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。
單選按鈕（Radio Buttons）<input type="radio"> 標簽定義了表單單選框選項
<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>瀏覽器顯示效果如下:
MaleFemale
復選框（Checkboxes）<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。<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 bikeI have a car上傳文件
<input type="file" name="fileName" />下拉列表/滾動列表<form action=""><select name="cars" size=1> <!--size=1時是下拉框，size>1時是滾動框--><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">文本域只能通過rows和cols屬性設置尺寸，如果文本內容超出限制會變成下拉框。</textarea>Label標簽
label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
"for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 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關聯，執行客戶端腳本-->提交按鈕
<input type="submit" value="提交"/> <!--傳送表單數據到服務器-->重置按鈕
<input type="reset" value="重置"/> <!--清空表單內容為最初默認值-->HTML5的button標簽
<button type="button">確認</button>在button元素內部可以放置內容，比如文本或圖像。這是該元素與使用input元素創建按鈕之間的不同之處。請始終為button元素規定type屬性。
相關推薦：
HTML基礎之選擇器
幾個HTML基礎知識點
在前端中的html基礎知識
以上就是HTML入門基礎的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網