當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）

發(fā)布時(shí)間：2023/12/15 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- - - HTML簡(jiǎn)介（廢話）
    - HTML書寫規(guī)范（HTML最小集）
    - HTML標(biāo)簽
    - HTML常用標(biāo)簽
    - - 1.HTML標(biāo)題標(biāo)簽：
      - 2.HTML 段落標(biāo)簽
      - 3.HTML font 字體標(biāo)簽
      - 4.HTML 超鏈接（鏈接）標(biāo)簽
      - 5. HTML列表標(biāo)簽
      - 6.HTML 圖像標(biāo)簽
      - 7.HTML表格標(biāo)簽
      - 8.常用的特殊字符集
      - 9.iframe 框架標(biāo)簽(內(nèi)嵌窗口)
      - 10表單標(biāo)簽
      - 11.其他標(biāo)簽

我要正經(jīng)的講一節(jié)課，咳咳！

HTML簡(jiǎn)介（廢話）

??????? HTML稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等。

????????超文本是一種組織信息的方式，它通過(guò)超級(jí)鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠(yuǎn)的某臺(tái)計(jì)算機(jī)上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接，為人們查找，檢索信息提供方便。

HTML書寫規(guī)范（HTML最小集）

以下最小的HTML最小集就是說(shuō)，一個(gè)符合規(guī)則的HTML文件最小是這樣子的

<html> 表示整個(gè)html 頁(yè)面的開始<head> 頭信息<title> 標(biāo)題</title> 標(biāo)題</head><body> body 是頁(yè)面的主體內(nèi)容頁(yè)面主體內(nèi)容</body> </html> 表示整個(gè)html 頁(yè)面的結(jié)束

HTML標(biāo)簽

1.標(biāo)簽的格式:

<標(biāo)簽名>封裝的數(shù)據(jù)</標(biāo)簽名>

2.標(biāo)簽名大小寫不敏感。
3.標(biāo)簽擁有自己的屬性。

分為基本屬性：bgcolor=“red” 可以修改簡(jiǎn)單的樣式效果
事件屬性： οnclick=“alert(‘你好！’);” 可以直接設(shè)置事件響應(yīng)后的代碼。

4.標(biāo)簽又分為，單標(biāo)簽和雙標(biāo)簽。

單標(biāo)簽格式： <標(biāo)簽名/> </br> 換行</hr> 水平線
雙標(biāo)簽格式: <標(biāo)簽名> …封裝的數(shù)據(jù)…</標(biāo)簽名>

5標(biāo)簽的語(yǔ)法：

雙標(biāo)簽一定要結(jié)束
標(biāo)簽不能交叉嵌套
屬性必須有值，屬性值必須加引號(hào)
注釋不能嵌套

HTML常用標(biāo)簽

知道常用的就行，一般在開發(fā)過(guò)程中，都是查閱需要的標(biāo)簽。這點(diǎn)應(yīng)付考試和入門絕對(duì)夠用！

1.HTML標(biāo)題標(biāo)簽：

標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。
<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。

align： 屬性是對(duì)齊屬性

left： 左對(duì)齊(默認(rèn))
center： 劇中
right： 右對(duì)齊

標(biāo)題1

標(biāo)題2

標(biāo)題3

標(biāo)題4

標(biāo)題5

標(biāo)題6

標(biāo)題7

這是以上內(nèi)容的代碼

2.HTML 段落標(biāo)簽

段落是通過(guò) <p> 標(biāo)簽定義的。

我是第一段

我是第二段

很明顯，你看到了單獨(dú)兩段內(nèi)容，我們給出源代碼 <p>我是第一段</p> <p>我是第二段</p>

3.HTML font 字體標(biāo)簽

font 標(biāo)簽是字體標(biāo)簽,它可以用來(lái)修改文本的字體,顏色,大小(尺寸)

color 屬性修改顏色
face 屬性修改字體
size 屬性修改文本大小

