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

HTML

Web前端基础——HTML

發(fā)布時(shí)間：2025/3/20 HTML 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端基础——HTML 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、HTML 概述

HTML : 超文本標(biāo)記語(yǔ)言 HyperText markup language?? ????

<marquee behavior="alternate"><font size="50" color="blue">紅塵來(lái)也來(lái),去也去,總是一場(chǎng)空</font></marquee>

可以運(yùn)行在本地,和服務(wù)端

1.html 標(biāo)簽一般成對(duì)出現(xiàn) <標(biāo)簽名></標(biāo)簽名>

2.單獨(dú)標(biāo)簽不需要配對(duì)的標(biāo)簽 <br /> <hr />

3.一個(gè)標(biāo)簽+其中的內(nèi)容 = 一個(gè)html 元素

4.標(biāo)簽中可以有一個(gè)或多個(gè)屬性 ,屬性名=屬性值,屬性值可以用單引號(hào)或雙引號(hào)引起來(lái),也可以不引

5.標(biāo)簽名和屬性名大小寫不敏感

不同的瀏覽器之間存在著不兼容的問(wèn)題（一般情況下，我們驗(yàn)證火狐、谷歌和IE，這三大瀏覽器）

制定規(guī)范的,有 IETF(Internet 工程任務(wù)組) 和 w3c (www 聯(lián)盟)兩個(gè)組織, 當(dāng)前正在使用的版本是 HTML 4.01。

?二、HTML 全局構(gòu)架標(biāo)簽

<html><head>//這里的內(nèi)容通常不會(huì)在瀏覽器中顯示//通常用來(lái)引入腳本文件(javascript 文件),或css樣式等</head><body>//這里的內(nèi)容一般都是要顯示在瀏覽器中</body></html>

body 標(biāo)簽的屬性

1.Text :設(shè)置網(wǎng)頁(yè)中文字的顏色
2.link:設(shè)置一般超鏈接文本的顯示顏色
3.alink:鼠標(biāo)移到超鏈接上時(shí),超鏈接顯示的顏色
4.vlink:訪問(wèn)過(guò)的超鏈接的顏色

顏色屬性值有兩種表示方式:

1.十六進(jìn)制RGB 顏色碼, 用一個(gè) # 后跟六位16進(jìn)制數(shù) 例如: #FF0000

2.HTML 的顏色常量名 :Red

--background:設(shè)定背景墻紙所用的圖象文件,可以是gif 或 jpeg ,可以是絕對(duì)路徑或相對(duì)路徑 //background="lengtu.jpg" 后,平鋪,擋住了背景

--bgcolor:背景色,當(dāng)已設(shè)置 background時(shí),它會(huì)失去作用,除非background有透明的地方

--leftmargin:網(wǎng)頁(yè)顯示畫面與瀏覽器左邊的間隙,單位為象素? //本例中原來(lái)文字和左邊還有一定的空隙,但加上 leftmargin=0 后,直接貼上了

--topmargin:上面的

--class,name,id,style等屬性

用myeclipse 新建一個(gè)網(wǎng)頁(yè),可以看到頂部有這樣一句話

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

它稱為文檔類型定義語(yǔ)句

注釋 

? 使用這樣的方式注掉的文本,瀏覽器在解釋的時(shí)候?qū)?huì)忽略它們,但它們會(huì)被發(fā)送到客戶端,查看源碼是可以看到的

(注意,它不能嵌套)

html 編碼:（前三個(gè)比較常用）

> >< <&nbsp 空格&amp &&quot " ”

三、格式標(biāo)簽

<p></p> //段落標(biāo)簽

<p? align="right">

這是一段文本
</p>

<p align=center? >
這是中間的一段文本

</p>

這是下面的一段文本

</p>
<br /> //換行
<nobr></nobr>

<blockquote></blockquote> //縮進(jìn) 在它中間加入的文本,會(huì)按縮進(jìn)的形式顯示用它的結(jié)果好象設(shè)置了 leftmarign,實(shí)驗(yàn)發(fā)現(xiàn)是兩端縮進(jìn)

<center></center> //居中? html5中過(guò)時(shí)了

<marquee></marquee> //動(dòng)感

behaiver: slider,alternate,scroll

direction:up ,down,left, right

<dl></dl> //創(chuàng)建列表

<ol></ol> //有序列表? 創(chuàng)建帶有數(shù)字序號(hào)的列表 o 就是order的意思,它有 type =1,a 這類屬性

