HTML課堂筆記_第1頁
HTML課堂筆記_第2頁
HTML課堂筆記_第3頁
HTML課堂筆記_第4頁
HTML課堂筆記_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、html （ hyper text markup language 超文本標(biāo)識語言） ;稱為 html 文件，也稱web 文件 ;（ www world wide web 萬維網(wǎng) ）如何創(chuàng)建一個(gè)web 文件步驟：1 、 右鍵新建一個(gè)記事文本2 、 修改文本的后綴名.html 或者 .htm（必須統(tǒng)一）網(wǎng)頁名稱命名的規(guī)范：1 、 無空格2、無特殊符號（例如符號），只可以有下劃線_”，只可以為英文、數(shù)字3、區(qū)分大小寫4、首頁文件名默認(rèn)為：index.html（ 一個(gè)項(xiàng)目中只能有一個(gè) index）5、最好不要中文命名（容易出現(xiàn)bug）裝以下幾個(gè)瀏覽器：ie 9 以上 谷歌（google-chrome

2、）火狐（ firefox ）微軟雅黑microsoft yaheihtml 文件結(jié)構(gòu)：<html> 根標(biāo)簽（也就是最外面的）<head> - 頭部（不在網(wǎng)頁上顯示，類似幕后工作者）<head> 標(biāo)簽里代碼的作用：給整個(gè)文件注釋說明的內(nèi)容<meta charset= “ utf-8" /><meta> 是個(gè)單標(biāo)簽，作用：定義字符集、關(guān)鍵字、描述、作者、刷新等charset 是設(shè)置字符集utf-8 、 gb2312 （ GBK）后面兩個(gè)字體表示中文<title> 我的自定義標(biāo)題</title>作用：網(wǎng)頁的

3、標(biāo)題，可以為中文，不能過長，12 個(gè)中文字符左右</head><body>于臺前演員）軀干 （網(wǎng)頁只顯示body 的內(nèi)容，相當(dāng)</body></html>< !doctype html >（ w3c 是歐洲一個(gè)pc 組織的簡寫，專門制定相關(guān)的規(guī)則）<meta name=" keywords " content=" 教育,清華,5g,it,在線教育" />keywords- 關(guān)鍵字關(guān)鍵的單詞，之間用半角（英文）的逗號隔開;作用：用來標(biāo)記搜索引擎在搜索你的頁面時(shí)所取出的關(guān)鍵詞；<m

4、eta name=" description " content=" 此處寫一段比較精煉的話，和你的業(yè)務(wù)范圍相關(guān)" />description-描述作用: 用來描述該網(wǎng)站的主題中心思想,不能過長；<meta name="author" content=" 吳昊 " />作用: 用來標(biāo)記文檔的作者<tag> 標(biāo)簽、元素、節(jié)點(diǎn)bgcolor=#f90 給整體文檔定義背景顏色<body bgcolor ="yellow" ></ body >16進(jìn)

5、制的rgb顏色值一0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f格式：#aa（紅色）bb（綠色）cc（藍(lán)色）#ff9900-可以簡寫成 #f90#ababab不可以簡寫圖片格式：jpg （jpeg）-真彩色較高，圖片比較飽滿，容量適中。png-可以顯示透明背景的圖片，容量較大。gif-256位的顏色，符合網(wǎng)頁顯示，真彩色較低，但是它圖片的容量大小比較小。（動(dòng)畫除外）background="路徑 url”路徑：絕對路徑、相對路徑參考點(diǎn)不同：參考硬盤當(dāng)前的文件絕對路徑：前端教程講義html4.0 和css2.0相對路徑：././xxx.jpg ./表示返回文件的上一級目錄

6、text=#ff6666定義的顏色將應(yīng)用于整篇文檔的字體。<p></p> 標(biāo)簽，表示段落<br /> 表示換行<p align= ” #” >.</p>（#=left, center, right）文字的 x 軸（水平方向）的對齊方式；<font></font> 標(biāo)簽，表示文本每個(gè)標(biāo)簽含有各自的屬性，沒有的屬性不能自行添加；屬性：color- 字體顏色size- 字體的大小<font color=# size=#>size=1, 2, 3, 4, 5, 6, 7代碼里的空格寫再多，網(wǎng)頁上只能顯示一個(gè)

