https://blog.csdn.net/u013047859/article/details/51485496
1.HTML：Hyper Text Markup Language(超文本標記語言.)

文本:就是一個文件，包含一部分的文本內容.

標記語言：標記語言都是由標籤組成. 一般情況下，標籤分爲開始和結束標籤.

[html] view plain copy
1.<font></font>

也有個別的標籤：不需要結束. 例如<br/>
•HTML的特點： •不區分大小寫. <Font></font>
•個別的標籤可以沒有結束.

•HTML的結構

[html] view plain copy
1.<html>

<head>
</head>
<body>
</body>
6.</html>

寫在head的title中內容會顯示到標題欄.寫在body標籤中的內容會顯示到頁面的內部.

2.meta 標記：
meta標記用於定義文件信息，是對網頁文件進行說明，便於搜索引擎查找。放置於<head></head>之間。
用meta設置關鍵字：
<meta name = "keywords" content = "關鍵字">多個關鍵字用“,”分隔。
設置描述：<meta name = "description" content = "對關鍵字的擴展說明">
設置作者：<meta name = "author" content = "作者名">
設置字符集：<meta http-equiv = "content-type" content = "text/html;charset = gb2312">
編碼格式：GB2312編碼佔用2個字節，UTF-8佔用3個字節，如果網頁文字較多，選擇GB2312編碼。
設置頁面定時跳轉：<meta http-equiv = "refresh" content = "2;URL = http://www.baidu.com"/>裏面的2，代表2秒
上面的幾個地方需要特別注意：
1.http-equiv之間不能加空格，否則沒用，也就是不能寫成“http - equiv”！
2.content-type也是一個整體，不能以空格分隔。

3.圖片標記：
圖片標記使用<img>標籤就可以在頁面中引入一張圖片.

[html] view plain copy
1.<img src=”4.jpg”>

src:就代表的是圖片的路徑

Src要注意圖片的路徑問題.
圖片與文件在同一層路徑！
圖片與文件不在同一層路徑！
Width：代表圖片的寬度
Height:代表圖片的高度
Alt:圖片的提示

[html] view plain copy
1.<img src="../img/4.jpg" width="100" height="150" border="10" alt="美女!!!">

4.語義標籤

<span>沒有語義的標籤，作用爲設置單獨的樣式</span>

<q>簡短文本的引用</q>

<blockquote>縮進文本，引用長段落</blockquote>

<br />換行

<hr />水平分割線

空格

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

[html] view plain copy
1.<ul>

<li>信息</li>
<li>信息</li>
......
5.</ul>

有序列表：<ol><li> 有序列表 </li></ol>

[html] view plain copy
1.<ol>

<li>信息1</li>
<li>信息2</li>
......
5.</ol>

<div>欄目板塊，作爲容器</div>

<div id="版塊名稱">給網頁獨立板塊增加ID標記</div>

html註釋 5.表格 eg: [html] view plain copy 1. 2. 3. 4. 5.認識table表標籤 6. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.

2012年到2013年庫存記錄
產品名稱	品牌	庫存量（個）	入庫時間
耳機	聯想	500	2013-1-2
U盤	金士頓	120	2013-8-10
U盤	愛國者	133	2013-3-25

40. 41. 1）…

：整個表格以標記開始、

標記結束。 2）…：當表格內容非常多時，表格會下載一點顯示一點，但如果加上標籤後，這個表格就要等表格內容全部下載完纔會顯示。如右側代碼編輯器中的代碼。 3）…：表格的一行，所以有幾對tr 表格就有幾行。 4）…：表格的一個單元格，一行中包含幾對...，說明一行中就有幾列。 5）…：表格的頭部的一個單元格，表格表頭。 6）表格中列的個數，取決於一行中數據單元格的個數。 7) 8) 6. 1)本瀏覽器原窗口打開鏈接：鏈接顯示的文本在新建瀏覽器窗口中打開鏈接： click here! 2)對此影評有何感想，發送郵件給我 7.標籤，爲網頁插入圖片 [html] view plain copy 1.

alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本； src:就代表的是圖片的路徑 [html] view plain copy 1.