我是紅色黑體七號(hào)字

<font color="red" face="黑體" size="7">我是紅色黑體七號(hào)字</font>

其中還有別的屬性，就不推薦大家學(xué)了，因?yàn)槎继蕴?#xff0c;還是使用CSS更佳。

4.HTML 超鏈接（鏈接）標(biāo)簽

超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
<a>標(biāo)簽是超鏈接</a>

href 屬性設(shè)置連接的地址
target 屬性設(shè)置哪個(gè)目標(biāo)進(jìn)行跳轉(zhuǎn)
_self 表示當(dāng)前頁(yè)面(默認(rèn)值)
_blank 表示打開新頁(yè)面來(lái)進(jìn)行跳轉(zhuǎn)

你可以先點(diǎn)擊以下標(biāo)簽感受一下，我下文將會(huì)給出介紹。
百度

百度直接跳轉(zhuǎn)

百度新標(biāo)簽跳轉(zhuǎn)

如果你沒(méi)感受出有什么差別，那么一定是你的瀏覽器設(shè)置的原因，我們還是給出原代碼。

<a href="http://www.baidu.com">百度</a><br/> <a href="http://www.baidu.com" target="_self">百度直接跳轉(zhuǎn)</a><br/> <a href="http://www.baidu.com" target="_blank">百度新標(biāo)簽跳轉(zhuǎn)</a><br/>

5. HTML列表標(biāo)簽

HTML 支持有序、無(wú)序和定義列表，常用的為前兩者。
1. 無(wú)序列表
<ul type=" xxx"> 是無(wú)序列表
- type 屬性可以修改列表項(xiàng)前面的符號(hào)
- li 是列表項(xiàng)

比如：

趙四
劉能
小沈陽(yáng)
宋小寶

2. 有序列表

Coffee

Milk

Tea

<ol> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ol>

3. 定義列表
這個(gè)真沒(méi)用過(guò)，我偷個(gè)懶不講了。

6.HTML 圖像標(biāo)簽

<img />標(biāo)簽可以在html 頁(yè)面上顯示圖片。

img 標(biāo)簽是圖片標(biāo)簽,用來(lái)顯示圖片
src 屬性可以設(shè)置圖片的路徑 <img src="url" />
width 屬性設(shè)置圖片的寬度
height 屬性設(shè)置圖片的高度
border 屬性設(shè)置圖片邊框大小
alt 屬性設(shè)置當(dāng)指定路徑找不到圖片時(shí),用來(lái)代替顯示的文本內(nèi)容<img src="boat.gif" alt="Big Boat">

源代碼：

這里我們簡(jiǎn)單講一下Web中的路徑問(wèn)題：

在web 中路徑分為相對(duì)路徑和絕對(duì)路徑兩種

相對(duì)路徑:
. 表示當(dāng)前文件所在的目錄
.. 表示當(dāng)前文件所在的上一級(jí)目錄
文件名表示當(dāng)前文件所在目錄的文件,相當(dāng)于./文件名./ 可以省略
絕對(duì)路徑:
正確格式是: http://ip:port/工程名/資源路徑

7.HTML表格標(biāo)簽

表格由 <table> 標(biāo)簽來(lái)定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

border 設(shè)置表格標(biāo)簽
width 設(shè)置表格寬度
height 設(shè)置表格高度
align 設(shè)置表格相對(duì)于頁(yè)面的對(duì)齊方式
cellspacing 設(shè)置單元格間距
tr 是行標(biāo)簽
th 是表頭標(biāo)簽
td 是單元格標(biāo)簽
align 設(shè)置單元格文本對(duì)齊方式
b 是加粗標(biāo)簽
colspan 屬性設(shè)置跨列
rowspan 屬性設(shè)置跨行

1.1		1.3	1.4	1.5
2.1	2.2	2.3	2.4	2.5
2.1	3.1	3.2	3.3	3.4
4.1	4.2	4.3	4.4	3.4

