html簡介以及常用標(biāo)簽介紹
時間：2023-09-04 15:36:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-04 15:36:01 來源：網(wǎng)站運(yùn)營
html簡介以及常用標(biāo)簽介紹：一、什么是HTML
超文本標(biāo)記語言（英文：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起唄眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。
二、簡單介紹HTML語法
HTML由一系列的元素組成，你可以使用它來封裝，包裝或標(biāo)記內(nèi)容的不同部分，使其以某種方式顯示或以某種方式執(zhí)行。封閉標(biāo)簽（tags）可以使一些內(nèi)容成為超鏈接以跳轉(zhuǎn)到別的頁面、加粗或斜體字等等。
1.剖析HTML元素
如果想要在html中輸入段落文本，可以講要輸入的段落文本包含在段落標(biāo)簽（<p>）元素中：
<p>My cat is very grumpy</p>
本例<p>段落元素主要的組成部分：
1.
開始標(biāo)簽（Opening tag）：包括元素的名稱（本例中的p），包裹在開始（<）和結(jié)束（>）尖括號中。這表示元素開始-在本例中表示了一個段落的開頭。
2.
結(jié)束標(biāo)簽（Closing tag）：這與開始標(biāo)記相同，除了它在元素名稱之前有一個正斜杠（/）。這表示元素結(jié)束的位置-在本例中表示了一個段落的結(jié)尾。
3.
內(nèi)容（Content）：這是元素的內(nèi)容，在本例中只是文本。
4.
元素（Element）：開始標(biāo)記 + 內(nèi)容 + 結(jié)束標(biāo)記 = 元素
2.嵌套元素
你可以把元素放在其他元素之中--這被稱之為嵌套。如果我們想要表明我的小貓是非常暴躁的，可以將very嵌套在<strong>中，意味著這個單詞被著重強(qiáng)調(diào)：
<p>My cat is <strong>very</strong> grumpy.</p>
3.塊級元素和內(nèi)聯(lián)元素
在HTML中有兩種需要知道的重要元素類別，塊級元素和內(nèi)聯(lián)元素。
- 塊級元素在頁面中以塊的形式展現(xiàn) —— 相對與其前面的內(nèi)容它會出現(xiàn)在新的一行，其后的內(nèi)容也會被擠到下一行展現(xiàn)。塊級元素通常用于展示頁面上結(jié)構(gòu)化的內(nèi)容，例如段落、列表、導(dǎo)航菜單、頁腳等等。一個以block形式展現(xiàn)的塊級元素不會被嵌套進(jìn)內(nèi)聯(lián)元素中，但可以嵌套在其它塊級元素中
- 內(nèi)聯(lián)元素通常出現(xiàn)在塊級元素中并包裹文檔內(nèi)容的一小部分，而不是一整個段落或者一組內(nèi)容。內(nèi)聯(lián)元素不會導(dǎo)致文本換行：它通常出現(xiàn)在一堆文字之間例如超鏈接元素<a>或者強(qiáng)調(diào)元素<em>和<strong>。
4.注釋
在編寫HTML代碼使想要對代碼進(jìn)行解釋說明，那便可以將代碼的說明放在注釋中。 注釋是被瀏覽器所忽略，并且對用戶不可見 語法：<!-- 注釋內(nèi)容 -->
5.空元素
不是所有元素都擁有開始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽。有些元素只有一個標(biāo)簽，通常用來在此元素的位置插入/嵌入一些東西，這些元素被稱之為空元素。在HTML中通常在一個空元素上使用一個閉標(biāo)簽是無效的。
6.屬性
屬性包含元素的額外信息，這些信息不會出現(xiàn)在實(shí)際的內(nèi)容中。在圖片中，這個class屬性給元素賦了一個識別的名字（id），這個名字此后可以被用來識別此元素的樣式信息和其他信息。
常用的標(biāo)準(zhǔn)屬性id： 定義元素在頁面中的唯一標(biāo)識
title：鼠標(biāo)移入到元素上時提示的文本
class：樣式相關(guān)，定義元素引用的類選擇器
style：樣式相關(guān)，定義元素的行內(nèi)樣式
7.HTML文檔結(jié)構(gòu)
簡單完整的HTML<!DOCTYPE html> <!-- 聲明文檔類型 --> <html> <!-- <html>元素包裹了整個完整的頁面，是一個根元素 --> <head> <!-- <head>元素是一個容器，它包含了所有你想包含在HTML頁面中但不想在其中顯示的內(nèi)容 --> <meta charset="utf-8"> <!-- 這個元素設(shè)置文檔使用utf-8字符集編碼 --> <title>My blog</title> <!-- 設(shè)置頁面標(biāo)題，讓其出現(xiàn)在瀏覽器標(biāo)簽上。當(dāng)你標(biāo)記/收藏頁面時它可用來描述頁面。 --> </head> <body> <!-- <body>元素包含了訪問頁面時所有顯示在頁面上的內(nèi)容：文本、圖片、音視頻、游戲等等 --> <p>This is my blog</p> </body> </html>
三、HTML常用的標(biāo)簽
1.<a>標(biāo)簽
a（anchor 錨點(diǎn)）：超鏈接、設(shè)置頁面中允許被點(diǎn)擊的內(nèi)容 標(biāo)簽樣式：<a></a> 屬性： href:"xxx" -- 鏈接地址，xxx表示要跳轉(zhuǎn)到新頁面的地址 target:"xxx" -- 目標(biāo)，xxx表示打開新網(wǎng)頁所使用的的形式 target:"_blank" -- 在一個新頁面打開 target:"_self" -- 在自己（本）頁面打開 target:"_parent" -- 在父級頁面打開 target:"_top" -- 在頂級頁面打開
2.文本樣式
<i></i>：斜體 <b></b>：加粗 <s></s>：刪除線 <u></u>：下劃線 <sup></sup>：上標(biāo) <sub></sub>：下標(biāo)
3.標(biāo)題
以下標(biāo)簽可顯示一至六級標(biāo)題，一級最大六級最?。?<h1></h1> <h2></h2> ... <h6></h6>
4.簡單標(biāo)簽
p（paragraph 段落）：段落元素 標(biāo)簽樣式：<p></p> br：換行元素 標(biāo)簽樣式：<br> hr：分割線元素 標(biāo)簽樣式：<hr> strong：表示文本十分重要（粗體） 標(biāo)簽樣式：<strong></strong> em（emphasize 強(qiáng)調(diào)）：著重元素，標(biāo)記處需要用戶著重閱讀的內(nèi)容（斜體） 標(biāo)簽樣式：<em></em> small：將文本字體小一號 標(biāo)簽樣式：<small></small> img：圖片元素 標(biāo)簽樣式：<img> 屬性： src：圖片的地址（可是絕對路徑也可是相對路徑） width：圖片寬度 height：圖片高度
5.分區(qū)元素
1）塊分區(qū)元素：<div></div> 用于頁面布局，獨(dú)立成行 2）行內(nèi)分區(qū)元素：<span></span> 用于設(shè)置同一行文本內(nèi)的不同格式，多個元素在一行內(nèi)顯示出來
6.<iframe>標(biāo)簽
iframe：在一個頁面內(nèi)嵌套另一個頁面 標(biāo)簽樣式：<iframe></iframe> 屬性： src：嵌套頁面的URL地址 name：嵌入的頁面的名稱 frameborder：取值為1時（默認(rèn)值），告訴瀏覽器在當(dāng)前iframe與其他iframe之間繪制邊框，取0時則無需繪制此邊框
7.表單
由<form>標(biāo)簽定義，將用戶輸入的數(shù)據(jù)提交給后臺。 但如果form表單中沒有提交按鈕，就無法提交form的數(shù)據(jù)。 標(biāo)簽樣式：<form action="xxx" method="get"></form> 屬性： action：提交的服務(wù)器地址 method：表單數(shù)據(jù)提交的方式（form只支持get與post兩種方式） name：定義表單的名稱 id：獨(dú)一無二的標(biāo)識 target：與<a>標(biāo)簽相同，一樣有四個target對應(yīng)的值
<input>元素<input>：用于為基于Web的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù) 標(biāo)簽樣式：<input> 屬性： type：根據(jù)不同的type屬性值可以創(chuàng)建各種類型的輸入字段 value：最終提交給服務(wù)器的值 name：控件的名稱，提供給服務(wù)器使用，沒有name，控件則無法提交 id：唯一標(biāo)識 disabled：標(biāo)記表單使之為不可用
-文本框：<input type="text"> -密碼框：<input type="password"> -單選框：<input type="radio"> -多選框：<input type="checkbox"> -提交按鈕：<input type="submit"> -重置按鈕：<input type="reset"> -普通按鈕：<input type="button"> -圖片按鈕：<input type="image" src="xxx"> -隱藏域：<input type="hidden"> -文件選擇框：<input type="file">
提交按鈕標(biāo)簽樣式：<button>按鈕</button> 如果一個form里只有一個<button>（type屬性為空），那這個按鈕會自動升級為一個submit按鈕。
<select>下拉選擇框<select name="分組"> <option value="" selected>-</option> <!-- 默認(rèn)選擇 --> <option value="1">第一組</option> <option value="2" disable>第二組</option> <!-- 不可選定 --> <option value="3">第三組</option> </select>
<textarea>標(biāo)簽<textarea>標(biāo)簽：讓用戶可輸入多行文本 標(biāo)簽樣式：<textarea name="" id="" cols="30" rows="10"></textarea> 屬性： name：控件的名稱，提供給服務(wù)器使用，沒有name，控件則無法提交 id：唯一標(biāo)識 clos：文本框?qū)挾? rows：文本框高度
8.列表
- 列表：將一組具有相似特征或者具有先后順序的內(nèi)容按照從上到下的順序排列在一起。
1）ol（order list）有序列表 <ol> <li></li> </ol> 2）ul（un-order list）無序列表 <ul> <li></li> </ul> 3）自定義列表 <dl> <!--description list（描述列表） --> <dt>描述列表的標(biāo)題內(nèi)容</dt> <!-- description term（描述術(shù)語） --> <dd>描述列表定義</dd> <!-- description definition（描述定義） --> </dl>
9.表格
<table>元素定義表格 標(biāo)簽樣式：<table></table> <table>標(biāo)簽的子元素有：thead、tbody、tfoot、colgroup
<table>表格示例<table> <thead> <tr> <td>姓名</td> <td>班級</td> </tr> </thead> <tbody> <tr> <td>小紅</td> <td>一班</td> </tr> <tr> <td>小藍(lán)</td> <td>二班</td> </tr> </tbody> </table>
10.結(jié)構(gòu)標(biāo)記
- HTML5所提供的結(jié)構(gòu)標(biāo)記，專門用于表示常見的網(wǎng)頁結(jié)構(gòu)（即制作布局），提升布局代碼的語義性和可讀性
<header></header>：定義頁面頂部信息 <nav></nav>：定義頁面的導(dǎo)航條部分 <section></section>：定義文檔中的節(jié)，文檔中主體內(nèi)容 <article></article> ：定義獨(dú)立于文檔的其他部分內(nèi)容(章、節(jié)等) <footer></footer>：定義某區(qū)域的腳注信息，頁面底部內(nèi)容等 <aside></aside>：多用于側(cè)邊欄和相關(guān)引用信息等
在線咨詢