8. 1）用戶名:密碼: 2）文本輸入框、密碼輸入框語法： [html] view plain copy 1. 2. 3. *type：當type="text"時，輸入框爲文本輸入框; 當type="password"時, 輸入框爲密碼輸入框。 *name：爲文本框命名，以備後臺程序ASP 、PHP使用。 *value：爲文本輸入框設置默認值。(一般起到提示作用) 3)文本域，支持多行文本輸入 [html] view plain copy 1. 注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替 4)使用單選框、複選框，讓用戶選擇 [html] view plain copy 1. *type: 當 type="radio" 時，控件爲單選框當 type="checkbox" 時，控件爲複選框 *value：提交數據到服務器的值（後臺程序PHP使用） *name：爲控件命名，以備後臺程序 ASP、PHP 使用 *checked：當設置 checked="checked" 時，該選項被默認選中注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子爲同一個名稱“radioLove”，這樣同一組的單選按鈕纔可以起到單選的作用。 [html] view plain copy 1. 2. 3. 4. 5.單選框、複選框 6. 7. 8. 9. 性別: 10. 男 11. 12. 女 13. 14. 15. 16. 5)使用下拉列表框，節省空間 [html] view plain copy 1. 2. 3. 4. 5.下拉列表框 6. 7. 8. 9. 愛好: 10. 16. 17. 18. selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。 type：只有當type值設置爲submit時，按鈕纔有提交作用 value：按鈕上顯示的文字 7）使用重置按鈕，重置表單信息。 [html] view plain copy 1. 8）form表單中的label標籤 [html] view plain copy 1. 注意：標籤的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。 eg: [html] view plain copy 1. 2. 男 3. 4.
5. 女 6. 7. 輸入你的郵箱地址 8. 9. 9）placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段爲空時顯示，並會在字段獲得焦點時消失。註釋：placeholder 屬性適用於以下的類型：text, search, url, telephone, email 以及 password。 10. 1) [html] view plain copy 1. p:選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。 span{ } 2)CSS註釋語句：用 /*註釋語句*/ 來標明 3)內聯式css樣式，直接寫在現有的HTML標籤中。並且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。 [html] view plain copy 1.

這裏文字是紅色。

4)外部式css樣式，寫在單獨的一個文件中 [html] view plain copy 1. 5）CSS樣式優先級就是--就近原則（離被設置元素越近優先級別越高）。 11. 1）選擇器。每一條css樣式聲明（定義）由兩部分組成，形式如下： [html] view plain copy 1.選擇器{ 2.樣式; 3.} 2)標籤選擇器 [html] view plain copy 1.p{font-size:12px;line-height:1.6em;} 上面的css樣式代碼的作用：爲p標籤設置12px字號，行間距設置1.6em的樣式。 3)類選擇器 [html] view plain copy 1..stress{color:red;}/*類前面要加入一個英文圓點*/ [html] view plain copy 1.膽小如鼠 4）ID選擇器 [html] view plain copy 1.認識html標籤 2. [html] view plain copy 1.綠色的字體 5）類和ID選擇器的區別相同點：可以應用於任何元素不同點： ① ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。 ②可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。如正確代碼示範： [html] view plain copy 1..stress{ 2. color:red; 3.} 4..bigsize{ 5. font-size:25px; 6.} 7.

到了三年級下學期時，我們班上了一節公開課...

錯誤代碼示範： [html] view plain copy 1.#stressid{ 2. color:red; 3.} 4.#bigsizeid{ 5. font-size:25px; 6.} 7.

到了三年級下學期時，我們班上了一節公開課...

6）子選擇器 [html] view plain copy 1..food>li{border:1px solid red;} 添加邊框樣式（粗細爲1px，顏色爲紅色的實線 [html] view plain copy 1..first>span{border:1px solid red;} 7）包含(後代)選擇器 [html] view plain copy 1..food li{border:1px solid red;} 總結：>作用於元素的第一代後代，空格作用於元素的所有後代。 8）通用選擇器 [html] view plain copy 1.* {color:red;font-size:20px;} 通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色： 9）僞類選擇符比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色： [html] view plain copy 1.a:hover{color:red;font-size:20px;} 10)分組選擇符 [html] view plain copy 1.h1,span{color:red;} 它相當於下面兩行代碼： [html] view plain copy 1.h1{color:red;} 2.span{color:red;} 12. 1）繼承。有些CSS樣式具有繼承性，但border:1px solid red;不具備。 2）特殊性。標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100 [html] view plain copy 1.p{color:red;} /*權值爲1*/ 2.p span{color:green;} /*權值爲1+1=2*/ 3..warning{color:white;} /*權值爲10*/ 4.p span.warning{color:purple;} /*權值爲1+1+10=12*/ 5.#footer .note p{color:yellow;} /*權值爲100+10+1=111*/ 3）層疊。層疊就是在html文件中對於同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。 [html] view plain copy 1.p{color:red;} 2.p{color:green;} 3.