7、空格；&nbsp; 符號代表空白占位符（空格），可以寫多個(gè)；<i>傾斜文本</i>- 傾斜<em>傾斜文本</em><b>粗體文本</b>- 加粗<strong> 粗體文本 </strong><u>下劃線文本</u>-下劃線<s>刪除線文本</s>-刪除線html注釋-內(nèi)容不會在瀏覽器窗口顯示格式：<!-寫你注釋的內(nèi)容->適用于任何的標(biāo)簽、文本、圖像等等。作用：1、僅僅起到提示作用，方便自己方便他人2、暫時(shí)的將代碼封存，方便臨時(shí)使用

8、快捷鍵：針對hBuild ctrl+/< h1-6> 表示標(biāo)題，默認(rèn)加粗，從大到小排列。< h1>標(biāo)題目錄</h1>- 一般用在大的區(qū)塊中< h2>標(biāo)題目錄</h2><h3>標(biāo)題目錄</h3>< h4> 標(biāo)題目錄</h4>< h5>標(biāo)題目錄</h5>< h6>標(biāo)題目錄</h6><center> 元素一所標(biāo)記的字符居中的元素它的作用與使用<p>元素里的align= " center ”類似<hr /&g

9、t;- 標(biāo)尺線size= " 6-設(shè)定線寬（線的厚度）width="500"-設(shè)定線長（單位可以寫成percent%）align="right"-設(shè)定對齊方式color= "#f90 ” -設(shè)定線的顏色無序列表<ul>< li>此處新聞1條</li>< li>此處新聞2條</li></ul><li>標(biāo)簽里可以再嵌套<ul>或<ol>標(biāo)簽<ul><li>此處新聞二條<ol><li>2

10、222</li></ol></li>有序列表<ol>< li>此處新聞1條</li>< li>此處新聞2條</li></ol>自定義列表<dl>< dt>標(biāo)題，也可以放圖片 </dt>< dd>具體的內(nèi)容11</dd>< dd>具體的內(nèi)容22</dd></dl><a href= "abc.html”> 普通超級鏈接 </a>href 的屬性值為一個(gè)url 地址

11、<a href="#"></a>#表示你要跳轉(zhuǎn)的文件路徑url ；如果你暫時(shí)沒有要跳轉(zhuǎn)的路徑，請使用#替代；-> 點(diǎn)擊<a> 標(biāo)簽后無任何操作（什么都不干）1 、將 href= ” # ”2、暫時(shí)了解：<a href="javascript:;"></a>target= “ _blank"打開鏈接的方式_blank- 表示新開啟一個(gè)空白頁面_self- 表示在自己的頁面上跳轉(zhuǎn)name= ” link”- 給標(biāo)簽起個(gè)名字值是自定義，但要取得有含義，不要過長<img src=

12、” （ 相對）路徑”/> - 單標(biāo)簽它是由含義的（語義化標(biāo)簽），只能放圖片width、height 屬性，單位可以是px ,也可以是 圖片是等比縮放，一般情況下，height 不用設(shè)置。給圖片加一個(gè)邊框，值為邊框的厚度border=title= ”這里寫相關(guān)的文字”作用：當(dāng)鼠標(biāo)懸停在圖片上，會給出一個(gè)提示框alt= ”文本文字”作用：當(dāng)圖片路徑不對或者不存在，會將alt 里的問題顯示出來，用來提示主要用于：數(shù)據(jù)列表類、分類信息、后臺的表格數(shù)據(jù)類、注冊頁面等<table> 元素：定義一個(gè)表格。每一個(gè)表格只有一對<table> 和 </table> ，一張

