html標簽

時間：2023-10-03 13:36:01 | 來源：網(wǎng)站運營

時間：2023-10-03 13:36:01 來源：網(wǎng)站運營

html標簽：

標題標簽

標題，是通過h1-h6六個標簽分別來對六個級別的標題進行定義的

h1定義最大的標題，h6定義最小的標題

h1-h6標簽都是雙標簽，且是容器級標簽

權(quán)重高到低 h1-h6 約定俗成一個頁面放一個h1

段落標簽

段落（paragraph）是通過<p>標簽進行定義的

<p>標簽是雙標簽，且為文本級標簽，內(nèi)部只能放值文本，圖片、表單元素，或者廢棄的<font>標簽等

換行標簽

<br />(breaking) 標簽是html中一個簡單的換行符

<br />標簽是一個但標簽

文本格式化標簽

文本格式話標簽均為雙標簽，且為文本級標簽，內(nèi)部只能書寫文字

圖像標簽

圖像（image）由<img>標簽進行定義

<img>標簽是單標簽，本身相當于一個特殊的文本

<img>標簽的作用是在指定的位置插入一張圖片

在html文件，常用的插入圖片的類型有： jpg、png、gif

屬性：

由于<img>為單標簽，所以它只能通過屬性進行相關(guān)圖像設(shè)置

<img>常用屬性展示：

<img src="xxx.jpg" alt="這是一張微笑照片" title="鼠標懸停時的提示" width="30px" height="30px">

音頻標簽

音頻使用<audio>標簽進行定義

<audio>時雙標簽

同圖片一樣，需要使用src屬性設(shè)置音頻查找的路徑

音頻文件支持的格式包括：mp3、ogg、wav

屬性：

音頻加載后不會自動顯示播放的控制條，需要使用controls屬性進行設(shè)置，屬性值也是controls

<audio src="xx.mp3" controls="controls"></audio>

視頻標簽

視頻的設(shè)置方法與音頻非常類似

視頻使用<video>標簽進行定義

<video>是雙標簽

使用src屬性設(shè)置視頻查找的路徑

視頻文件支持的格式包括：mp4、ogg、webm

屬性：

視頻也需要使用controls屬性設(shè)置控制條，屬性值也是controls

<video src="xx.mp4" controls="controls"></video>

超級鏈接標簽

在html中使用<a>標簽可以創(chuàng)建鏈接

a全稱為anchor，錨的意思

<a>為雙標簽

作用：在指定的位置添加超級鏈接，提供用戶進行點擊和跳轉(zhuǎn)

<a>標簽可以實現(xiàn)兩種跳轉(zhuǎn)：跨頁面跳轉(zhuǎn)、頁面內(nèi)跳轉(zhuǎn)，實現(xiàn)跳轉(zhuǎn)的方式需要用到一些標簽屬性

屬性：

1）href屬性：全稱hypertext reference，超文本引用，用于規(guī)定鏈接的目標地址

屬性值：鏈接目標的路徑地址，可以使用相對路徑或網(wǎng)址形式的絕對路徑

href屬性非常重要，<a>標簽想要實現(xiàn)點擊跳轉(zhuǎn)，必須設(shè)置該屬性，擁有這個屬性<a>標簽在鼠標移上才會顯示一個小手指針狀態(tài)

<a href="https://.....或文件命名">點擊我跳轉(zhuǎn)</a>2）target屬性：可以定義被鏈接的文檔在何處跳轉(zhuǎn)顯示

屬性值有兩種：

_self：默認值，表示跳轉(zhuǎn)的頁面在當前窗口打開，不會打開新的窗口

_blank：空白的，表示跳轉(zhuǎn)的頁面在新窗口打開

<a href="https://.....或文件命名" target="_blank">點擊我跳轉(zhuǎn)</a>3) title屬性：是鼠標懸停時的提示文本，與<img>標簽類似

屬性值：自定義的文字內(nèi)容

該屬性用于給用戶進行提示，該鏈接的功能是什么，提高用戶的體驗