三年級時，我還是一個膽小如鼠的小女孩。

理解爲就近原則就好了。 4）重要性。!important [html] view plain copy 1.p{color:red!important;} 2.p{color:green;} 3.

三年級時，我還是一個膽小如鼠的小女孩。

這時 p 段落中的文本會顯示的red紅色。 13. 1）文字排版--字體。 [html] view plain copy 1.body{font-family:"Microsoft Yahei";} [html] view plain copy 1.body{font-family:"微軟雅黑";} 注意：第一種方法比第二種方法兼容性更好一些。 2）文字排版--字號、顏色。 [html] view plain copy 1.body{font-size:12px;color:#666} 3)文字排版--粗體。 [html] view plain copy 1.p span{font-weight:bold;} 4)文字排版--斜體。 [html] view plain copy 1.p a{font-style:italic;} 2. 3.

三年級時，我還是一個膽小如鼠的小女孩。

5)文字排版--下劃線。 [html] view plain copy 1.p a{text-decoration:underline;} 6)文字排版--刪除線。 [html] view plain copy 1..oldPrice{text-decoration:line-through;} [html] view plain copy 1.

原價：300元現價：230 元

7)段落排版--縮進。 p{text-indent:2em;} 8)段落排版--行間距（行高）。 [html] view plain copy 1.p{line-height:2em;} 9)段落排版--中文字間距、字母間距。 [html] view plain copy 1.h1{letter-spacing:50px;} 10)段落排版--對齊。 [html] view plain copy 1.div{text-align:center;} /*可以爲center、left、right*/ 11）縮寫 [html] view plain copy 1.body{ 2. font-style:italic; 3. font-variant:small-caps; 4. font-weight:bold; 5. font-size:12px; 6. line-height:1.5em; 7. font-family:"宋體",sans-serif; 8.} [html] view plain copy 1.body{ 2. font:italic small-caps bold 12px/1.5em "宋體",sans-serif; 3.} 14.CSS盒模型。 1）元素分類。在CSS中，html中的標籤元素大體被分爲三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。常用的塊狀元素有：

、

...

、
、
、
、

、

