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

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

我要評(píng)論

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

HTML

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

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

在這里插入圖片描述

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

通過(guò)html代碼查看網(wǎng)頁(yè)

在這里插入圖片描述

通過(guò)computed查看元素的具體邊距

在這里插入圖片描述

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

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

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

在這里插入圖片描述

右鍵->記事本打開(kāi)該文件

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

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

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

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

在這里插入圖片描述

HTML常用術(shù)語(yǔ)

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

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

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

在這里插入圖片描述

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

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

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

<h1>h1</h1>

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

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

在這里插入圖片描述

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

<hr />: 顯示一根橫線

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

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

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

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

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

<em></em>有強(qiáng)調(diào)的語(yǔ)義，包裹的文本顯示為斜體。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> 可以保留換行和空格符號(hào)，但是不好控制網(wǎng)頁(yè)顯示效果，一般沒(méi)有特殊需求不用。

&ensp; 半角符號(hào)，一個(gè)英文字母的寬度，半個(gè)中文字符的寬度

&emsp; 全角符號(hào)，2個(gè)字母的寬度，1個(gè)中文字符的寬度

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

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

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

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

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

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

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

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

vscode編輯器

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

安裝漢化包

在這里插入圖片描述

常用插件

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

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

HTML CSS Support 智能提示css類(lèi)名和id名稱(chēng)

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

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

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

網(wǎng)頁(yè)的布局元素(塊級(jí)元素)

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

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

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

<section></section>主要表示一個(gè)獨(dú)立主題，可以取代div元素。

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

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

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

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

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

其他常用標(biāo)簽

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

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

屬性

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

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

? 例如

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

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

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

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

圖片標(biāo)簽:

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

屬性

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

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

列表

ol 有序列表

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

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

屬性

type 屬性

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

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

a 小寫(xiě)字母排序

A 大寫(xiě)字母排序

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

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

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

ul 無(wú)序列表

<ul type="square">
 <li>一年級(jí)1班</li>
 ...
 </ul>

無(wú)序列表，沒(méi)有序號(hào)，每一列前面有一個(gè)符號(hào)

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

dl 自定義列表

<dl>
 <dt>web前端</dt>
 <dd>網(wǎng)頁(yè)前臺(tái)</dd>
 </dl>

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

dt表示一個(gè)術(shù)語(yǔ) dd是對(duì)術(shù)語(yǔ)的解釋

iframe 網(wǎng)頁(yè)容器

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

iframe 網(wǎng)頁(yè)容器，可以在一個(gè)區(qū)域顯示其他網(wǎng)頁(yè) 以及網(wǎng)頁(yè)內(nèi)容src屬性設(shè)置顯示網(wǎng)頁(yè)的地址width 設(shè)置iframe的寬度，height 設(shè)置iframe 的高度f(wàn)rameborder 設(shè)置邊框的尺allowfullscreen 點(diǎn)擊全屏按鈕，可以全屏顯示多媒體標(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 自動(dòng)播放(chrome瀏覽器需要設(shè)置 muted)muted 靜音loop 循環(huán)播放width 設(shè)置寬度，height設(shè)置高度,一般設(shè)置一個(gè)，讓另外一個(gè)尺寸自動(dòng)計(jì)算poster 視頻封面圖片，可以是網(wǎng)絡(luò)圖片，也可以是本地圖片preload 視頻緩存屬性值:auto(默認(rèn)值)緩沖整個(gè)視頻，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符號(hào)輸入:

可以用搜狗輸入法輸入特殊符號(hào)

通過(guò)html符號(hào)源代碼顯示符號(hào)(推薦方法)

table表格

table 表示一個(gè)表格

屬性:

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

tr 表示一行

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

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

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

caption 表格的標(biāo)題

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

tbody 表格的身體部分

tfoot 表格的底部

form表單

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

在這里插入圖片描述

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

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

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

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

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

屬性:

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

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

? post請(qǐng)求,數(shù)據(jù)通過(guò)請(qǐng)求體傳遞，在網(wǎng)址后面看不見(jiàn)數(shù)據(jù)。缺點(diǎn): 數(shù)據(jù)傳輸沒(méi)get快，缺點(diǎn): 數(shù)據(jù)在請(qǐng)求體相對(duì)安全，傳輸數(shù)據(jù)幾乎沒(méi)有顯示，可以傳遞各種數(shù)據(jù)。

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

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

屬性

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

type屬性值:

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

? fieldset標(biāo)簽

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

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

lable標(biāo)簽

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

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

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

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

button按鈕

屬性：

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

disabled 按鈕禁用
name 按鈕名稱(chēng)，提交數(shù)據(jù)的時(shí)候，以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下拉菜單

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

<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 表單名稱(chēng)，數(shù)據(jù)以name=value方式傳到后端(value是選中option的vlaue值)

disabled 表單不能選擇

required 必填

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

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

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

datalist容器

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

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

textarea多行文本輸入框

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

output

10+10<output name="result">20</output> 表示一個(gè)
用戶的操作結(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之間的一個(gè)數(shù)，表示當(dāng)前的進(jìn)度。

meter 指示器

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

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

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

details折疊標(biāo)簽

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

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

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

常用html標(biāo)簽

塊級(jí)標(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之間的一個(gè)數(shù)，表示當(dāng)前的進(jìn)度。
**meter 指示器**

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

折疊標(biāo)題

test1

```

常用html標(biāo)簽

塊級(jí)標(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介紹及常用代碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

Tag：HTML 介紹常用代碼

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

HTML

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

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

HTML常用術(shù)語(yǔ)

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

vscode編輯器

網(wǎng)頁(yè)的布局元素(塊級(jí)元素)

其他常用標(biāo)簽

表格

form表單

常用html標(biāo)簽

常用html標(biāo)簽

相關(guān)文章

最新評(píng)論

文章分類(lèi)

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

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