明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML基礎(chǔ)基礎(chǔ)

發(fā)表時間：2023-09-10 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要介紹HTML入門基礎(chǔ)，感興趣的朋友參考下，希望對大家有所幫助。標(biāo)記、標(biāo)簽、元素標(biāo)簽和元素通常是描述同樣的意思，但是嚴(yán)格來說，一個HTML元素包含了開始標(biāo)簽和結(jié)束標(biāo)簽。一個標(biāo)準(zhǔn)的HTML頁面<!DOCTYPE html> <!--聲明了文檔類型--><ht...
本篇文章主要介紹HTML入門基礎(chǔ)，感興趣的朋友參考下，希望對大家有所幫助。

標(biāo)記、標(biāo)簽、元素

標(biāo)簽和元素通常是描述同樣的意思，但是嚴(yán)格來說，一個HTML元素包含了開始標(biāo)簽和結(jié)束標(biāo)簽。

一個標(biāo)準(zhǔn)的HTML頁面

<!DOCTYPE html>  <!--聲明了文檔類型-->
<html>    <!--描述了文檔類型-->
<head>    <!--可以插入<script>腳本，樣式文件(css)以及各種meta信息
<meta http-equiv="content-type" content="text/html;charset="utf-8" />
<title>頁面標(biāo)題</title>
</head>
<body>    <!--可視化網(wǎng)頁內(nèi)容（文檔的主體）</body>

常用標(biāo)簽

①HTML標(biāo)題：<h></h>

標(biāo)題是通過<h1>~<h6>標(biāo)簽來定義的，h是"header"的縮寫。h1是主標(biāo)題，只能使用一次，h2是副標(biāo)題，h3~h6一次遞減字體大小。


②HTML段落：<p></p>

段落是通過標(biāo)簽<p>來定義的，p是"paragraph"的縮寫，經(jīng)常被用來創(chuàng)建一個段落。

③HTML連接<a></a>

鏈接是通過標(biāo)簽<a>來定義的。a標(biāo)簽也叫archor(錨點)元素，既可以用來鏈接到外部地址實現(xiàn)頁面跳轉(zhuǎn)功能，也可以鏈接到當(dāng)前頁面的內(nèi)部導(dǎo)航功能。

href="網(wǎng)址導(dǎo)航" target="_self"：在當(dāng)前頁面進行跳轉(zhuǎn)（默認(rèn)） target="_blank"：新開頁面跳轉(zhuǎn)

錨點：是文檔中某行的一個記號，用于鏈接到文檔中的某個位置。

定義錨點：<a name="錨點名"></a>

鏈接到錨點： <a href=#"錨點名">回到頂部</a>

如果只寫<a href="#"></a> 默認(rèn)回到頁面頂部

④HTML圖像<img/>

圖像通過單標(biāo)簽<img/>來定義。

<img src="location" alt="error" width="寬" height=“高”/>

src指“source”。源屬性的值是圖像的URL地址。

alt屬性用來為圖像定義一串預(yù)備的可替換的文本。

title屬性可以讓鼠標(biāo)懸停在圖像上時顯示title內(nèi)容（通常是圖像標(biāo)題）。


⑤特殊字符與標(biāo)簽

<br>標(biāo)簽可以進行換行操作 <hr>標(biāo)簽可以定義水平線 &nbsp; 空格 &lt; < &gt; >

⑥HTML文本格式化

可以使用標(biāo)簽<b>與<i>對輸出的文本進行粗體或斜體轉(zhuǎn)換。通�？梢允褂�<strong>和<em>代替前者。然而，這些標(biāo)簽的含義不同：

<b>與<i>定義粗體或斜體文本。

<strong>與<em>意味著這段文本是重要的，所以要突出顯示。

<small>縮小文本</small> <big>放大文本</big>

<sub>下標(biāo)</sub> <sup>上標(biāo)</sup>

<pre>保留文本里所有的空格和換行操作</pre>

對于HTML，無法通過在HTML代碼中添加額外的空格和空行，所有連續(xù)的空格（換行）會被合并為一個。

⑦HTML區(qū)塊

HTML可以通過<p>和<span>將元素組合起來。大多數(shù)HTML元素被定義為塊級元素或內(nèi)聯(lián)元素（行內(nèi)元素）。

塊級元素：獨占一行，元素前后自動換行。例如：<h>、<p>、<p>、<ul>、<table>

內(nèi)聯(lián)元素：在顯示時通常不會以新行開始。例如：<span>、<a>、<i>、<em>、<b>、<td>、<img/>

p是塊級元素，它是可用于組合其他元素的容器。如果與CSS一同使用，p可用于對大的內(nèi)容塊設(shè)置樣式屬性。

span是內(nèi)聯(lián)元素，可用于作為文本內(nèi)容的容器。當(dāng)與CSS一同使用時，span可用于為部分文本設(shè)置樣式屬性。

⑧HTML列表

無序列表（unorderlist）：此列項目使用粗體圓點進行標(biāo)記。 

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

· Coffee
· Milk

有序列表（orderlist）：此列項目使用數(shù)字進行標(biāo)記。 

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

1.Coffee
2.Milk

自定義列表（definedlist）：不僅僅是一列項目，而是項目及其注釋的組合。

<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)簽來定義。每個表格均有若干行（tablerow），每行被分割為若干單元格（tabledata）。可以為表格指定width和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>

在瀏覽器顯示如下：

HTML入門基礎(chǔ)

跨行和跨列的表格單元格

<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>

瀏覽器中顯示如下：

單元格跨兩格:

NameTelephone
Bill Gates555 77 854555 77 855

單元格跨兩列:

First Name:Bill Gates
Telephone:555 77 854
555 77 855

Cell 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入門基礎(chǔ)

⑩HTML表單

表單是一個包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

表單使用表單標(biāo)簽 <form> 來設(shè)置。

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。

輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下：

文本域（Text Fields）

文本域通過<input type="text"> 標(biāo)簽來設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時，就會用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

瀏覽器顯示如下：

First name:
Last name:

注意:表單本身并不可見。同時，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個字符。

密碼字段

密碼字段通過標(biāo)簽<input type="password"> 來定義:

<form>
Password: <input type="password" name="pwd">
</form>

瀏覽器顯示效果如下:

Password:

注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。

單選按鈕（Radio Buttons）

<input type="radio"> 標(biāo)簽定義了表單單選框選項

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

瀏覽器顯示效果如下:

Male
Female

復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<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時是下拉框，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屬性設(shè)置尺寸，如果文本內(nèi)容超出限制會變成下拉框。
</textarea>


Label標(biāo)簽


label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。

label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

"for" 屬性可把 label 綁定到另外一個元素。請把 "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>

a1.png

按鈕

普通按鈕

<input type="button" value="按鈕"/>    <!--自定義按鈕，和JS關(guān)聯(lián)，執(zhí)行客戶端腳本-->

提交按鈕

<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)建按鈕之間的不同之處。請始終為button元素規(guī)定type屬性。

相關(guān)推薦：

HTML基礎(chǔ)之選擇器

幾個HTML基礎(chǔ)知識點

在前端中的html基礎(chǔ)知識

以上就是HTML入門基礎(chǔ)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。