可能不是很清楚，因?yàn)閙arkdown不能完全兼容HTM的代碼，將就一下，下面是源碼。

8.常用的特殊字符集

一定是常用的，因?yàn)樘嗔?#xff0c;如果全寫出了，那得好幾個(gè)篇幅了，我知道你們不愛看，我就跳過(guò)了！

結(jié)果描述實(shí)體名稱實(shí)體編號(hào)

	空格
"	引號(hào)	"	"
'	撇號(hào)?	'	'
&	和號(hào)	&	&
<	小于號(hào)	<	<
>	大于號(hào)	>	>

剩下的自己去查就完事，這時(shí)候有小伙伴要問(wèn)了，換行換行!<br>我的錯(cuò)，我忘記說(shuō)換行標(biāo)簽了，我錯(cuò)了！

9.iframe 框架標(biāo)簽(內(nèi)嵌窗口)

我倒是挺想寫個(gè)窗口給大家演示的，但是mark down不允許！可惜！

<body>  <iframe src="https://me.csdn.net/blog/weixin_43627118" width="500" height="400" name="mubiao"></iframe> <br/> <ul> <li><a href="https://blog.csdn.net/weixin_43627118" target="mubiao">他的博文</a></li> <li><a href="https://blog.csdn.net/weixin_43627118/category_9800870.html" target="mubiao">JAVA專欄</a></li> <li><a href="https://blog.csdn.net/weixin_43627118/category_9800862.html" target="mubiao"> 數(shù)據(jù)庫(kù)專欄</a></li> </ul> </body>

可以把代碼粘貼到記事本后改擴(kuò)展名為HTML然后試一下，體驗(yàn)體驗(yàn)。
效果大概是這樣的

10表單標(biāo)簽

表單就是html 頁(yè)面中,用來(lái)收集用戶信息的所有元素集合.然后把這些信息發(fā)送給服務(wù)器.

<form> 標(biāo)簽就是表單

input type=text 是文件輸入框value 設(shè)置默認(rèn)顯示內(nèi)容
input type=password 是密碼輸入框value 設(shè)置默認(rèn)顯示內(nèi)容
input type=radio 是單選框name 屬性可以對(duì)其進(jìn)行分組checked="checked"表示默認(rèn)選中
input type=checkbox 是復(fù)選框checked="checked"表示默認(rèn)選中
input type=reset 是重置按鈕value 屬性修改按鈕上的文本
input type=submit 是提交按鈕value 屬性修改按鈕上的文本
input type=button 是按鈕value 屬性修改按鈕上的文本
input type=file 是文件上傳域
input type=hidden 是隱藏域當(dāng)我們要發(fā)送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域(提交的時(shí)候同時(shí)發(fā)送給服務(wù)器）
select 標(biāo)簽是下拉列表框
- option 標(biāo)簽是下拉列表框中的選項(xiàng)selected="selected"設(shè)置默認(rèn)選中
- textarea 表示多行文本輸入框（起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容是默認(rèn)值）
- rows 屬性設(shè)置可以顯示幾行的高度
- cols 屬性設(shè)置每行可以顯示幾個(gè)字符寬度

給出一個(gè)樣例：

同樣的，可粘貼后自己運(yùn)行體驗(yàn)一下啊！

表單提交細(xì)節(jié):

<form >標(biāo)簽是表單標(biāo)簽
action 屬性設(shè)置提交的服務(wù)器地址
method 屬性設(shè)置提交的方式GET(默認(rèn)值)或POST
accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁(yè)面字符集）。
autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開啟）。
enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。
name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。
novalidate 規(guī)定瀏覽器不驗(yàn)證表單。
target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。

表單提交的時(shí)候，數(shù)據(jù)沒(méi)有發(fā)送給服務(wù)器的三種情況：
1、表單項(xiàng)沒(méi)有name 屬性值
2、單選、復(fù)選（下拉列表中的option 標(biāo)簽）都需要添加value 屬性，以便發(fā)送給服務(wù)器
3、表單項(xiàng)不在提交的form 標(biāo)簽中
GET 請(qǐng)求的特點(diǎn)是：
1、瀏覽器地址欄中的地址是：action 屬性[+?+請(qǐng)求參數(shù)]
請(qǐng)求參數(shù)的格式是：name=value&name=value
2、不安全
3、它有數(shù)據(jù)長(zhǎng)度的限制
POST 請(qǐng)求的特點(diǎn)是：
1、瀏覽器地址欄中只有action 屬性值
2、相對(duì)于GET 請(qǐng)求要安全
3、理論上沒(méi)有數(shù)據(jù)長(zhǎng)度的限制

何時(shí)使用 GET？何時(shí)使用 POST？
您能夠使用 GET（默認(rèn)方法）：
如果表單提交是被動(dòng)的（比如搜索引擎查詢），并且沒(méi)有敏感信息。

您應(yīng)該使用 POST：
如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼）。
POST 的安全性更加，因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)是不可見的。