<ul></ul>//無(wú)序列表

<ul type="square"> //前面的小點(diǎn)變成方塊了 <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li> </ul>

?<li></li> 只能在上兩者中使用.用于創(chuàng)建具體的列表項(xiàng)

<pre></pre> //預(yù)格式化保持其中內(nèi)容的格式不變?? ??? ??? ?

<pre>這是一段文本 </pre>

四、文本標(biāo)簽

<h1>? ... <h6>?? //h 標(biāo)簽,它具有語(yǔ)意的含義

<b> 粗體

<i> 斜體

<u> 下劃線

<strong> 加重

<sub> 建立下標(biāo)

<sup> 建立上標(biāo)? //100 <sup> 2 </sup> 結(jié)果是100的平方的效果

<font> 字體,字號(hào),顏色可以控制, 它有三個(gè)重要屬性: face(字體名稱 ) size (-7,7) color

<font size =-7 color=red face="楷體">AAA</font>? //htm5 廢棄

五、超鏈接標(biāo)簽

href 屬性,指向的是一個(gè)url

什么是URL :

在internate上的任何資源,包括html網(wǎng)頁(yè),圖片及應(yīng)用程序等等,它們都有一個(gè)能保證，其單一的命名方案,中文稱為統(tǒng)一資源定位符。

href 屬性,可以指向一個(gè)地址,也可是以是一個(gè)應(yīng)用程序或zip壓縮文件

<a> 中間的內(nèi)容 </a> //這里 "中間的內(nèi)容" 可以是文字,圖片,flash,其他的html元素等

說(shuō)明: 中間的圖片,默認(rèn)會(huì)有一個(gè)邊框,想把它去掉,可以在圖象標(biāo)簽上加上? border=0 即可

（前提是，你電腦要安裝了mailto才可以哦）

超鏈接的 target 屬性,可以指定目標(biāo)頁(yè)面的顯示位置

超鏈接的定位功能

1) 要在定位的地方寫上 <a name="pos1"> ?

2) 鏈接寫為 <a href="#pos1" >測(cè)試</a>

附: 也可以定位到別的頁(yè)面上

title.html<a href="test.html#p1">第一章</a> <a href="test.html#p2">第二章</a><a href="test.html#p3">第三章</a>

超鏈接標(biāo)簽的 title屬性

<ul><li><a href="" title="哈爾濱昨日大風(fēng)其實(shí)沒(méi)刮起來(lái)" >哈爾濱昨日大風(fēng)...</a></li><li><a href="" title="殺人犯又出現(xiàn)在看守所里" >殺人犯又出現(xiàn)在...</a></li><li><a href="" >終于又出現(xiàn)了天鵝..</a></li></ul>

六、圖象標(biāo)簽

border //邊框

alt? //圖象不存在的時(shí)候,出現(xiàn)的文字 <img src="lengtu.jpg" title="鼠標(biāo)滑過(guò)圖片時(shí)出現(xiàn)的文字" alt="這是圖片不存在的時(shí)候出現(xiàn)的文字" />

title //鼠標(biāo)滑過(guò)圖片時(shí)出現(xiàn)的文字

width

height

圖文混排

web 上支持的圖片格式

Gif (圖形交換格式) 最多能保存256 色,支持透明色,支持動(dòng)畫效果

Jpeg(聯(lián)合圖象專家組) 不支持透明,最多可支持1670 萬(wàn)種色彩

Png(網(wǎng)絡(luò)可移植) 支持透明,不支持動(dòng)畫,最多1670萬(wàn)種

注意,png 在ie6 下,背影透明是有問(wèn)題的,在ie6下它的透明就不透了

絕對(duì)路徑:提供目標(biāo)文檔的完整主機(jī)名,路徑信息,及文檔全稱

相對(duì)路徑:從檔前文檔開始的路徑

--? 如當(dāng)前文檔和目標(biāo)文檔位置平行,則直接書寫目標(biāo)文檔

--? 如當(dāng)前文檔和目標(biāo)文檔所在的文件夾位置平行,則書寫為文件夾名/目標(biāo)文檔名 //即html高一級(jí)

--? 如果當(dāng)前文檔所在的文件夾和目標(biāo)文檔位置平行,則寫為 ../目標(biāo)文檔名 //即圖片高一級(jí)

根相對(duì)路徑：從站點(diǎn)根目錄開始的路徑以/開頭