<a href="https://.....或文件命名" target="_blank" title="查看源網(wǎng)頁">點擊我跳轉(zhuǎn)</a>

超級鏈接---設(shè)置錨點標簽

1）頁面內(nèi)錨點跳轉(zhuǎn)

這種方式實現(xiàn)的是從某個位置跳轉(zhuǎn)到同頁面的另一個位置

制作方法分為兩個步驟，分別是設(shè)置錨點，添加鏈接

步驟一：設(shè)置錨點

設(shè)置錨點，也就是設(shè)置跳轉(zhuǎn)目標位置，有兩種設(shè)置方式

&1：在目標位置找到任意一個標簽，給他添加id屬性，id的屬性值必須是唯一的

id的屬性值定義規(guī)則：必須以字母開頭，后面可以有字母、數(shù)字、下劃線和橫線，區(qū)分大小寫

<h2 id="mubiao">目標位置</h2>&2：在目標位置添加一個空的<a>標簽，只設(shè)置一個name屬性，name屬性的設(shè)置方式與id相同，也必須是唯一的

<a name="mubiao"></a>步驟二：添加鏈接

鏈接到錨點，在需要點擊的位置設(shè)置<a>標簽，給a的href屬性設(shè)置屬性值為#id屬性值或者#加a的name屬性值

<a href="#mubiao">點擊我跳轉(zhuǎn)</a>2) 跨頁面錨點跳轉(zhuǎn)

這種跳轉(zhuǎn)方法綜合了跨頁面跳轉(zhuǎn)和錨點跳轉(zhuǎn)

制作方法也為兩個步驟，分別是設(shè)置錨點、添加鏈接

步驟一：設(shè)置錨點

此方式與頁面內(nèi)錨點跳轉(zhuǎn)一致，在目標網(wǎng)頁的指定位置設(shè)置使用id或name屬性

步驟二：添加鏈接

添加超級鏈接時href屬性需要更改，屬性值寫為頁面的路徑#id屬性值

<a hefr="new.html#mubiao">點擊文本</a>

無序列表標簽

無序列表需要兩個標簽參與，分別時<ul>和<li>

ul：unordered list，表示定義一個無序列表的大結(jié)構(gòu)

li：list item，列表項，定義的時無序列表內(nèi)的某一項

<ul>和<li>時嵌套關(guān)系，快捷鍵：ul>li

一個列表中可以有任意個列表項，列表項又是一個容器級可以標放其他的標簽甚至一組ul li組合

<li>沒有順序之分，可以隨意書寫位置

<ul> <li></li> <li></li> <li></li> <li></li></ul>

有序列表標簽

有序列表的語法與無序列表非常類似，只是在語義上又差異

有序列表由兩個標簽組成，分別時<ol>和<li>

ol：ordered list，表示定義個有序的列表的大結(jié)構(gòu)

li：list item，定義的時有序列表的每一項，<ol>和<li>時嵌套關(guān)系，快捷鍵：ol>li

<ol>標簽內(nèi)部可以嵌套任意多個<li>標簽，<li>標簽是一個容器標簽，內(nèi)部可以放任意標簽甚至一組<ol><li>標簽

有順序之分，<li>不能隨意去書寫，會影響位置

<ol> <li></li> <li></li> <li></li> <li></li> </ol>

定義列表標簽

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

由三個標簽組成完整的結(jié)構(gòu)，包含<dl><dt><dd>

dl：definition list，表示定義一個自定義列表的大結(jié)構(gòu)

dt：definition term，表示定義 自定義列表中的一個主題或者術(shù)語

dd：definition description，定義解釋項，表示描述或解釋前面的定義主題

<dl>內(nèi)部只能嵌套<dt>和<dd>，<dt>與<dd>是同級關(guān)系 快捷方式dt+dd

<dt><dd>也是容器級標簽，內(nèi)部可以寫任意標簽

<dl> <dt>主題</dt> <dd>對主題的解釋項</dd></dl>

布局標簽

<div>和<span>標簽常用作布局工具，我們俗稱盒子，后期h5也增加了更多的布局標簽

<div>和<span>都是沒有具體明確的語義的

