HTML介紹以及常用代碼總結(jié)

發(fā)布時間：2023-11-20 12:11:05 作者：小慌寫代碼

我要評論

這篇文章詳細(xì)的為大家介紹了HTML以及總結(jié)了HTML常用標(biāo)簽，包括標(biāo)題、段落、圖片、鏈接、列表、表格、表單等,通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下

HTML

網(wǎng)頁基礎(chǔ)

html(Hyper Text Markup Language)超文本標(biāo) 記語言，發(fā)明者: Tim Berners-lee
html主要是定義網(wǎng)頁內(nèi)容和結(jié)構(gòu)的。html是編寫網(wǎng)頁的語言。
html只能運行在瀏覽器上面
網(wǎng)頁的技術(shù)包含: html(編寫網(wǎng)頁結(jié)構(gòu)，類似人的骨架)，css(層疊樣式表，編寫網(wǎng)頁的樣式，類似人的皮膚)，JavaScript(編寫網(wǎng)頁的特效和交互功能，類似人的技能(動作)).
常用瀏覽器是谷歌瀏覽器，火狐瀏覽器。推薦谷歌瀏覽器。
打開瀏覽器,F12或者右鍵-》檢查可以打開開發(fā) 工具(dev tool)

在這里插入圖片描述

通過網(wǎng)頁顯示區(qū)域查詢對應(yīng)的html代碼

通過html代碼查看網(wǎng)頁

在這里插入圖片描述

通過computed查看元素的具體邊距

在這里插入圖片描述

網(wǎng)站的基本目錄結(jié)構(gòu):新建一個網(wǎng)站文件夾->里面再去創(chuàng)建css，js，imgs目錄和編寫網(wǎng)頁文件。
w3chool: https://www.w3school.com.cn/ tags/tag_wbr.asp .可以查詢所有html標(biāo)簽以及屬性和用法?？梢宰鳛閔tml的參考手冊。

創(chuàng)建一個網(wǎng)頁

創(chuàng)建一個.html的文件，就是一個網(wǎng)頁文件。右鍵->創(chuàng)建文本文檔->把后綴名改為.html

在這里插入圖片描述

右鍵->記事本打開該文件

. <!DOCTYPE html> 聲明html5.0的版本

<head></head> 網(wǎng)頁的頭部(可以理解像人的頭部一樣 )

<body>hello html!</body> 網(wǎng)頁的可視區(qū)域(像人的身體，穿的衣服，其他人可以看見的)</html> 網(wǎng)頁結(jié)束

html的標(biāo)記需要寫在<>直接，在<>里面的叫標(biāo)記(標(biāo)簽)，帶有/叫結(jié)束標(biāo)簽(叫html結(jié)束標(biāo)簽) ，沒有/的是開始標(biāo)簽。
html是由很多的不同功能的標(biāo)簽組成。開始和結(jié)束標(biāo)簽直接可以包裹其他標(biāo)簽
編寫完代碼，一定要ctrl+s保存代碼
國內(nèi)大部分瀏覽器默認(rèn)是utf-8顯示，但是部分瀏覽器可能不一定是默認(rèn)用utf-8編碼顯示。而記事本默認(rèn)保存是utf-8，如果網(wǎng)頁不用utf-8編碼顯示，則會出現(xiàn)亂碼。

在這里插入圖片描述

HTML常用術(shù)語

標(biāo)簽: 標(biāo)簽是html語言的基本單位由<>里面加英文單詞組成。
閉合標(biāo)簽: 由開始標(biāo)簽<標(biāo)簽名>和結(jié)束標(biāo) 簽，成對出現(xiàn)，html的大部分標(biāo)簽都是閉合標(biāo)簽。
自閉合標(biāo)簽: 開始和/結(jié)束在一個<>,html4的版本可以不加/，html5的規(guī)范是要加/。（常見的有: meta,hr,link,br,input,img）
嵌套: html的閉合標(biāo)簽可以嵌套，可以無窮的嵌套下去，像一顆樹一樣，有無數(shù)的分支，這種結(jié)構(gòu)叫樹狀結(jié)構(gòu)。為了表示這種結(jié)構(gòu)，一般一個標(biāo)簽單獨占一行，需要用縮進(jìn)(Tab鍵 8個換行符) 表示層級結(jié)構(gòu)。
屬性: 標(biāo)簽名空格后面的單詞，一般有=，也可能沒有等號，不同的屬性，可以讓標(biāo)簽有不同的顯示效果或者功能。
全局屬性: 大部分html標(biāo)簽都能使用——》title 屬性:鼠標(biāo)移到標(biāo)簽上會顯示提示內(nèi)容如：