<hr />

size //線的上下寬度

noshade //不顯示陰影 (只寫上 noshade 即可)

color

width //線的左右寬度

七、圖象地圖

把一副圖象分成多個(gè)區(qū)域,每個(gè)區(qū)域都指向不同的url地址,這些區(qū)域稱為熱點(diǎn)。

shape

rect 四邊形

poly 多邊形

circle 圓形圓心坐標(biāo)和半徑

八、表格

表格,行列對(duì)齊,主要用來(lái)進(jìn)行布局,表格中可以放入任意內(nèi)容

屬性

bgcolor //背景色

border //邊框

bordercolor

bordercolorlight //邊框明亮部的顏色只有在border>0時(shí)才效

bordercolordark

cellspacing //表格單元格之間的距離? 墻的厚度

cellpadding //表格中的內(nèi)容,距邊框的距離

width? //表格寬度,可以取百分比,或絕對(duì)的值

height

?<tr></tr>? // 代表行

align 水平對(duì)齊? center ,left, right

valign 縱向?qū)R? top ,middle , bottom

bgcolor //這一級(jí)的設(shè)置,會(huì)覆蓋上級(jí)的設(shè)置

<td></td>? //代表列

width?? 可以用絕對(duì)象素值,或表格的總寬度的百分比表示,注意是表格的總寬度的百分比；如果幾個(gè)格加起來(lái)不到100%,則其余的部分會(huì)被平分；如果使用了百分比設(shè)置,要注意應(yīng)該設(shè)置table 的width屬性(為象素值或百分比)。

height

align

valign

colspan?? //橫向跨列

rowspan? //縱向跨行

nowrap 不換行

//下例:五行五列,只留外框,把中間的合并<table border=1 width=400 ><tr><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td></tr><tr><td>數(shù)據(jù)</td><td rowspan="3" colspan="3">數(shù)據(jù)</td><td>數(shù)據(jù)</td></tr><tr><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td></tr><tr><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td></tr><tr><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td><td>數(shù)據(jù)</td></tr></table>

九、表格標(biāo)簽

細(xì)線表格

1) 讓表格的border=0

2) 讓它的cellspacing=1?

3) 設(shè)置表格背景色? bgcolor? 為想要的顏色

4) 所有的tr 的 bgcolor 設(shè)為其他顏色

如何讓表格只顯示邊框里面的格不顯示?

rules 屬性

<table rules= none>? //只留外框

<table rules="rows"> //只留外框和水平方向的線

表格還有一個(gè)frame 屬性

可以控制哪些線顯示,哪些隱藏

十、幀標(biāo)簽

1) frameset

//frameset 不能嵌套在body標(biāo)簽中,但可以放在html標(biāo)簽中

border : 表示邊框的寬度,如果0就看不到了

frameborder :

noresize="noresize" //不可以再調(diào)整大小

例子: 嵌套的 frameset???

附: left.html?? ????

超鏈接的target屬性

_blank //在新窗口彈出

-self? //在本窗口彈出,是默認(rèn)認(rèn)值

_parent //在父窗口彈出

_top? //在頂層窗口彈出

2) <iframe>? //畫中畫 (iframetest.html)

<body><table border=1 width=100% height=100%><tr><td width=15%><iframe src=left.html width=100% height=100%></iframe></td> <td bgcolor="silver" width=1%></td> //這行是打醬油的<td><iframe src=welcome.html name="centerFrame" width=100% height=100% ></iframe ></td></tr></table> </body>

?//例子,另外一種布局方式

十一、表單標(biāo)簽

1)表單

--action: 要提交到的 url ,可以為空,如果為空,則訪問(wèn)自已 //也可以用mailto

--method: 提交方式 (get/post)

get方式,提交的數(shù)據(jù)量不能大于1M,會(huì)對(duì)中文和空格進(jìn)行url編碼,提交的內(nèi)容,會(huì)出現(xiàn)在瀏覽器地址欄里

post 方式,可以提交的數(shù)據(jù)量大,內(nèi)容不會(huì)出現(xiàn)在地址欄里

--target 和超鏈的target的屬性很象,指的是服務(wù)端返回的內(nèi)容在哪兒顯示

--title 鼠標(biāo)在表單上任何一個(gè)位置停留的時(shí)候顯示的文字

--enctype 指定瀏覽器用哪種編碼方法把表單數(shù)據(jù)傳送給www服務(wù)器,該屬性有兩種取值