布局標簽--<div>標簽

div：全稱division，分割，區(qū)域、跨度的意思，俗稱大盒子

<div>是雙標簽，是最經(jīng)典的容器級標簽，內(nèi)部可以放置任意內(nèi)容

作用：多用于劃分網(wǎng)頁區(qū)域，進行結(jié)構(gòu)布局，一般將相關(guān)的內(nèi)容使用<div>包裹起來，整體設(shè)置大的布局效果

布局標簽--<span>標簽

span：小區(qū)域、小跨度的意思，俗稱小盒子

<span>也是雙標簽，容器級標簽

作用：在不改變整體效果的情況下，可以輔助進行局部調(diào)整

表格基礎(chǔ)

創(chuàng)建一個簡單的表格至少有三個標簽組成，分別是<table><tr><td>標簽

table：表格，定義的是整個的表格大結(jié)構(gòu)

tr：table rows，表格的行，定義的是表格由多行行組成

td：table data, 表格數(shù)據(jù)，也叫表格單元格，定義的是每一行內(nèi)部的單元格

三者：的關(guān)系：table>tr>td,一個表格中有多個行，每個行中有多個單元格

屬性：

<table>標簽可以添加border邊框?qū)傩?br>
屬性值：數(shù)字，表示像素值

表格的單元格之間 有默認的空隙，會導致雙線邊框

解決方法：設(shè)置標簽樣式屬性style

屬性值：border-collapse：collapse；表示邊框塌陷

<table border="1" style="border-collapse: collapse;"> <tr> <td>序號</td> <td>姓名</td> <td>班級</td> <td>學號</td> <td>分數(shù)</td> </tr> <tr> <td>1</td> <td>張三</td> <td>二班</td> <td>200080807</td> <td>96</td> </tr></table>

表格---表頭單元格

如果要繪制表頭，使用標簽<th>，table head data，表示單元格

在表格中繪制的時候，替換的是<td>的位置

<th>標簽中自帶默認的css樣式效果，文字顯示粗體居中

表格---分區(qū)標簽

<table>內(nèi)部是直接的子級包含四個分區(qū)標簽，他們都是雙標簽

caption：表格的標題，內(nèi)部書寫標題文字

thead：table head，表格的頭部，內(nèi)部嵌套tr>th

tbody：table body，表格的主體，內(nèi)部嵌套tr>td

tfoot：table foot，表格的頁腳，內(nèi)部嵌套tr>td

四個分區(qū)可以選擇性的進行組合

注意：不論書寫順序如何顛倒，瀏覽器中的加載順序都是自動按照caption、thead、tbody、tfoot執(zhí)行的

<table> <caption>表格標題</caption> <thead> <tr> <th>頭部信息</th> <th>頭部信息</th> <th>頭部信息</th> <th>頭部信息</th> </tr> </thead> <tbody> <tr> <td>表格主體內(nèi)容</td> <td>表格主體內(nèi)容</td> <td>表格主體內(nèi)容</td> <td>表格主體內(nèi)容</td> </tr> </tbody> <tfoot>表格尾部內(nèi)容</tfoot></table>

表單的組成

html表單用于搜集不同類型的用戶輸入，表單元素就是網(wǎng)頁中提供用戶進行輸入或點擊的小控件

在html中，一個完整的表單通常由表單域、提示信息和表單空間（也稱為表單元素）3個部分構(gòu)成

功能：

表單域：相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用的程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法，如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器

提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作

表單控件：包含了具體的表單功能項，如單行文本輸入框，密碼輸入框，復選框，提交按鈕，重置按鈕等

表單域標簽

html表單域使用<form>標簽進行定義

<form>標簽是一個功能性標簽，填寫的表單信息要想正確的提交到后臺服務(wù)器，必須放在一個<form>標簽之內(nèi)

<form>標簽為雙標簽，容器級標簽

屬性：

<form action="xxx.java" method="post/get..." name="區(qū)別信息"> 提示信息及表單控件書寫位置</form>

input標簽

<input>標簽是最重要的一個表單元素，如果需要換行可以使用<br />