<h2 title="hello h2">h2標(biāo)題</h2>

私有屬性: 標(biāo)簽特有的屬性
元素: 開始標(biāo)簽和結(jié)束標(biāo)簽包裹的內(nèi)容，包含開始和結(jié)束標(biāo)簽。
元素內(nèi)容: 開始標(biāo)簽和結(jié)束標(biāo)簽包裹的內(nèi)容

在這里插入圖片描述

塊級元素:獨占一行的元素，即使內(nèi)容沒有撐滿網(wǎng)頁寬度，也會獨占整行。——》h1-h6,p,blockquote
行內(nèi)元素(內(nèi)聯(lián)元素): 不會獨占一行，尺寸是自動計算，隨內(nèi)容的寬高——》span,strong,i,em,b,cite，q，code,mark
html換行規(guī)則： html有一套自己的處理規(guī)則，標(biāo)簽內(nèi)容開始和結(jié)束的空格和換行會被忽略，內(nèi) 容之間的空格和換行會被處理為1個空格。

HTML常用文本標(biāo)簽

html標(biāo)記語言是由很多的標(biāo)簽組成，不同的標(biāo)簽有不同的樣式和功能。

<h1>h1</h1>

h1-h6標(biāo)題標(biāo)簽，字體依次由大到小，字體有加粗的效果。

align屬性:設(shè)置文本對齊方式,屬性值有l(wèi)eft, center,right。默認(rèn)左對齊，可以不寫。

在這里插入圖片描述

<p></p>： p標(biāo)簽，段落標(biāo)簽，p標(biāo)簽上下自帶16px外邊距

<hr />: 顯示一根橫線

<span></span> 沒有任何默認(rèn)樣式，主要是給css樣式使用

<br />： 換行標(biāo)簽，br后面的內(nèi)容換行顯示，沒有邊距。

<b></b> b標(biāo)簽包裹的文本會加粗顯示，沒有任何的語義。html4的版本標(biāo)簽

<strong></strong> 有強(qiáng)調(diào)的語義，包裹的文本會加粗顯示。html5版本新加的標(biāo)簽

<i></i> 沒有任何語義，單純的斜體。html4的標(biāo)簽

<em></em>有強(qiáng)調(diào)的語義，包裹的文本顯示為斜體。h5增加。

<sup>2</sup>:上標(biāo)，包裹文本顯示偏上顯示

<sub>2</sub> 下標(biāo)，包裹文本偏小顯示

<blockquote></blockquote> 表示引用的一段話(如名人名言)，有默認(rèn)的外邊距

<cite></cite>引用的內(nèi)容出自某處或某人

<q></q>表示引用，內(nèi)容用""包裹

<code></code>表示內(nèi)容是一段代碼，顯示為等寬字體樣式

<code></code>表示內(nèi)容是一段代碼，顯示為等寬字體樣式

<mark></mark>標(biāo)記一段內(nèi)容，背景顯示為黃色

<pre></pre> 可以保留換行和空格符號，但是不好控制網(wǎng)頁顯示效果，一般沒有特殊需求不用。

&ensp; 半角符號，一個英文字母的寬度，半個中文字符的寬度

&emsp; 全角符號，2個字母的寬度，1個中文字符的寬度

<small></small> 比標(biāo)題內(nèi)容小一號字體，默認(rèn)效果在h標(biāo)簽里生效。h5新加

<time></time> 表示一個時間，日期的文本用該標(biāo)簽包裹 ——》datetime屬性:可選，可以設(shè)置具體的日期方便搜 索引擎抓取。

<data value="100">100元</data>用于數(shù)據(jù)文本 ——》value屬性：可選，可以設(shè)置一個值，方便搜索引擎抓 取

<address></address> 用于地址文本，默認(rèn)斜體

<del>190.00</del>表示刪除的內(nèi)容，文本會有一個橫線

<ins>7.9折</ins> 表示插入的內(nèi)容，文本會有下劃線

