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 編碼:(前三個比較常用)
> >< <  空格& &" " ”三、格式標簽
<p></p> //段落標簽
<p? align="right">
這是一段文本
</p>
<p align=center? >
這是中間的一段文本
</p>
<p align="left">
這是下面的一段文本
</p>
<br /> //換行
<nobr></nobr>
<blockquote></blockquote> //縮進 在它中間加入的文本,會按縮進的形式顯示 用它的結果好象設置了 leftmarign,實驗發現是兩端縮進
<center></center> //居中? html5中過時了
<marquee></marquee> //動感
<marquee behaiver=scroll direction =up></marquee>
behaiver: slider,alternate,scroll
direction:up ,down,left, right
<dl></dl> //創建列表
<dt></dt>
<dd></dd>
<dl><dt>小標題</dt><dd>aaa<dd><dd>bbb<dd><dd>ccc<dd><dt>小標題</dt><dd>xxx<dd><dd>vvv<dd><dd>bbb<dd></dl><ol></ol> //有序列表? 創建帶有數字序號的列表 o 就是order的意思,它有 type =1,a 這類屬性
<ol type="a"><li>這是內容</li><li>這是內容</li><li>這是內容</li><li>這是內容</li></ol><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 廢棄
五、超鏈接標簽
<a href="http://www.baidu.com" >去百度</a>href 屬性,指向的是一個url
什么是URL :
在internate上的任何資源,包括html網頁,圖片及應用程序等等,它們都有一個能保證,其單一的命名方案,中文稱為統一資源定位符。
href 屬性,可以指向一個地址,也可是以是一個應用程序或zip壓縮文件
<a> 中間的內容 </a> //這里 "中間的內容" 可以是文字,圖片,flash,其他的html元素等
<a href="http://www.baidu.com" ><img src="lengtu.jpg" /></a>說明: 中間的圖片,默認會有一個邊框,想把它去掉,可以在圖象標簽上加上? border=0 即可
<a href="mailto:aaa@sina.com?subject=我要留言" >ddd</a>(前提是,你電腦要安裝了mailto才可以哦)
超鏈接的 target 屬性,可以指定目標頁面的顯示位置
<a href="main.html" target="_blank" >測試</a>超鏈接的定位功能
1) 要在定位的地方寫上 <a name="pos1"> ?
2) 鏈接寫為 <a href="#pos1" >測試</a>
<body><a href="#p1">第一章</a> <a href="#p2">第二章</a><a href="#p3">第三章</a><a name=p1 > //定位標記<p>第一章<br>...<br>...<br>...<br>...<br></p><a name=p2> //定位標記<p>第二章<br>...<br>...<br></p><a name=p3> //定位標記<p>第三章<br>...<br>...<br></p></body>附: 也可以定位到別的頁面上
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>六、圖象標簽
<img src="lengtu.jpg" />
border //邊框
alt? //圖象不存在的時候,出現的文字 <img src="lengtu.jpg" title="鼠標滑過圖片時出現的文字" alt="這是圖片不存在的時候出現的文字" />
title //鼠標滑過圖片時出現的文字
width
height
圖文混排
<img src="lengtu.jpg" align="left" hspace="20" vspace="80">web 上支持的圖片格式
Gif (圖形交換格式) 最多能保存256 色,支持透明色,支持動畫效果
Jpeg(聯合圖象專家組) 不支持透明,最多可支持1670 萬種色彩
Png(網絡可移植) 支持透明,不支持動畫,最多1670萬種
注意,png 在ie6 下,背影透明是有問題的,在ie6下它的透明就不透了
絕對路徑:提供目標文檔的完整主機名,路徑信息,及文檔全稱
相對路徑:從檔前文檔開始的路徑
--? 如當前文檔和目標文檔位置平行,則直接書寫目標文檔
--? 如當前文檔和目標文檔所在的文件夾位置平行,則書寫為文件夾名/目標文檔名 //即html高一級
--? 如果當前文檔所在的文件夾和目標文檔位置平行,則寫為 ../目標文檔名 //即圖片高一級
根相對路徑:從站點根目錄開始的路徑 以/開頭
<hr />
size //線的上下寬度
noshade //不顯示陰影 (只寫上 noshade 即可)
color
width //線的左右寬度
七、圖象地圖
把一副圖象分成多個區域,每個區域都指向不同的url地址,這些區域稱為熱點。
<img src="lengtu.jpg" usemap="#mymap" /><map name="mymap"><area shape="rect" coords="0,0,50,50" href=a.html alt="aaa"><area shape="rect" coords="50,50,10,10" href=b.html alt="bbb"><area shape="circle" coords="80,100,60" href=b.html alt="bbb" alt="xxx"></map>shape
rect 四邊形
poly 多邊形
circle 圓形 圓心坐標和半徑
八、表格
表格,行列對齊,主要用來進行布局,表格中可以放入任意內容
<table></table>
屬性
bgcolor //背景色
border //邊框
bordercolor
bordercolorlight //邊框明亮部的顏色 只有在border>0時才效
bordercolordark
cellspacing //表格單元格之間的距離? 墻的厚度
cellpadding //表格中的內容,距邊框的距離
width? //表格寬度,可以取百分比,或絕對的值
height
<table border=5 width=100% cellpadding=20 cellspacing=0 bordercolorlight=white bordercolordark=black bgcolor="silver" ><tr><td>數據</td><td>數據</td><td>數據</td></tr><tr><td>數據</td><td>數據</td><td>數據</td></tr> </table>?<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 設為其他顏色
<table width=50% border=0 cellspacing=1 bgcolor=blue><tr bgcolor="white"><td>數據</td><td>數據</td><td>數據</td></tr><tr bgcolor="silver"><td>數據</td><td>數據</td><td>數據</td></tr> </table>如何讓表格只顯示邊框 里面的格不顯示?
rules 屬性
<table rules= none>? //只留外框
<table rules="rows"> //只留外框和水平方向的線
表格還有一個frame 屬性
可以控制哪些線顯示,哪些隱藏
<table frame=above>十、 幀標簽
1) frameset
<frameset rows="20%,30%,*"><frame src="top.html" ></frame><frame src="second.html"></frame><frame src="down.html"></frame> </frameset>//frameset 不能嵌套在body標簽中,但可以放在html標簽中
border : 表示邊框的寬度,如果0就看不到了
frameborder :
noresize="noresize" //不可以再調整大小
例子: 嵌套的 frameset???
<frameset rows="20%,*" ><frame src="top.html" frameborder=yes ></frame><frameset cols="15%,*"><frame src="left.html"></frame><frame src="welcome.html" ></frame></frameset> </frameset>附: left.html?? ????
<body><ul><li><a href="user_add.html" target="centerFrame" >用戶添加</a></li> <li><a href="#" >用戶刪除</a></li> <li><a href="#" >原料管理</a></li> <li><a href="#" >商品管理</a></li> </ul> </body>超鏈接的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>?//例子,另外一種布局方式
<frameset rows="20%,*"><frame src="top.html"></frame><frame src="iframetest.html"></frame> </frameset>十一、表單標簽
1)表單
<form ></form>
--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="hidden" > 隱藏域
<input type="image" src="lengtu.jpg" >? //圖象提交按鈕
<select name="school">? //下拉框
<option value="chengdong">成棟</option>
<option>黑大</option>? //如果不寫value,則將中間的文本提交上去
<option>東方</option>
<option>guangshas</option>
</select>
-- size 屬性? 表示上面顯示出幾個
-- multiple
-- selected
<select name="group" > //帶分組的<optgroup label="第一組"><option>張三</option><option>張四</option><option>張五</option><option>張六</option></optgroup><optgroup label="第二組"><option>張1三</option><option>張2三</option><option>張3三</option><option>張4三</option></optgroup> </select><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
<meta name="某個設置值" content="對該值設置進行具體補充說明的信息"><meta http-equiv="某個設置值" content="對該值進行具體的補充說明信息">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?
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
-- Refresh 模擬刷新的消息頭
<meta http-equiv ="Refresh" content="1;url=http//:www.baidu.com">? //一秒鐘以后刷的百度
有的時候,用戶的留言可能就是上面的這語句,用來做惡作劇
-- Expires 用于設置網頁的到期時間? //有的網頁會被緩存,如果超過了這個頭中指定的日期,瀏覽器必須到指定的地點下載這個網頁和它配對的 content 的值應該是個時間格式的文本<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:20 GMT">將content設置為0 可以禁止瀏覽器使用緩存頁面
--Pragma
可以禁止瀏覽器在本地計算機上緩存當前頁面
這時content 的屬性應設置為 no-cache
<meta http-equiv="Pragma" content="no-cache">
--Cache-Control
<meta http-equiv="Cache-Control" content="no-cache"> //http1.1中. 這個更可靠
--Page-Enter 和 Page-Exit 設置瀏覽器則進入或退出一個頁面的時候,采用的顯示效果 (旋入,轉出等)
<meta http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">
--Windows-target 強制面頁在某個窗口顯示
例如,要防止自己的網頁被別人當作一個frame頁面調用,可以使用
<meta http-equiv="Windows-Target" content="_top">
十三、頭元素
<head></head>
頭元素是指位于 中間的元素
<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連接的兩個資源之間的關系類型,這兩個必須有一個
<link rel=stylsheet type=text/css href="url">
<link rel="Shortcut Icon" href="aaa.ico"> 自定義收藏下面的圖標
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