HTML學習日記_第1頁
HTML學習日記_第2頁
HTML學習日記_第3頁
HTML學習日記_第4頁
HTML學習日記_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

1、屬性定義：1. HTML對齊 <h1 align=”center”>2. 字體顏色 <body bgcolor=”yellow”>3. 表格 <table border=”1”>更多參考屬性手冊查找<1>到<6>，字體逐步減小，大于6跟6一樣4. 水平線 <hr /> 例子：<p>This is a paragraph</p><hr /> 5.注釋，不會被顯示出來<!This is a comment >6. 換行 <br>7. 同行間隔 如果不插入其他定義只能空

2、一格應該避免使用的標簽和屬性：標簽描述<center>定義居中的內(nèi)容。<font> 和 <basefont>定義 HTML 字體。<s> 和 <strike>定義刪除線文本<u>定義下劃線文本屬性描述align定義文本的對齊方式bgcolor定義背景顏色color定義文本顏色代替標簽和屬性：8.定義顏色：Bgcolor=” 替換為 style=blackround-color:yellow”style="background-color:yellow”style樣式：9.定義字體： style=”font-fam

3、ily:?”<h1 style="font-family:verdana">A heading</h1>10.定義對齊方式： style=”text-align:center”<h1 style="text-align:center">This is a heading</h1>11. 文本格式化 各種字體<html><body><b>This text is bold</b> 粗體<strong>This text is strong</s

4、trong> 加粗（加重語氣）<big>This text is big</big> 大一號<em>This text is emphasized</em> 強調(diào)字體（以斜體展示）<i>This text is italic</i> 斜體字<small>This text is small</small> 小一號This text contains <sub>subscript</sub> 下標文本This text contains<sup>supersc

5、ript</sup> 上標文本還有<ins>插入字 <del>刪除字</body></html>12. 預格式文本 在預文本上可以直接空格和換行 13. 計算機輸出標簽：常用于顯示計算機/編程代碼Pre：預文本，可以像Word一樣輸入，換行和間隔時不用添加其他代碼<code>定義計算機代碼。<kbd>定義鍵盤碼。<samp>定義計算機代碼樣本。<tt>定義打字機代碼。<var>定義變量。<pre>定義預格式文本。<listing>不贊成使用。使用 &l

6、t;pre> 代替。<plaintext>不贊成使用。使用 <pre> 代替。<xmp>不贊成使用。使用 <pre> 代替。14. 地址：<adress></adress>定義之間的文字都是斜體表示，但是可以跟Word一樣編輯，但是換行要加<br>15. 縮寫和首字母縮寫 abbr/acronym title=”<abbr title="etcetera">etc.</abbr> <acronym title="World Wide Web&qu

7、ot;>WWW</acronym> 鼠標放到etc上會顯示完整16. 文字方向<bdo dir="rtl"> 下一行文字向右，左為lef例子：<bdo dir="rtl">Here is some Hebrew text</bdo>17. 塊引用 長引用<blockquote></blockquote>，一般不需要分段的用短引用<q></q>，用法跟<p></p>一樣。使用 blockquote 元素的話，瀏覽器會插入換行和外邊距

8、，而 q 元素不會有任何特殊的呈現(xiàn)18. 刪除字效果和插入字效果 刪除效果：del>二十</del> 下橫線效果：<ins>十二</ins> 案例：<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> 19. 引用、印證<cite></cite> ，但是主流瀏覽器均不支持 cite 屬性 例子：cite=""定義項目 <dfn>定義項目</dfn>標簽

9、描述<abbr>定義縮寫。<acronym>定義首字母縮寫。<address>定義地址。<bdo>定義文字方向。<blockquote>定義長的引用，會進行縮進處理，自動把間隔去掉<q>定義短的引用語，引用的字體會有雙引號<cite>定義引用、引證，以斜體表示，定義標題（引申帶圖片或者連接）<dfn>定義一個定義項目，跟abbr相同但是更深入，可以包含abbr20. 圖片引用 img src=<img src="img_the_scream.jpg" width="

10、;220" height="277" alt="The Scream">21. 從左向左進行書寫 <bdo dir="rtl">例子：<bdo dir ="rtl">This</bdo> sihT22. 獨立的樣式表，用<head></head>1.  外部樣式表 link例子;<link rel="stylesheet" type="text/css" href="myst

11、yle.css">2. 內(nèi)部樣式 style<style type="text/css"> . </style>3. 內(nèi)斂樣式 直接在內(nèi)部引用<p style="color: red; margin-left: 20px">更多標簽標簽描述<style>定義樣式定義。<link>定義資源引用。<div>定義文檔中的節(jié)或區(qū)域（塊級）。<span>定義文檔中的行內(nèi)的小塊或區(qū)域。<font>規(guī)定文本的字體、字體尺寸、字體顏色。不贊成使用。請使用樣式。