<abbr title="">HTML</abbr> 用于專業(yè)術(shù)語文本 ——》title 屬性的內(nèi)容可以作為對術(shù)語的解釋

<!-- 我是注釋內(nèi)容 --> 注釋內(nèi)容是瀏覽器不會渲染處界面，主要是給編程人員看的。vscode里面的注釋快捷鍵是ctrl+/

vscode編輯器

下載地址: http://vscode.bianjiqi.net/

安裝漢化包

在這里插入圖片描述

常用插件

HTML Snippets 對html代碼進(jìn)行提示

Auto Rename Tag 自動閉合標(biāo)簽，同步修改標(biāo)簽

HTML CSS Support 智能提示css類名和id名稱

open in browser 當(dāng)前的html文件可以用瀏覽器打開

Live Server 創(chuàng)建一個本地服務(wù)器打開文件

shift+! 選擇第一個，可以快速生成網(wǎng)頁的基本結(jié) 構(gòu)

網(wǎng)頁的布局元素(塊級元素)

<div></div>默認(rèn)有人樣式和語義，表示一個塊級區(qū)域，是主要的網(wǎng)頁布局區(qū)域。

<header></header>表示網(wǎng)頁的頭部或者文章頭部，可以用在不同的場景，如在文章里面，表示文章的頭部，一個網(wǎng)頁有多個header。一般還是表示網(wǎng)頁的頭部居多。

<main></main>表示網(wǎng)頁的主題內(nèi)容，一個網(wǎng)頁只有一個main

<section></section>主要表示一個獨立主題，可以取代div元素。

<aside></aside>可以表示網(wǎng)頁的側(cè)邊欄，如果是在文件級別，表示文章的評論。

<article></article>表示一篇文章或者帖子，里面可以包含header，footer，section，aside等元素

<footer></footer>表示底部區(qū)域，可以表示網(wǎng)頁的底部或者文章的底部。

<nav></nav>導(dǎo)航元素，表示導(dǎo)航模塊，一般網(wǎng)頁只有一個nav

html標(biāo)簽嵌套規(guī)則:1. 布局元素可以嵌套任意元素 2. 塊級元素可以嵌套行內(nèi)元素 3. 行內(nèi)元素不能嵌套塊級元素 4. p標(biāo)簽不能嵌套其他的塊級元素

其他常用標(biāo)簽

a超鏈接標(biāo)簽：

<a  target="_self">到百度</a> 該標(biāo)簽可以點擊跳轉(zhuǎn)到一個網(wǎng)址

屬性

1.href是跳轉(zhuǎn)網(wǎng)頁的地址:

href=“tel:13111111111” tel協(xié)議可以創(chuàng)建電話鏈接，在手機(jī)瀏覽器上，用戶點擊可以喚起電話進(jìn)行撥號。href=“mailto:contact@163.com”：使用mailto 協(xié)議，點擊后，瀏覽器會打開本機(jī)默認(rèn)的郵件程序，讓用戶向指定的郵件地址發(fā)送郵件錨點: 可以給html標(biāo)簽指定一個id屬性，然后通過 href="#id"跳轉(zhuǎn)到指定位置,#表示id

? 例如

<a href="#fyp">生活</a>
<h3 id="fyp">很好</h3>

下載文件:如果href是一個文件地址，可以下載該文件。

target是跳轉(zhuǎn)網(wǎng)頁打開的方式，屬性值默認(rèn)是_self當(dāng)前窗口打開，-blank是新開一個窗口打開。

ping：點擊a標(biāo)簽，可以像ping指定的地址發(fā)送一個post請求，主要用于跟蹤用戶的行為。

圖片標(biāo)簽:

<img src="./imgs/shop_33.jpg" alt="" height="50" loading="lazy" />

屬性

src 屬性是圖片地址，可以是本地圖片地址或者網(wǎng)絡(luò)圖片地址
alt 屬性設(shè)定圖片的文字說明。當(dāng)圖片不顯示的時候會顯示alt屬性的內(nèi)容。
width設(shè)置圖片的寬度，height設(shè)置圖片的高度。如果只設(shè)置其中一個，另外一個是自動計算。單位是px
loading 屬性設(shè)置圖片加載行為,有3個屬性值，默認(rèn)為auto，等于不使用loading屬性。lazy，啟用懶加載(圖片出現(xiàn)在可視區(qū)域才加載圖片)，eager，立即加載圖片，不會管圖片是否出現(xiàn)在可視區(qū) 域。 figure圖像區(qū)域元素