剛才的代碼是不能正常提交，下面的代碼經(jīng)過(guò)修改時(shí)可以提交的，仔細(xì)觀察一下有什么區(qū)別。

<form action="http://localhost:8080" method="post"> <input type="hidden" name="action" value="login" /> <h1 align="center">用戶注冊(cè)</h1> <table align="center"> <tr> <td> 用戶名稱：</td> <td> <input type="text" name="username" value="默認(rèn)值"/> </td> </tr> <tr> <td> 用戶密碼：</td> <td><input type="password" name="password" value="abc"/></td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" value="boy"/>男 <input type="radio" name="sex" checked="checked" value="girl" />女 </td> </tr> <tr> <td> 興趣愛好：</td> <td> <input name="hobby" type="checkbox" checked="checked" value="java"/>唱 <input name="hobby" type="checkbox" value="js"/>跳 <input name="hobby" type="checkbox" value="cpp"/>rap <input name="hobby" type="checkbox" value="cpp"/>籃球 </td> </tr> <tr> <td>國(guó)籍：</td> <td> <select name="country"> <option value="none">--請(qǐng)選擇國(guó)籍--</option> <option value="cn" selected="selected">中國(guó)</option> <option value="usa">美國(guó)</option> <option value="jp">小日本</option> </select> </td> </tr> <tr> <td>自我評(píng)價(jià)：</td> <td><textarea name="desc" rows="10" cols="20">我才是默認(rèn)值</textarea></td> </tr> <tr> <td><input type="reset" /></td> <td align="center"><input type="submit"/></td> </tr> </table> </form> </body>

11.其他標(biāo)簽

標(biāo)簽?zāi)J(rèn)獨(dú)占一行 span 標(biāo)簽它的長(zhǎng)度是封裝數(shù)據(jù)的長(zhǎng)度 p 段落標(biāo)簽?zāi)J(rèn)會(huì)在段落的上方或下方各空出一行來(lái)（如果已有就不再空）

看下邊：

div 標(biāo)簽1 div 標(biāo)簽2 span 標(biāo)簽1 span 標(biāo)簽2

p 段落標(biāo)簽1

p 段落標(biāo)簽2

你看這個(gè)像什么！
???????????▄▄
???????????█?█
???????????█?█
??????????█??█
?????????█???█
███████▄▄█???██████▄
▓▓▓▓▓▓█????????????█
▓▓▓▓▓▓█????????????█
▓▓▓▓▓▓█????????????█
▓▓▓▓▓▓██████████████

總結(jié)

以上是生活随笔為你收集整理的HTML--HTML入门篇（我想10分钟入门HTML，可以，交给我吧）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： zip格式怎么打开(dmp文件怎么打开)
下一篇：前端必备，Adobe Premiere