當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web前端基础——HTML

發布時間：2025/3/20 HTML 19 豆豆

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

一、HTML 概述

HTML : 超文本標記語言 HyperText markup language?? ????

<marquee behavior="alternate"><font size="50" color="blue">紅塵來也來,去也去,總是一場空</font></marquee>

可以運行在本地,和服務端

1.html 標簽一般成對出現 <標簽名></標簽名>

2.單獨標簽不需要配對的標簽 <br /> <hr />

3.一個標簽+其中的內容 = 一個html 元素

4.標簽中可以有一個或多個屬性 ,屬性名=屬性值,屬性值可以用單引號或雙引號引起來,也可以不引

5.標簽名和屬性名大小寫不敏感

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

制定規范的,有 IETF(Internet 工程任務組) 和 w3c (www 聯盟)兩個組織, 當前正在使用的版本是 HTML 4.01。

?二、HTML 全局構架標簽

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

body 標簽的屬性

1.Text :設置網頁中文字的顏色
2.link:設置一般超鏈接文本的顯示顏色
3.alink:鼠標移到超鏈接上時,超鏈接顯示的顏色
4.vlink:訪問過的超鏈接的顏色

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

1.十六進制RGB 顏色碼, 用一個 # 后跟六位16進制數例如: #FF0000

2.HTML 的顏色常量名 :Red

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

--bgcolor:背景色,當已設置 background時,它會失去作用,除非background有透明的地方

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

--topmargin:上面的

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

用myeclipse 新建一個網頁,可以看到頂部有這樣一句話

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

它稱為文檔類型定義語句

注釋 

? 使用這樣的方式注掉的文本,瀏覽器在解釋的時候將會忽略它們,但它們會被發送到客戶端,查看源碼是可以看到的

(注意,它不能嵌套)

html 編碼:（前三個比較常用）

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

三、格式標簽

<p></p> //段落標簽

<p? align="right">

這是一段文本
</p>

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

</p>

這是下面的一段文本

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

<blockquote></blockquote> //縮進在它中間加入的文本,會按縮進的形式顯示用它的結果好象設置了 leftmarign,實驗發現是兩端縮進

<center></center> //居中? html5中過時了

<marquee></marquee> //動感

behaiver: slider,alternate,scroll

direction:up ,down,left, right

<dl></dl> //創建列表

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

<ul></ul>//無序列表

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

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

<pre></pre> //預格式化保持其中內容的格式不變?? ??? ??? ?

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

四、文本標簽

<h1>? ... <h6>?? //h 標簽,它具有語意的含義

<b> 粗體

<i> 斜體

<u> 下劃線

<strong> 加重

<sub> 建立下標

<sup> 建立上標? //100 <sup> 2 </sup> 結果是100的平方的效果

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

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

五、超鏈接標簽

href 屬性,指向的是一個url

什么是URL :

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

href 屬性,可以指向一個地址,也可是以是一個應用程序或zip壓縮文件

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

說明: 中間的圖片,默認會有一個邊框,想把它去掉,可以在圖象標簽上加上? border=0 即可

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

超鏈接的 target 屬性,可以指定目標頁面的顯示位置

超鏈接的定位功能

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

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

附: 也可以定位到別的頁面上

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

超鏈接標簽的 title屬性

<ul><li><a href="" title="哈爾濱昨日大風其實沒刮起來" >哈爾濱昨日大風...</a></li><li><a href="" title="殺人犯又出現在看守所里" >殺人犯又出現在...</a></li><li><a href="" >終于又出現了天鵝..</a></li></ul>

六、圖象標簽

border //邊框

alt? //圖象不存在的時候,出現的文字 <img src="lengtu.jpg" title="鼠標滑過圖片時出現的文字" alt="這是圖片不存在的時候出現的文字" />

title //鼠標滑過圖片時出現的文字

width

height

圖文混排

web 上支持的圖片格式

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

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

Png(網絡可移植) 支持透明,不支持動畫,最多1670萬種

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

絕對路徑:提供目標文檔的完整主機名,路徑信息,及文檔全稱

相對路徑:從檔前文檔開始的路徑

--? 如當前文檔和目標文檔位置平行,則直接書寫目標文檔

--? 如當前文檔和目標文檔所在的文件夾位置平行,則書寫為文件夾名/目標文檔名 //即html高一級

--? 如果當前文檔所在的文件夾和目標文檔位置平行,則寫為 ../目標文檔名 //即圖片高一級

根相對路徑：從站點根目錄開始的路徑以/開頭

<hr />

size //線的上下寬度

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

color

width //線的左右寬度

七、圖象地圖

把一副圖象分成多個區域,每個區域都指向不同的url地址,這些區域稱為熱點。

shape

rect 四邊形

poly 多邊形

circle 圓形圓心坐標和半徑

八、表格

表格,行列對齊,主要用來進行布局,表格中可以放入任意內容

屬性

bgcolor //背景色

border //邊框

bordercolor

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

bordercolordark

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

cellpadding //表格中的內容,距邊框的距離

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

height

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

align 水平對齊? center ,left, right

valign 縱向對齊? top ,middle , bottom

bgcolor //這一級的設置,會覆蓋上級的設置

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

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

height

align

valign

colspan?? //橫向跨列

rowspan? //縱向跨行