<figure>
 <img src="F" />
 <figcaption>大橋圖片</figcaption>
 </figure>
 figure 表示一個圖像區(qū)域，可以將圖像和相關(guān)的
信息包裹起來。
 figcaption對圖片的描述,可以做圖片的標(biāo)題。

列表

ol 有序列表

<ol type="1" start="5">
 <li>一年級1班</li>
 <li>一年級2板</li>
 ...
 </ol>

有序列表，每一列前面都有一個數(shù)字。

屬性

type 屬性

屬性值設(shè)置列前面的數(shù)字類型:

1 阿拉伯?dāng)?shù)字(默認(rèn)值)。

a 小寫字母排序

A 大寫字母排序

i 小寫羅馬數(shù)字排序

I 大寫羅馬數(shù)字排序

reversed倒序排列
start 設(shè)置數(shù)字起始值

ul 無序列表

<ul type="square">
 <li>一年級1班</li>
 ...
 </ul>

無序列表，沒有序號，每一列前面有一個符號

type 屬性設(shè)置列表每一列的符號：disc 實心圓(默認(rèn)值)，cirlce空心圓,square矩形?？梢宰?網(wǎng)頁的布局元素。

dl 自定義列表

<dl>
 <dt>web前端</dt>
 <dd>網(wǎng)頁前臺</dd>
 </dl>

dl 列表，dl里面可以有多組dt，dd的組合。

dt表示一個術(shù)語 dd是對術(shù)語的解釋

iframe 網(wǎng)頁容器

<iframe src="https://player.youku.com/
embed/XNTg2MzEyMjY2NA=="
frameborder="0"  allowfullscreen>
</iframe>

iframe 網(wǎng)頁容器，可以在一個區(qū)域顯示其他網(wǎng)頁以及網(wǎng)頁內(nèi)容src屬性設(shè)置顯示網(wǎng)頁的地址width 設(shè)置iframe的寬度，height 設(shè)置iframe 的高度frameborder 設(shè)置邊框的尺allowfullscreen 點擊全屏按鈕，可以全屏顯示多媒體標(biāo)簽

video: 可以播放視頻

<video
 src="./media/test.mp4"
 controls
 autoplay
 muted
 loop
 height="300"
 poster="./imgs/shop_33.jpg"
 preload="auto"
 </video>

src是視頻地址，可以是本地地址或者網(wǎng)絡(luò)地址controls 播放器的控制條autoplay 自動播放(chrome瀏覽器需要設(shè)置 muted)muted 靜音loop 循環(huán)播放width 設(shè)置寬度，height設(shè)置高度,一般設(shè)置一個，讓另外一個尺寸自動計算poster 視頻封面圖片，可以是網(wǎng)絡(luò)圖片，也可以是本地圖片preload 視頻緩存屬性值:auto(默認(rèn)值)緩沖整個視頻，none不緩沖，metadata緩沖視頻文文件的元數(shù)據(jù),一般不設(shè)置，保持默認(rèn)。

<video controls autoplay muted>
 <source src="./media/test.webm" type="
video/webm">
 <source src="./media/test.mp4" type="
video/mp4">
 </video>

為了兼容不同瀏覽器播放視頻文件的格式，用 source元素直到找到能播放的視頻文件為止

表格

html符號輸入:

可以用搜狗輸入法輸入特殊符號

通過html符號源代碼顯示符號(推薦方法)

table表格

table 表示一個表格

屬性:

border表格邊框的寬度 width 設(shè)置表格的寬度
cellspacing 單元格與單元格之間的空白
cellpadding 單元格與內(nèi)容直接的間距(空白)，也叫內(nèi)邊距.
align 表格對齊方式, left 左對齊，center居中對齊，right右對齊
bgcolor背景圖片網(wǎng)頁布局用

tr 表示一行

th 表頭單元格-默認(rèn)字體加粗，水平居中

td 標(biāo)準(zhǔn)單元格，主要顯示數(shù)據(jù)(顯示內(nèi)容放在td元素里面)