application/x-www-form-urlencoded(默認(rèn)值遞交表單數(shù)據(jù)時(shí),會(huì)對(duì)表單數(shù)據(jù)中的特殊字符進(jìn)行編碼處理,將編碼后的數(shù)據(jù)交給www服務(wù)器處理)和? multipart/form-data

2)表單元素

<input type="submit" vaue="提交"/>? //提交按鈕,類似一個(gè)超鏈接,用來(lái)提交表單

<input type="reset" value="重置" />?? ??? ?//重置

<input type="text" name="userName" value="張三" size=200? maxlength=6 /> //文本框? size 表示框的大小,maxlength 表示最多能輸入多少字符

--size

-- maxlength

-- value

-- readonly? ->readonly="readonly" 或 readonly, 文本框就不能編輯了,但焦點(diǎn)可以進(jìn)入

-- disabled 表示禁用,禁用的元素,不能提到服務(wù)器上

<input type=checkbox />? //復(fù)選框

--checked

--value?? //如果有多個(gè)復(fù)選框,提的時(shí)候,只提交上勾選的

//如果不寫value,勾選上以后提交上去的值是 on
?<input type="radio" /> //如果多個(gè)想成為一組,則name相同

<input type="radio" value="1" name="grade" /> 一班 <input type="radio" value="2" name="grade" /> 二班 <input type="radio" value="3" name="grade"/> 三班

<input type="hidden" > 隱藏域

<input type="image" src="lengtu.jpg" >? //圖象提交按鈕

<select name="school">? //下拉框

<option>黑大</option>? //如果不寫value,則將中間的文本提交上去

<option>guangshas</option>

</select>

-- size 屬性? 表示上面顯示出幾個(gè)

-- multiple

-- selected

<textarea cols=15 rows =5 ></textarea>? //文本域, 15列寬,5行高

<label>

//accesskey 是要用的快捷鍵

//for 后面跟的是要指向的元素的 id

<label for= userName accesskey=u >請(qǐng)輸入用戶名<u>u</u><label> <input type=input name=userName id=userName><label for= password accesskey=p> 請(qǐng)輸入密碼<u>p</u><label><input type=input name=password id=password>

十二、meta標(biāo)簽

meta：

有兩種類型的<meta>,用不同的屬性名來(lái)劃分,這兩種屬性名為? name 和 http-equiv

name 屬性用于在網(wǎng)頁(yè)中,加入一些關(guān)于網(wǎng)頁(yè)的描述信息,例如,網(wǎng)頁(yè)的關(guān)鍵字,網(wǎng)頁(yè)的描述信息等。

http-equiv 屬性用于在網(wǎng)頁(yè)中加入一些關(guān)于網(wǎng)頁(yè)的描述信息,例如:告訴瀏覽器是否緩存網(wǎng)頁(yè),使用什么樣的字符集顯示網(wǎng)頁(yè)內(nèi)容,隔多長(zhǎng)時(shí)間自動(dòng)刷新網(wǎng)頁(yè)等。

消息頭:除了內(nèi)容,還在內(nèi)容之間傳一些叫消息頭的內(nèi)容給瀏覽器,使用查看源文件的方式是看不到的，相當(dāng)于服務(wù)器傳給瀏覽器的暗號(hào)信息。

Meta 標(biāo)簽的 name 屬性設(shè)置

--Keywords ,告訴網(wǎng)絡(luò)機(jī)器人,把content中的內(nèi)容做為關(guān)鍵字

例如 <meta name=keywords content="vc,java">

--Description? ,告訴網(wǎng)絡(luò)機(jī)器人,把content中的內(nèi)容做為網(wǎng)頁(yè)的簡(jiǎn)要描述

--Robots 告訴網(wǎng)絡(luò)機(jī)器人設(shè)置值 index(默認(rèn),可以檢查和收錄),noindex,follow(可以順著這個(gè)頁(yè)面的超鏈接接著往下查找),nofollow,all(前面兩個(gè)都可以做),none

--Generator 編輯網(wǎng)頁(yè)用的工具軟件

--Author

--Copyright 版權(quán)

Meta 標(biāo)簽的http-equiv屬性設(shè)置 (模擬響應(yīng)消息頭的)

-- Content-Type 說(shuō)明網(wǎng)頁(yè)文檔內(nèi)容的mime類型,及文本內(nèi)容所使用的字符集編碼,用于告訴瀏覽器使用某種字符集編碼來(lái)查看這個(gè)網(wǎng)頁(yè)的內(nèi)容