12、<basefont>定義基準字體。不贊成使用。請使用樣式。<center>對文本進行水平居中。不贊成使用。請使用樣式。23. 超鏈接 把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈?有兩種： href 創(chuàng)建指向另一個文檔的鏈接 name 創(chuàng)建文檔內(nèi)的書簽 而如果在定義的網(wǎng)址后面加上target屬性，可以定義被連接的文本在何處顯示，例如target="_blank"，則會在新窗口中打開<a href=" target="_blank">Visit W3School!</a>Name案例然后

13、創(chuàng)建指向該文本的的連接<a name="tips">文本</a>首先要先對跳轉(zhuǎn)的文本進行命名同一頁面內(nèi)：<a href="#tips">文本</a>其他頁面內(nèi)：<a href="命名尾部添加#命名，可以直接轉(zhuǎn)到指向位置，不然無法跳轉(zhuǎn)24.HTML圖像1.插入圖像 URL為圖片的引用地址，例如<img src="url" />2.Alt：替換文本屬性，當圖片無法顯示時展示，Big Boat是顯示的信息<img src="boat.gif"

14、; alt="Big Boat">3.圖片對齊方式：align=Bottom，middle，top，默認的是bottom例子：<p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>4.圖片尺寸：例子：<img src="/i/eg_mouse.jpg" width="50" height="50">5.設(shè)置圖片鏈接：<a href="/example

15、/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>圖像標簽標簽描述<img>定義圖像。<map>定義圖像地圖。<area>定義圖像地圖中的可點擊區(qū)域。6.Area應用<area shape="circle" coords="129,161,10">25.表格1.表格由 <table> 標簽來定義。每個表格均有若干行（由 <

16、tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell

17、2</td></tr></table>顯示邊框：border="1"，不顯示就是02.表頭加粗：表格的表頭使用 <th> 標簽進行定義，粗體居中空單元顯示：<td>&nbsp;</td>3.列表：<ul></ul>,點用<li><ul><li>蘋果</li><li>香蕉</li></ul>· 蘋果· 香蕉4.單元格邊距:(Cell padding)周邊的間距案例：<

18、;table border="1" cellpadding="10">5.增加單元格間距：cellspacing=”XXX” 距離右邊界的距離,距離是毫米單位<table border="1" cellspacing="10">6. 單元格添加背景：<table border="1" background="/i/eg_bg_07.gif">7. 表格內(nèi)容排列align= ，后面帶屬性靠左： <th align="left&quo

19、t;>靠右： <td align="right">消費項目.一月二月衣服$241.10$50.20框架屬性：frame=例子：<table frame="box"> MonthSavingsJanuary$10026. 列表一無序 <ul><li>Coffee</li><li>Milk</li></ul>二有序<ol><li>Coffee</li><li>Milk</li></ol>

20、1. Coffee2. Milk三自定義列表：<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>CoffeeBlack hot drinkMilkWhite cold drink四列表標簽標簽描述<ol>定義有序列表。<ul>定義無序列表。<li>定義列表項。<dl>定義定義列表。<dt>定義定義

21、項目。<dd>定義定義的描述。<dir>已廢棄。使用 <ul> 代替它。<menu>已廢棄。使用 <ul> 代替它。塊元素HTML 內(nèi)聯(lián)元素 <div> 和 <span>div應用：可定義文檔中的分區(qū)或節(jié)，把文檔分割為獨立的、不同的部分。案例：<body> <h1>NEWS WEBSITE</h1> <p>some text. some text. some text.</p> . <div class="news">

22、<h2>News headline 1</h2> <p>some text. some text. some text.</p> . </div> <div class="news"> <h2>News headline 2</h2> <p>some text. some text. some text.</p> . </div> .</body><span> ：標簽被用來組合文檔中的行內(nèi)元素。案例：<p>&

23、lt;span>some text.</span>some other text.</p>Header：頁眉背景顏色：blackground-color文本顏色:text-color行高：line-height，行高是指文本行基線之間的距離Float：屬性定義元素在哪個方向浮動，left等等Nav：定義導航案例：#nav line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; line-height:30px background

24、-color:#qqqq height:300 width:100float:left <section>：標簽定義文檔中的節(jié)（section、區(qū)段）案例：section width:350px; float:left; padding:10px;Footer：定義頁腳footer background-color:black; color:white; clear:both; text-align:center; padding:5px; Id:作鏈接錨，引用27. HTML 響應式 Web 設(shè)計：以可變尺寸傳遞網(wǎng)頁<!DOCTYPE html> 指示 we

25、b 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫lang 屬性規(guī)定元素內(nèi)容的語言:<p lang="fr"> 規(guī)定<p>內(nèi)使用法文Margin：設(shè)置外邊距屬性，margin: 5pxborder: 1px solid black：將該border的樣式定義為寬度是一個像素,顏色為黑色,且顯示為實線<meta> :可提供有關(guān)頁面的元信息iframe ：用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁案例：<iframe src="demo_iframe.htm" width="200" height="200"></iframe>frameset cols：框架，窗口顯示多個頁面排版案例：<frameset cols="25%,75%">Bgcolor：背景顏色（三種表示方式）案例：<body bgcolor="#000

溫馨提示

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

最新文檔

評論

0/150

提交評論