colspan 跨列合并單元格，合并了單元格以后，后面多余的單元格需要刪除。
rowspan 跨行合并單元格，合并后面行的單元格，合并后多余的單元格需要刪除。
bgcolor單元格背景顏色: 屬性值: 1.顏色名稱(red紅色,gray灰色等) 2.顏色16進(jìn)制代碼(#000000黑色，#ffffff白色) 3. rga模式: 如rga(204,97,70)
cellpadding 單元格與內(nèi)容直接的間距(空白)，也叫內(nèi)邊距.
align 單元格文本水平對齊方式,left左對齊(默認(rèn)), center(居中),right(居右)
valign 單元格文本垂直對齊方式，top 頂部對齊，middle 居中，bottom底部對

caption 表格的標(biāo)題

thead 表格的頭部(沒有頭部，可以不寫，如果寫了thead必須要有tbody和tfoot),表格頭部的單元格一般用th表頭元素

tbody 表格的身體部分

tfoot 表格的底部

form表單

url: 統(tǒng)一資源定位符，也叫網(wǎng)址

在這里插入圖片描述

協(xié)議: 瀏覽器請求服務(wù)器資源的方法:

? http 協(xié)議，默認(rèn)80端口，可以省略。數(shù)據(jù)以明文的方式傳輸，數(shù)據(jù)容易被劫持。

? https 協(xié)議, http協(xié)議基礎(chǔ)上增加了ssl證書(有公鑰和一個秘鑰)，對網(wǎng)頁傳輸數(shù)據(jù)加密。默認(rèn)端口 443，可省略。

host主機(jī): 網(wǎng)站服務(wù)器的ip地址或者域名。
端口: 計算機(jī)的每個應(yīng)用程序都有獨立的端口
路徑: 資源在網(wǎng)站的位置。
查詢參數(shù): 提供給服務(wù)器的額外信息，主要是前端傳輸給后端的數(shù)據(jù)

**form表單:**標(biāo)簽包含很多表單控件，表單控件可以允許用戶輸入輸入數(shù)據(jù)并通過form標(biāo)簽傳遞這些數(shù)據(jù)到后端。(表單控件都有一個name屬性，通過name屬性可以把表單控件輸入的數(shù)據(jù)通過查詢參數(shù)傳遞到后端。)

屬性:

action 數(shù)據(jù)傳輸?shù)牡刂?/li>
method 發(fā)送數(shù)據(jù)的方法 :

? 值: get請求(默認(rèn))數(shù)據(jù)以查詢參數(shù)的方式傳遞。優(yōu)點:數(shù)據(jù)傳輸比較快，缺點: 直接能在網(wǎng)址看見數(shù)據(jù)，傳輸數(shù)據(jù)大小有限制，只能傳遞字符串。如果是get請求可以不寫method屬性

? post請求,數(shù)據(jù)通過請求體傳遞，在網(wǎng)址后面看不見數(shù)據(jù)。缺點: 數(shù)據(jù)傳輸沒get快，缺點: 數(shù)據(jù)在請求體相對安全，傳輸數(shù)據(jù)幾乎沒有顯示，可以傳遞各種數(shù)據(jù)。

enctype指定post請求，瀏覽器傳遞數(shù)據(jù)的MIME類型（后端根據(jù)不同的mime類型取值方式不一樣）

input 輸入框標(biāo)簽，自閉合標(biāo)簽

屬性

maxlength 最大輸入字符，超過則不能輸入
placeholder 輸入內(nèi)容為空的時候，顯示的提示文字
readonly 輸入框是只讀，只能看，不能輸入，元素可以選擇。
disabled 禁用，元素是灰色，不能選擇。
value 元素的顯示值(內(nèi)容)
pattern 可以輸入一個正則表達(dá)式，輸入框不滿足正則表達(dá)式會有提示
checked 設(shè)置單選框或多選框的默認(rèn)選項
required 必填屬性，如果輸入框沒有輸入值，提交的時候會有提示信息。
type 決定input標(biāo)簽的形式。不同的值顯示為不同的形式

type屬性值:

