HTML入門基礎(chǔ)的知識點有哪些-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)HTML入門基礎(chǔ)的知識點有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

從事BGP機房服務(wù)器托管，服務(wù)器租用，云主機，網(wǎng)站空間，域名注冊，CDN，網(wǎng)絡(luò)代維等服務(wù)。

標記、標簽、元素

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

一個標準的HTML頁面

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

常用標簽

①HTML標題：<h></h>

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

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

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

③HTML連接<a></a>

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

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

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

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

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

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

④HTML圖像<img/>

圖像通過單標簽<img/>來定義。

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

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

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

⑤特殊字符與標簽

<br>標簽可以進行換行操作 <hr>標簽可以定義水平線   空格 < < > >

⑥HTML文本格式化

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

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

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

<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)容的容器。當與CSS一同使用時，span可用于為部分文本設(shè)置樣式屬性。

⑧HTML列表

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

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

·Coffee
·Milk

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

<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>標簽來定義。每個表格均有若干行（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>

在瀏覽器顯示如下：

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>
<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
Telephone:	555 77 855

Cell spacing 增加單元格之間的距離

<h5>沒有單元格間距:</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表單

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

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

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

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

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

文本域（Text Fields）

文本域通過<input type="text"> 標簽來設(shè)定，當用戶要在表單中鍵入字母、數(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個字符。

密碼字段

密碼字段通過標簽<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>

瀏覽器顯示效果如下:

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

label> 標簽為 input 元素定義標注（標記）。

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

HTML入門基礎(chǔ)的知識點有哪些

按鈕

普通按鈕

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

提交按鈕

<input type="submit" value="提交"/>    <!--傳送表單數(shù)據(jù)到服務(wù)器-->

重置按鈕

<input type="reset" value="重置"/>    <!--清空表單內(nèi)容為最初默認值-->

HTML5的button標簽

<button type="button">確認</button>

在button元素內(nèi)部可以放置內(nèi)容，比如文本或圖像。這是該元素與使用input元素創(chuàng)建按鈕之間的不同之處。請始終為button元素規(guī)定type屬性。

感謝各位的閱讀！關(guān)于“HTML入門基礎(chǔ)的知識點有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：HTML入門基礎(chǔ)的知識點有哪些-創(chuàng)新互聯(lián)
本文路徑：http://jinyejixie.com/article44/dpsphe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、企業(yè)網(wǎng)站制作、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

HTML入門基礎(chǔ)的知識點有哪些-創(chuàng)新互聯(lián)