nowrap 不換行

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

九、表格標簽

細線表格

1) 讓表格的border=0

2) 讓它的cellspacing=1?

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

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

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

rules 屬性

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

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

表格還有一個frame 屬性

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

十、幀標簽

1) frameset

//frameset 不能嵌套在body標簽中,但可以放在html標簽中

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

frameborder :

noresize="noresize" //不可以再調整大小

例子: 嵌套的 frameset???

附: left.html?? ????

超鏈接的target屬性

_blank //在新窗口彈出

-self? //在本窗口彈出,是默認認值

_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>

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

十一、表單標簽

1)表單

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

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

get方式,提交的數據量不能大于1M,會對中文和空格進行url編碼,提交的內容,會出現在瀏覽器地址欄里

post 方式,可以提交的數據量大,內容不會出現在地址欄里

--target 和超鏈的target的屬性很象,指的是服務端返回的內容在哪兒顯示

--title 鼠標在表單上任何一個位置停留的時候顯示的文字

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

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

2)表單元素

<input type="submit" vaue="提交"/>? //提交按鈕,類似一個超鏈接,用來提交表單

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

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

--size

-- maxlength

-- value

-- readonly? ->readonly="readonly" 或 readonly, 文本框就不能編輯了,但焦點可以進入

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

<input type=checkbox />? //復選框

--checked

--value?? //如果有多個復選框,提的時候,只提交上勾選的

//如果不寫value,勾選上以后提交上去的值是 on
?<input type="radio" /> //如果多個想成為一組,則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 屬性? 表示上面顯示出幾個

-- multiple

-- selected

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

<label>

//accesskey 是要用的快捷鍵

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

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

十二、meta標簽

meta：

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

name 屬性用于在網頁中,加入一些關于網頁的描述信息,例如,網頁的關鍵字,網頁的描述信息等。

http-equiv 屬性用于在網頁中加入一些關于網頁的描述信息,例如:告訴瀏覽器是否緩存網頁,使用什么樣的字符集顯示網頁內容,隔多長時間自動刷新網頁等。

消息頭:除了內容,還在內容之間傳一些叫消息頭的內容給瀏覽器,使用查看源文件的方式是看不到的，相當于服務器傳給瀏覽器的暗號信息。

Meta 標簽的 name 屬性設置

--Keywords ,告訴網絡機器人,把content中的內容做為關鍵字

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

--Description? ,告訴網絡機器人,把content中的內容做為網頁的簡要描述

--Robots 告訴網絡機器人設置值 index(默認,可以檢查和收錄),noindex,follow(可以順著這個頁面的超鏈接接著往下查找),nofollow,all(前面兩個都可以做),none

--Generator 編輯網頁用的工具軟件

--Author

--Copyright 版權

Meta 標簽的http-equiv屬性設置 (模擬響應消息頭的)

-- Content-Type 說明網頁文檔內容的mime類型,及文本內容所使用的字符集編碼,用于告訴瀏覽器使用某種字符集編碼來查看這個網頁的內容

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

-- Refresh 模擬刷新的消息頭

有的時候,用戶的留言可能就是上面的這語句,用來做惡作劇

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

--Pragma

可以禁止瀏覽器在本地計算機上緩存當前頁面

這時content 的屬性應設置為 no-cache

--Cache-Control

--Page-Enter 和 Page-Exit 設置瀏覽器則進入或退出一個頁面的時候,采用的顯示效果 (旋入,轉出等)

--Windows-target 強制面頁在某個窗口顯示

例如,要防止自己的網頁被別人當作一個frame頁面調用,可以使用

十三、頭元素

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

<title></title>標簽對? //網頁的顯示標題

<base> 標簽

用于指定網頁中超鏈接的基準地址,以改變網頁中所有使用相對地址的 URL 基準地址

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

href 屬性,指定了網頁中抽有例用Http相對URL地址的基準地址,如果網頁中有如<a href="index.htm"></a>這樣的超鏈接,它不會再象沒有使用<base>標簽時那樣表示當前網頁相同目錄下的index.html,而是指向了http://www.baidu.com/test/index.html頁面，這里的target屬性,是設置該網頁中所有超鏈接的target,可以省去一個個設的麻煩。

<head><base href="www.baidu.com" target="_blank"> </head> <body><a href=top.html>aaaa<a> //設置了base后,點它,相當于訪問 www.baidu.com/top.html </body>

<link> 標簽

定了當前文檔和另一個文檔或資源之間的關系

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

rel 與 rev 定義了link連接的兩個資源之間的關系類型,這兩個必須有一個

title 說明兩個鏈接的資源之關的關系,也可以是描述目標資源的字符串,可選

type 目標資源的mime類型,例如 Type=text/css Type=text/javascript

Media 說明目標資源被接收的介質或媒體 screen(缺省) pring, aural(揚聲器) tty,電傳打字機,tv 電視,all 所有

<script> ...

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

十四、分區標簽

<div></div>? //division? 行級元素

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

<span><span>? //塊級元素

div 主要是用來定義區塊? 但span是文本級的元素,下面的例子顯示出了他們的區別

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

轉載于:https://www.cnblogs.com/1693977889zz/p/7199876.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：洛谷——P1548 棋盘问题
下一篇： Codeforces 468C/469E