13、頁面中可以有多個(gè)表格。<tr> 元素：定義表格的行，一個(gè)表格可以有多行，所以<tr>對于一個(gè)表格來說不是唯一的。<td> 元素：定義表格的一個(gè)單元格。每行可以有不同數(shù)量的單元格，在<td> 和 </td> 之間是單元格的具體內(nèi)容。border 屬性 - 定義表格邊框的寬度cellspacing="0"-去除單元格之間的間隙cellpadding="0"-去除單元格內(nèi)容與邊界距離width 、 height 屬性 - 單位可以為px 或者 percent%（%是依據(jù)父容器為參照物）<td&g

14、t; 里面可以設(shè)width ，只需第一行<tr> 的 <td> 進(jìn)行設(shè)置就 ok 了，最后一個(gè)<td> 可以不用設(shè)置；align= ” left/center/right ”設(shè)置文本水平方向可以放在<tr> 或 <td> 里面 ;如果 align= ” center ”放在 <table> 標(biāo)簽里，則表示，將整個(gè)table 居于父容器的水平方向中間；如果<td> 里面沒有內(nèi)容，建議寫上&nbsp;valign="top/middle/bottom"垂直方向的對齊方式同樣，可以放在&l

15、t;tr> 或 <td> 里面 ;bgcolor 屬性 - 背景色，可以放在<table><tr><td> 里；background 屬性 - 背景圖片，可以放在<table><tr><td> 里；<caption></caption> 表示表格的標(biāo)題，默認(rèn)居中<thead></thead> 表示表格的頭部（不是必須的）<tbody></tbody> 表示表格的軀干（標(biāo)簽可以省略）<tfoot></tfoot>

16、 表示表格的底部（不是必須的）<th> 標(biāo)簽 - 加粗及居中般表示在表格頭部的終點(diǎn)顯示作用rowspan="2" 一般用在td中，表示上下單元格合并colspan="2"- 用在td合并單元格，表示左右單元格合并；<marquee>hello</marquee> -一跑燈direction 屬性方向 left/right/top/downbehavior 屬性一滾動(dòng)的方式scroll-默認(rèn)滾動(dòng)slide-只滾動(dòng)一次就停止alternate-來回交替滾動(dòng)loop=2/infinite -表示循環(huán)的次數(shù)或者無限次scrol

17、lamount= " 10” -移動(dòng)的速度scrolldelay= " 400” -延時(shí)bgcolor="#097"-底紋顏色width、height -寬和高h(yuǎn)space= " 50" / vspace="50" -表示左邊距和上邊塊元素：div phr form h1 center ul ol litable dl dt-dd內(nèi)聯(lián)元素：span-font img a input select-strong b em i s udl - 自定義列表div 和 span 沒有任何含義，僅僅就是一個(gè)標(biāo)簽而已。表單(f

18、orm)作用：一般用來搜集客戶端的用戶相關(guān)資料信息，然后保存到mysql ；<form></form> 表單標(biāo)簽action ="abc.php" 屬性 - 表示 form 表單提交到abc.php 這個(gè)后臺程序頁面；method ="get/post" 屬性 - 表示表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get 、 post 。(默認(rèn)值是 get )get 方式提交的語法是:xx.php ?Key=val & key=valget 提交方式有兩點(diǎn)缺點(diǎn)：1、 、 get 提交方式，它的容量較小，大約4K；2、

19、 get 提交方式，它的安全性較差；其中 name 屬性是每個(gè)標(biāo)簽都可以有的，根據(jù)需求來決定是否添加；<input> 標(biāo)簽 - 單標(biāo)簽type= ” text ” - 表示文本（也是默認(rèn)值）name="user" - 給 input 起個(gè)名字size= ” 10” -input的長度value= "張三"-給input輸個(gè)默認(rèn)值maxlength="5" - 最大可輸入的字符個(gè)數(shù)<textarea></textarea>-文本域rows= ” 10” - 表示行數(shù)（類似高度）cols= ” 50” - 表示列數(shù)（類似寬度）type 類型：1 、 text - 文本2 、password - 密碼3、

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論