text(默認(rèn)) 文本輸入
password 數(shù)據(jù)以密文方式顯示
number 數(shù)字輸入框，只能輸入數(shù)字，數(shù)字輸入框?qū)傩?--->通常搭配以下屬性 : min 最小值, max 最大值，step是右邊按鈕遞增步長(3個屬性右邊按鈕才有效)
search 用于搜索輸入框,輸入內(nèi)容后，右邊有一個清除圖標(biāo)。
radio 單選按鈕，必須要設(shè)置value值，是單選選中的值，name屬性必須一致，才能實現(xiàn)單選。
checkbox 多選框，必須設(shè)置value值，是多選選中的值，name屬性必須設(shè)置一致。
email 郵箱輸入框，如果輸入的不是郵箱格式，會有提示。
tel 電話號碼輸入框，需要配合patten屬性設(shè)置正則
url 網(wǎng)址，輸入的不是網(wǎng)址會有提示
color 可以選擇顏色
range 滑塊，可以指定范圍里面滑動選擇值—>搭配min最小值，max最大值，step每次滑動的步長( 默認(rèn)是1)屬性
hidden 輸入框是隱藏狀態(tài)，網(wǎng)頁上看不見。
date 日期選擇,time時間選擇,month 月，week 周，datetime-local 年月日時—>搭配min 可選最小日期，max 可選的最大日期， value 選中的日期屬性
button 顯示為普通按鈕，沒有任何的功能
submit 提交按鈕，點擊可以把數(shù)據(jù)通過name傳遞到后端
reset 重置,把form表單控制的值還原為初始值
file 文件上傳，form表單必須設(shè)置enctype=" multipart/form-data"

? fieldset標(biāo)簽

fieldset 標(biāo)簽是一個塊級容器，表示表單件的集合   legend設(shè)置fieldset控件的標(biāo)題，通常在fieldset的第一個元素，會嵌入到fieldset上角。
語法：<form>
   <fieldset disabled>
   <legend>個人信息</legend>
   </fieldset>
   </form>

disabled 屬性，可以讓包裹的表單控件都是灰色不可用

lable標(biāo)簽

lable表單控件的文字說明，一般用預(yù)form表單里面

for 屬性可以關(guān)聯(lián)一個表單控件，值是表單的控件的id屬性值。

<input type="checkbox" value="test" id="c" >
<label for="c">未知</label>

可以把表單控件放入label標(biāo)簽里面，自動關(guān)
聯(lián)。
<label>
<input type="radio" value="man"name="sex">男</label>

button按鈕

屬性：

type 按鈕的類型: submit(提交form表單數(shù)據(jù)), reset重置(重置表單數(shù)據(jù)為初始狀態(tài)), button 普通按鈕，沒有任何行為。——》button標(biāo)簽可以用在 form標(biāo)簽外面。會具有submit屬性，可以提交

disabled 按鈕禁用
name 按鈕名稱，提交數(shù)據(jù)的時候，以name= value的形式提交(要配合value)
value 按鈕的值
form 按鈕關(guān)聯(lián)的form表單，值是form表單的id 屬性。如果省略，默認(rèn)關(guān)聯(lián)在父表單

<form id="form1"></form>
 <button form="form1" value="test">提交</button>

select下拉菜單

生成一個下拉菜單,需要配合option標(biāo)簽設(shè)置選項

<select name="province" require   dmultiple  size="8">
 <optgroup label="南">
 <option value="sc">四川</option>
 <option value="gd" selected>廣東</option>
 </optgroup>
 <optgroup label="北" disabled>
 <option value="sc">四川</option>
 </optgroup>
 </select>

屬性

1.select——》 name 表單名稱，數(shù)據(jù)以name=value方式傳到后端(value是選中option的vlaue值)

disabled 表單不能選擇

required 必填

multiple 可以選中多個選項(需要按ctrl多選) size 設(shè)置了multiple，可以設(shè)置一次可見的行數(shù)。

2.option設(shè)置下拉菜單的一個選項。——》value 選擇的值 selected 設(shè)置默認(rèn)選中項

3.<optgroup label="南>對option進(jìn)行分組——》label是分組名稱，分組不能選擇。 disabled 設(shè)置后，分組下面的所有option都不能選擇。

datalist容器

<datalist id="data">
 <option value="a" label="A11">
 <option value="b" label="B11">
 <option value="c" label="C11">
 </datalist>

