HTML基礎(chǔ)

時(shí)間：2023-08-29 13:48:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-08-29 13:48:01 來源：網(wǎng)站運(yùn)營

HTML基礎(chǔ)：

一：結(jié)構(gòu)化標(biāo)記

(描述標(biāo)題和段落的元素)

1.標(biāo)題：<h1> <h2> <h3> <h4> <h5> <h6>

2.段落：<p>

3.粗體：<b> 斜體：<i>

4.上標(biāo)：<sup> 下標(biāo)：<sub>5.換行符：<br />

6.水平線：<hr/>

二：語義化標(biāo)記

(表達(dá)特定含義的元素。不影響網(wǎng)頁結(jié)構(gòu)，卻為所在頁面添加額外信息)

1.加粗：<strong> （表示其中的內(nèi)容十分重視。粗體顯示）

2.強(qiáng)調(diào)：<em> (起強(qiáng)調(diào)作用。斜體顯示）

3.引用：<blockquote> (標(biāo)記占用一整段的較長引用。縮進(jìn)顯示，但應(yīng)該用css來實(shí)現(xiàn)縮進(jìn)） <q> (標(biāo)記占用較短的引用。雙引號(hào)顯示，但I(xiàn)E瀏覽器不支持）

4.縮寫詞：<abbr> 首字母縮寫詞：<acronym>

5.引用：<cite> 可以用來表明引用（書籍、電影、報(bào)告）的來源。瀏覽器顯示為斜體。

6.定義：<dfn> 表示一個(gè)新術(shù)語的定義。有些瀏覽器顯示為斜體，Safari和Chome不改變外觀。

7.設(shè)計(jì)者詳細(xì)信息：<address>包含頁面設(shè)計(jì)者的聯(lián)系詳情（物理地址/電話/電子郵箱）瀏覽器顯示為斜體。

8.內(nèi)容的修改：<ins>用來顯示已經(jīng)插入到文檔中的內(nèi)容（下劃線顯示） <del>用來顯示已經(jīng)從文檔中刪除的文本（刪除線顯示） <s>用來表示不準(zhǔn)確或者不相關(guān)卻不應(yīng)刪除的內(nèi)容（穿過的線條顯示）

三：列表、鏈接、圖像、表格、表單、其他標(biāo)記

1——列表

1.1有序列表：<Ol>創(chuàng)建有序列表（type屬性定義編號(hào)類型——數(shù)字、字母、羅馬數(shù)字）（不過應(yīng)該利用CSS中的list-style-type屬性）。<li>列表的每一個(gè)項(xiàng)目（瀏覽器默認(rèn)縮進(jìn)顯示）

1.2無序列表：<ul>創(chuàng)建無序列表。<li>列表的每一個(gè)項(xiàng)目（同上）

1.3定義列表：<dl>創(chuàng)建定義列表，并且通常包含一系列術(shù)語及其定義。 <dt>用來包含被定義的術(shù)語<dd>包含定義 我的本地演示

1.4嵌套列表：可在<li>元素中放入另一個(gè)列表來實(shí)現(xiàn)嵌套列表

2——鏈接

2.1 指向其他網(wǎng)站的鏈接：https://www.google.com">google href的值（是另一個(gè)網(wǎng)站的完整地址--絕對(duì)的URL）設(shè)定了鏈接的目標(biāo)

2.2 指向同一網(wǎng)站其他頁面：<a href="index.html">主頁</a> href的值（是目標(biāo)頁面的相對(duì)地址--相對(duì)URL）

2.3 email鏈接:<a href="mailto:xx@xx.xx">xx</a>

（email鏈接的href值以mailto:開始，接收件人的email地址。單機(jī)會(huì)啟動(dòng)計(jì)算機(jī)的email程序，并自動(dòng)新建一份郵件，并添加收件人地址為鏈接中的地址）

2.4 在新窗口打開鏈接：<a href="xx" target="_blank">xx</a>（一般盡量避免使用，最好注明在新窗口打開）

2.5 鏈接到當(dāng)前頁面的某個(gè)特定位置：首先確定目標(biāo)位置，并利用目標(biāo)位置標(biāo)簽的id屬性值來到達(dá)指定位置，<a href="#top">top</a> （此鏈接以#開頭，加目標(biāo)id值）

2.6鏈接到其他頁面（網(wǎng)站內(nèi)部或者其他網(wǎng)站）的某個(gè)特定位置: http://www.xx.com/#bottom">xx（其他頁面要有相應(yīng)的id）

3——圖像

3.1 <img>：

<img src="images/lz.jpg" height="280" width="340" alt="龍珠" title="七龍珠" align="left">src:圖像資源的位置，通常是站內(nèi)某個(gè)圖像的相對(duì)URL；alt：當(dāng)無法查看圖像時(shí)的說明文本

title：附加信息，當(dāng)鼠標(biāo)懸停在圖像上時(shí)顯示；

align:舊代碼，圖像的水平對(duì)齊。h5不在支持這一特性。表面頁面的其他部分怎樣環(huán)繞在圖像周圍。left，將圖像左邊對(duì)齊，文本環(huán)繞在圖像的右邊。right反之。

align:舊代碼，圖像的垂直對(duì)齊。h5不在支持這一特性。top，將周圍文本第一行與圖片頂端對(duì)齊。middle，文本第一行與圖片中間對(duì)齊。bottom，文本第一行與圖片底端對(duì)齊。

3.2 HTML5圖形和圖形說明：

<figure> <img src="images/11.jpg"> <figcaption> 耶！</figcaption> </figure>圖像往往帶有說明。HTML5引入新的<figure>元素包含圖像以及圖像的說明，并且這兩項(xiàng)時(shí)相關(guān)聯(lián)的。<figcaption>圖像說明（只要說明相同，就可以在figure添加多個(gè)圖片）

4——表格

4.1 表格基本結(jié)構(gòu)：<table>創(chuàng)建表格；<tr>行；<td>列。

4.2 表格的標(biāo)題<th>:同<td>用法?？捎胹cope特性值row行標(biāo)題col列標(biāo)題（粗體顯示）

4.3 跨列<colspan>，跨行<rowspan>

4.4 長表格：表格的標(biāo)題應(yīng)放在<thead>中；表格主體<tbody>；表格腳注<tfoot>。

4.5 舊代碼，寬度和間隔：width特性：表格寬度或某個(gè)單元格寬度；<table>的 cellpadding特性：每個(gè)單元格增加內(nèi)邊距

4.6 舊代碼，邊框和背景：border特性：table或td的邊框；bgcolor特性：表格或單元格 背景顏色

5——表單

5.1 表單結(jié)構(gòu)：<form action="xxx" method="post"></form>

action特性：服務(wù)器上的一個(gè)頁面URL，接收表單信息

method特性：表單的提交有兩種方式——get（短表單，只從web服務(wù)器上檢索數(shù)據(jù)的 情形，不發(fā)送要在數(shù)據(jù)庫中添加和刪除的數(shù)據(jù)）和post（非常長，允許用戶上傳文件，包 含敏感信息如密碼，向數(shù)據(jù)庫中添加和刪除數(shù)據(jù)）；如果不使用method默認(rèn)時(shí)get方式發(fā) 送

id特性：在頁面上眾多元素中對(duì)表單唯一性標(biāo)識(shí)

5.2 <input>：<input>元素創(chuàng)建不同的表單，type特性值決定了控件。name特性對(duì)表單控件進(jìn)行標(biāo)識(shí)并與輸入的信息一同發(fā)送到服務(wù)器

5.2.1 單行文本框：type="text"；size是舊特性（指定文本框的寬度）；maxlength 限制在文本區(qū)輸入的字符的數(shù)量

5.2.2 密碼框：type="password"；size；maxlength；

5.2.3 單選按鈕：type="radio"；name；value（選中時(shí)發(fā)送到服務(wù)器的值）； checked：選中的值

5.2.4 復(fù)選框 ：type="checkbox"；name；value；checked；

5.2.5 文本上傳域：type="file"；

5.2.6 提交按鈕：type="submit"；name；value；

5.2.7 圖像按鈕：type="image"；src；alt；width；height；

5.2.8 隱藏控件：type="hidden" ；不顯示；

5.3 多行文本框：<textarea></textarea> 舊代碼：cols特性指文本域?qū)挾?；rows行數(shù)

5.4 下拉選擇框：<select>創(chuàng)建下拉列表框，里面包含多個(gè)<option>（value；select）

多選列表框：給<select>添加size（一次性展示的數(shù)量）特性將下拉選擇變成能顯示多 個(gè)選項(xiàng)的列表框；再添加multiple="multiple"特性允許選擇多個(gè)選項(xiàng)。
5.5 按鈕：<button>；更好的顯示，允許其他元素出現(xiàn)在<button>元素內(nèi)（文本/圖像）。

5.6 <label>：表單控件的文本最好用<label>；for：標(biāo)簽控件標(biāo)注哪一個(gè)id表單控件5.7 組合表單元素：<fieldest>將相關(guān)的表單放在其中分成一組；<legend>在其中第一行包含一個(gè)標(biāo)題。5.8 html5表單驗(yàn)證：一般通過js驗(yàn)證；可給<input>加required特性使此控件自動(dòng)驗(yàn)證；

5.8 html5日期控件：type="data"；日期輸入控件。

5.9 html5郵件和URL：type="email"；URL輸入控件：type="url"

5.10 搜索輸入控件：type="search"；placeholder特性，單擊搜索框前，框內(nèi)淡顯文本

四：其他標(biāo)記

1. DOCTYPE（文檔類型）：html存在多個(gè)版本，每個(gè)網(wǎng)頁的開頭都用一個(gè)DOCTYPE聲明，告訴瀏覽器此頁面使用了那個(gè)版本。

2. 注釋 <!-- -->

3. id特性：對(duì)元素的唯一標(biāo)識(shí)（字母或下劃線開頭）；

4. class特性：類別；一個(gè)元素可以屬于多個(gè)類別，用空格將類名隔開

5. 塊級(jí)元素：瀏覽器顯示另起一行的元素；如：<h1> <p> <ul> <li>......

6. 內(nèi)聯(lián)元素：顯示出現(xiàn)在他臨近元素一行內(nèi)的元素；<a> <b> <em> <img>

7. <div>：將一組元素集中到一個(gè)塊級(jí)元素中

8. <span>：將一組元素集中到一個(gè)內(nèi)聯(lián)元素中；在沒有其他元素適合的情況下包含一段文 本并與周圍文本區(qū)別開來；包含若干個(gè)內(nèi)聯(lián)元素。

9. 內(nèi)聯(lián)框架（inline frame）：<iframe>：頁面里分割的小窗口，包含另一個(gè)網(wǎng)頁；

src特性：想要顯示頁面的URL；height；width；

scrolling：（H5不再支持）是否顯示滾動(dòng)條yes：顯示，no隱藏，auto：根據(jù)需要顯示

frameborder：（H5不再支持）是否顯示框架邊框，0：不顯示，1：顯示

seamless：（H5新特性）應(yīng)用在不希望出現(xiàn)在滾動(dòng)條

10. 頁面信息：<meta>位于<head>中，包含所在頁面的相關(guān)信息；

常用的特性：name，content通常一起出現(xiàn)：name是你想要設(shè)置的屬性名，content是對(duì)應(yīng)的值；name可以任意指定，但常用的有：

description：用語包含一段有關(guān)頁面的描述信息。通常被搜索引擎用來了解內(nèi)容，最多155個(gè)字符。有時(shí)會(huì)顯示在搜索引擎的檢索結(jié)果中；

keyword：包含一組以逗號(hào) 分隔的關(guān)鍵詞列表（事實(shí)上已經(jīng)沒有明顯作用了）

robots：

ps：

11. 轉(zhuǎn)義字符：有些字符用于編寫HTML代碼并作為HTML的保留字符（< 和 >）要顯示這些字符時(shí)，需要使用轉(zhuǎn)義字符：<：&lt； >：&gt； &：&amp； "：&quot等（查）

五：Flash、視頻、音頻

1.Flash：

2.HTML5向網(wǎng)頁中添加視頻：<video src（視頻路徑）poster（加載視頻之前指定顯示在播放器的圖片） width（寬度） height（高度）controls（不需要值，表示瀏覽器需要提供默認(rèn)的播放控件） autoplay（不需要值，自動(dòng)播放視頻） loop（不需要值，播放完重新播放） preload（告訴瀏覽器頁面加載時(shí)做什么，有三個(gè)值：none（在用戶按下播放前，瀏覽器不必加載視頻）auto（瀏覽器在頁面加載時(shí)加載視頻）metadata（瀏覽器只需要收集少量視頻信息，如大小，首幀圖像，播放列表，持續(xù)時(shí)間））>

3.HTML5多個(gè)視頻源：

4.結(jié)合

5.HTML5音頻：