普通的mime 類型,都是text/html?

-- Refresh 模擬刷新的消息頭

有的時(shí)候,用戶的留言可能就是上面的這語(yǔ)句,用來(lái)做惡作劇

-- Expires 用于設(shè)置網(wǎng)頁(yè)的到期時(shí)間? //有的網(wǎng)頁(yè)會(huì)被緩存,如果超過(guò)了這個(gè)頭中指定的日期,瀏覽器必須到指定的地點(diǎn)下載這個(gè)網(wǎng)頁(yè)和它配對(duì)的 content 的值應(yīng)該是個(gè)時(shí)間格式的文本<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:20 GMT">將content設(shè)置為0 可以禁止瀏覽器使用緩存頁(yè)面

--Pragma

可以禁止瀏覽器在本地計(jì)算機(jī)上緩存當(dāng)前頁(yè)面

這時(shí)content 的屬性應(yīng)設(shè)置為 no-cache

--Cache-Control

--Page-Enter 和 Page-Exit 設(shè)置瀏覽器則進(jìn)入或退出一個(gè)頁(yè)面的時(shí)候,采用的顯示效果 (旋入,轉(zhuǎn)出等)

--Windows-target 強(qiáng)制面頁(yè)在某個(gè)窗口顯示

例如,要防止自己的網(wǎng)頁(yè)被別人當(dāng)作一個(gè)frame頁(yè)面調(diào)用,可以使用

十三、頭元素

頭元素是指位于中間的元素

<title></title>標(biāo)簽對(duì)? //網(wǎng)頁(yè)的顯示標(biāo)題

<base> 標(biāo)簽

用于指定網(wǎng)頁(yè)中超鏈接的基準(zhǔn)地址,以改變網(wǎng)頁(yè)中所有使用相對(duì)地址的 URL 基準(zhǔn)地址

<base href="http://www.baidu.com/test" target="_blank"

href 屬性,指定了網(wǎng)頁(yè)中抽有例用Http相對(duì)URL地址的基準(zhǔn)地址,如果網(wǎng)頁(yè)中有如<a href="index.htm"></a>這樣的超鏈接,它不會(huì)再象沒(méi)有使用<base>標(biāo)簽時(shí)那樣表示當(dāng)前網(wǎng)頁(yè)相同目錄下的index.html,而是指向了http://www.baidu.com/test/index.html頁(yè)面，這里的target屬性,是設(shè)置該網(wǎng)頁(yè)中所有超鏈接的target,可以省去一個(gè)個(gè)設(shè)的麻煩。

<head><base href="www.baidu.com" target="_blank"> </head> <body><a href=top.html>aaaa<a> //設(shè)置了base后,點(diǎn)它,相當(dāng)于訪問(wèn) www.baidu.com/top.html </body>

定了當(dāng)前文檔和另一個(gè)文檔或資源之間的關(guān)系

href 屬性,另一個(gè)文檔或url資源的地址,必須

rel 與 rev 定義了link連接的兩個(gè)資源之間的關(guān)系類型,這兩個(gè)必須有一個(gè)

title 說(shuō)明兩個(gè)鏈接的資源之關(guān)的關(guān)系,也可以是描述目標(biāo)資源的字符串,可選

type 目標(biāo)資源的mime類型,例如 Type=text/css Type=text/javascript

Media 說(shuō)明目標(biāo)資源被接收的介質(zhì)或媒體 screen(缺省) pring, aural(揚(yáng)聲器) tty,電傳打字機(jī),tv 電視,all 所有

<script> ...

??????? <style> ...

十四、分區(qū)標(biāo)簽

<div></div>? //division? 行級(jí)元素

<div> 可以組合其他元素,但本身不能嵌套在段落標(biāo)簽中,否則結(jié)果是不確定的

<span><span>? //塊級(jí)元素

div 主要是用來(lái)定義區(qū)塊? 但span是文本級(jí)的元素,下面的例子顯示出了他們的區(qū)別

<div>aaa</div>bbb<br><span>aaa</span>bbb

轉(zhuǎn)載于:https://www.cnblogs.com/1693977889zz/p/7199876.html

總結(jié)

以上是生活随笔為你收集整理的Web前端基础——HTML的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

上一篇：洛谷——P1548 棋盘问题
下一篇： 2017年html5行业报告,云适配发布