datalist 是一個容器標(biāo)簽，可以為指定控件提供一組數(shù)據(jù)，通常用于input輸入框的輸入提示。 id屬性用于input輸入控件關(guān)聯(lián)，input的list屬性可以關(guān)聯(lián)datalist容器
option 設(shè)置每一個選項。value是選項值，label 是值的說明，Chrome瀏覽器顯示在value的下一行。

textarea多行文本輸入框

textarea 多行文本輸入框,默認(rèn)可以推拽修改其大小。包裹的內(nèi)容是value值
placeholder 提示文本。
rows 文本框的高度，單位是行
cols 文本框的寬度，單位是字符
disabled 禁止輸入
maxlength 最大輸入字符
minlength 最小輸入字符
required 必填

output

10+10<output name="result">20</output> 表示一個
用戶的操作結(jié)果。

progress

<progress max="100" value="50">50%</progress>s 行內(nèi)元素，表示任務(wù)的完成進(jìn)度，一般顯示為進(jìn)度條樣式。

max 進(jìn)度條的最大值，默認(rèn)是1
value 0-max之間的一個數(shù)，表示當(dāng)前的進(jìn)度。

meter 指示器

<meter title="455" min="100"
max="500" value="455" low="150" high="350"></meter>

meter 指示器，顯示已知范圍內(nèi)的一個值， value 在low和high顯示綠色，其他區(qū)域顯示橘色。

min 范圍的最小值
max 范圍的最大值
value 當(dāng)前值
low 較低的閥值(大于min)
high 較高的閥值(小于max)

details折疊標(biāo)簽

details 折疊標(biāo)簽，瀏覽器默認(rèn)會折疊標(biāo)簽包裹內(nèi)容，點擊才能展開查看內(nèi)容

設(shè)置折疊標(biāo)題

<details>
 <summary>折疊標(biāo)題</summary>
 <ul>
 <li>test1</li>
 </ul>
 </details>

常用html標(biāo)簽

塊級標(biāo)簽(元素) div,p,form,ul,h1-h6,dl,header,nav,section,aside,main,article,footer
行內(nèi)標(biāo)簽(元素) span,em,strong,input(text,password,radio, checkbox,file),button,select,label顯示為進(jìn)度條樣式。

- max 進(jìn)度條的最大值，默認(rèn)是1 
-  value 0-max之間的一個數(shù)，表示當(dāng)前的進(jìn)度。
**meter 指示器**

meter 指示器，顯示已知范圍內(nèi)的一個值， value 在low和high顯示綠色，其他區(qū)域顯示橘 色。 
- min 范圍的最小值 
- max 范圍的最大值
-  value 當(dāng)前值
-  low 較低的閥值(大于min)
-  high 較高的閥值(小于max)
#### details折疊標(biāo)簽
details 折疊標(biāo)簽，瀏覽器默認(rèn)會折疊標(biāo)簽包裹 內(nèi)容，點擊才能展開查看內(nèi)容  
<summary>設(shè)置折疊標(biāo)題

折疊標(biāo)題

test1

```

常用html標(biāo)簽

塊級標(biāo)簽(元素) div,p,form,ul,h1-h6,dl,header,nav,section,aside,main,article,footer
行內(nèi)標(biāo)簽(元素) span,em,strong,input(text,password,radio, checkbox,file),button,select,label
table

以上就是HTML介紹以及常用代碼總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于HTML介紹及常用代碼的資料請關(guān)注腳本之家其它相關(guān)文章！

Tag：HTML 介紹常用代碼

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

HTML介紹以及常用代碼總結(jié)

HTML

網(wǎng)頁基礎(chǔ)

創(chuàng)建一個網(wǎng)頁

HTML常用術(shù)語

HTML常用文本標(biāo)簽

vscode編輯器

網(wǎng)頁的布局元素(塊級元素)

其他常用標(biāo)簽

表格

form表單

常用html標(biāo)簽

常用html標(biāo)簽

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

HTML介紹以及常用代碼總結(jié)

HTML

網(wǎng)頁基礎(chǔ)

創(chuàng)建一個網(wǎng)頁

HTML常用術(shù)語

HTML常用文本標(biāo)簽

vscode編輯器

網(wǎng)頁的布局元素(塊級元素)

其他常用標(biāo)簽

表格

form表單

常用html標(biāo)簽

常用html標(biāo)簽

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