<input>標簽為單標簽，本身相當于一個特殊的文本

<input>標簽需要通過標簽屬性實現(xiàn)各種功能

屬性：

屬性radio設(shè)置的時候要要設(shè)置name屬性，屬性值相同，這樣才可以達到單選的效果

屬性checkbox設(shè)置時需要設(shè)置name屬性，來體現(xiàn)他們是一組的

input標簽--文件上傳 file

<input>標簽的type屬性值為file

定義文件上傳按鈕，可以提供用戶選擇本地文件進行上傳服務(wù)器

<input type="file">使用input的multiple屬性，可以決定是否可以選擇多個文件

<input type="file" multiple="multiple">

文本域<textarea>

文本域使用<textarea>標簽定義，制作可以輸入多行文本的區(qū)域

<textarea>標簽為雙標簽，本身相當于一個特殊的文字

文本域可以設(shè)置默認輸入的文字，在雙標簽之間書寫默認文字

屬性：

<textarea>有兩個標簽屬性，可以設(shè)置顯示區(qū)域大小

rows：行，屬性值是數(shù)字，數(shù)字是幾表示文本框顯示的最大行數(shù)，如果超過了行數(shù)，會被隱藏并且出現(xiàn)滾動條

cols：列，屬性值是數(shù)字，數(shù)字是幾，表示在出現(xiàn)滾動條之后，每一行顯示的最大字節(jié)數(shù)（一個漢字按2字節(jié)計算）

<textarea cols="30" rows="10">默認輸入文字</textarea>

下拉菜單標簽

下拉菜單需要至少兩個標簽完成結(jié)構(gòu)：

<select>：選擇，表示定義下拉菜單整體結(jié)構(gòu)。

<option>：選項，表示定義下拉菜單的每一項

兩個標簽都是雙標簽，文本級標簽

關(guān)系：select>option, option可以有任意多項

默認選中項：

默認情況下，選中的是第一項

下拉菜單可以通過給<option>標簽設(shè)置selected屬性，屬性值為selected，更改默認選中項

<select> <option>杭州</option> <option>杭州</option> <option>杭州</option> <!-- 添加默認選中項 --> <option selected="selected">杭州</option></select>分組管理：

下拉菜單中如果選項變得復雜，可以將<option>進行分組管理

可以使用<optgroup>標簽對選項進行分組，<optgroup>是一個雙標簽

關(guān)系：select>optgroup>option

<optgroup>可以設(shè)置一個label屬性，表示給這一組選項添加一個分組標簽名，分組標簽<optgroup>是不能被點擊選擇的

<select> <optgroup label="國內(nèi)"> <option>杭州</option> <option>杭州</option> <option>杭州</option> </optgroup> <optgroup label="國外"> <option>國外1</option> <option>國外2</option> <option>國外3</option> </optgroup></select>

label標簽

所有的表單元素都可以通過綁定其他內(nèi)容去擴大觸發(fā)點擊范圍，這時需要使用一個<label>標簽

綁定方法一：

給表單元素設(shè)置id屬性

然后將需要綁定的其他內(nèi)容用<label>標簽包裹

給<label>標簽設(shè)置for屬性，屬性值為綁定的表單元素的id屬性值

<input type="checkbox" name="hobby" id="sport"><label for="sport">運動</label>綁定方法二：

如果綁定內(nèi)容和表單元素寫在一起，可以化簡綁定寫法

直接使用<label>標簽將綁定內(nèi)容與表單元素一起進行嵌套

<label><input type="radio" name="sex">男</label>

字符實體

具體的字符實體及用法可以參照w3school在線學習

這里給點規(guī)則和建議

規(guī)則：所有的字符實體和實體編號都是以&開頭，以；結(jié)尾的

注意：實體名稱對大小寫敏感

建議1：使用實體名稱，好處時名稱易于記憶，不過壞處是，瀏覽器也許并不支持所有實體名稱(對實體數(shù)字的支持卻很好)

建議2：不需要強制記憶所有的字符實體，只需要記憶常用的幾個字符實體名稱即可，其他可以通過手冊進行查詢