、
常用的內聯元素有：、、
、、、、、、、、常用的內聯塊狀元素有：、 2)內聯塊狀元素 [html] view plain copy 1.display:inline-block; 3)盒模型--邊框 [html] view plain copy 1.div{border:2px solid red;} 相當於： [html] view plain copy 1.div{ 2. border-width:2px; 3. border-style:solid; 4. border-color:red; 5.} 注意： ①、border-style（邊框樣式）常見樣式有： dashed（虛線）| dotted（點線）| solid（實線）。 ②、border-color（邊框顏色）中的顏色可設置爲十六進制顏色，如: border-color:#888;//前面的井號不要忘掉。 ③、border-width（邊框寬度）中的寬度也可以設置爲： thin | medium | thick（但不是很常用），最常還是用象素（px）。 ④、單方向的邊框。 [html] view plain copy 1.border-top:1px solid red; 2.border-bottom:1px solid red; 3.border-right:1px solid red; 4.border-left:1px solid red; 4）盒模型--寬度和高度 [html] view plain copy 1.div{ 2. width:200px; 3. padding:20px; 4. border:1px solid red; 5. margin:10px; 6.} 5）盒模型--填充。 [html] view plain copy 1.div{padding:20px 10px 15px 30px;} 相當於： [html] view plain copy 1.div{ 2. padding-top:20px; 3. padding-right:10px; 4. padding-bottom:15px; 5. padding-left:30px; 6.} 6）盒模型--邊界。 [html] view plain copy 1.div{margin:20px 10px 15px 30px;} 相當於： [html] view plain copy 1.div{ 2. margin-top:20px; 3. margin-right:10px; 4. margin-bottom:15px; 5. margin-left:30px; 6.} 15.css佈局模型。 1）流動模型（Flow） 2）浮動模型 (Float) [html] view plain copy 1.div{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. float:left; 6.} 7. 8. [html] view plain copy 1.div{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5.} 6.#div1{float:left;} 7.#div2{float:right;} 3）層模型（Layer）層模型有三種形式： 1、絕對定位(position: absolute) [html] view plain copy 1.div{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. position:absolute; 6. left:100px; 7. top:50px; 8.} 9. 2、相對定位(position: relative) [html] view plain copy 1.#div1{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. position:relative; 6. left:100px; 7. top:50px; 8.} 9. 10. 3、固定定位(position: fixed) [html] view plain copy 1.#div1{ 2. width:200px; 3. height:200px; 4. border:2px red solid; 5. position:fixed; 6. left:100px; 7. top:50px; 8.} 9.文本文本文本文本文本文本文本文本文本文本文本文本。 4）Relative與Absolute組合使用。 1、參照定位的元素必須是相對定位元素的前輩元素： [html] view plain copy 1. 2. 相對參照元素進行定位 3. 從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了） 2、參照定位的元素必須加入position:relative; [html] view plain copy 1.#box1{ 2. width:200px; 3. height:200px; 4. position:relative; 5.} 3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。 [html] view plain copy 1.#box2{ 2. position:absolute; 3. top:20px; 4. left:30px; 5.} 這樣box2就可以相對於父元素box1定位了（這裏注意參照物就可以不是瀏覽器了，而可以自由設置了）。 16、單位和值。 1）顏色值： ①英文命令顏色。 [html] view plain copy 1.p{color:red;} ②這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。 [html] view plain copy 1.p{color:rgb(133,45,200);} [html] view plain copy 1.p{color:rgb(20%,33%,25%);} ③十六進制顏色。這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。 [html] view plain copy 1.p{color:#00ffff;} 且可以簡寫爲p{color:#0ff；} 2）長度值。 [html] view plain copy 1.p{font-size:12px;text-indent:2em;} [html] view plain copy 1.p{font-size:14px} 2.span{font-size:0.8em;} [html] view plain copy 1.p{font-size:12px;line-height:130%} 17、css樣式設置小技巧 1）水平居中設置-行內元素。text-align:center 2)水平居中設置-定寬塊狀元素。 [css] view plain copy 1. 3）clear:both清除浮動。 18、標籤定義多行的文本輸入控件。 [html] view plain copy 1.<textarea name="summary" cols="60" rows="5" onchange="message()">請寫入個人簡介，不少於200字！通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。web 0 分享微博 QQ 微信收藏上一篇：所見不爲真--圖片格式文件檢測p... 下一篇：html文檔 qq5a2902d647d79 45篇文章，3W+人氣，0粉絲 Ctrl+Enter 發佈發佈取消推薦專欄更多 Web網站安全評估分析及防禦企業級網安運維共30章 | simeon2005 ￥51.00 337人訂閱訂閱 JavaScript全棧工程師養成記 20年軟件開發心法共17章 | 邊城__ ￥51.00 320人訂閱訂閱猜你喜歡 ajax請求方式 html文檔 CSS的浮動及其在佈局中的應用一站式手把手教你學習Sublime Text 3（插件安裝、html/css速寫、輸入法不跟光標等）超級絢麗，20款前端動畫特效，轟炸你的眼睛【基礎】EM 還是 REM？這是一個問題！動效，一種屬於前端程序員的浪漫，無與倫比的體驗相對定位與絕對定位的分析測試掃一掃,領取大禮包 0 分享 qq5a2902d647d79

html基礎

...

、
、
、
、

45篇文章，3W+人氣，0粉絲

推薦專欄更多

企業級網安運維

共30章 | simeon2005

￥51.00 337人訂閱

20年軟件開發心法

共17章 | 邊城__

￥51.00 320人訂閱

猜你喜歡

詐騙（殺豬盤）網站進行滲透測試

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

外行也能讀懂的網絡硬件設備功能原理速成

DAY 6 面向對象

day6 socket的實現

ajax請求方式

html基礎

re模塊

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結