標籤：
HTML知識點總結第一章：知識總結<!DOCTYPE html >
*註：<!DOCTYPE> 標籤沒有結束標籤！
<html >
<head>（頭部部分）
<meta http-equiv=“Content-Type”content=“text/html”; charset=gb2312 >(可寫可不寫)
<title>顯示在瀏覽器標題列中的標題</title>
</head>
<body>（主體部分）
（頁面內容）
</body>
</html>
標籤<body>中的屬性有：
bgcolor=顏色 （背景顏色） background=圖片的絕對路徑或相對路徑（背景圖片）
1) <H1>一級標題</H1>
2) <H2>二級標題</H2>
3) <H3>三級標題</H3>
4) <H4>四級標題</H4>
5) <H5>五級標題</H5>
6) <H6>六級標題</H6>
3.<font></font>標籤（設定文字屬性）
<font size="字型大小" color="字型顏色" face="字型類型">要設定的文字</font>
4.特殊符號
特殊符號 |
代碼 |
空格 |
|
大於符號(>) |
> |
小於符號（<） |
< |
引號 |
" |
著作權號（©） |
© |
5.行的控制相關標籤
段落標籤<p></p>
<p align="left" (靠左對齊)/ "right" (靠右對齊)/ "center" (置中)>(段落的對其方式)
換列標籤<br />
6.圖片標籤<img>
<img src="圖片地址" width="圖片寬度" height="圖片高度" alt="圖片的提示文字"
align="top/bottom/middle/left/right" border="圖片的邊框寬度">
(align是用於調整圖片相對於周圍文本的對其方式)
7.文字布局
1) 水平線<hr size="厚度" width="寬度" color="顏色">
2) 有序列表的文法
<ol type=序號類型>（序號類型有：1、a、A、ⅰ、I）
<li>填寫資訊</li>（必須用<li></li>將內容包括起來）
<li>填寫資訊</li>
<li>填寫資訊</li>
……
</ol>
3) 無序列表文法
<ul type="序號類型">（序號類型有：disc(預設值,實心圓點)、circle(空心圓環)、square(空心正方形)）
<li>所寫內容<li>（必須用<li></li>將內容包括起來）
</ul>
4) 預格式文本文法
<pre>
(具體的文字格式設定，這個格式在時是不改變的哦！)
</pre>
8.頁面連結文法
1) 連結到其他頁面
<a href=“連結地址”>串連標誌 </a>
2) 連結到本頁面
首先建立一個錨連結的錨記點：<a href=“#錨記點名稱”>主題名稱</a>
然後在具體要連結到的地方設定name:<a name=“錨記點名稱”></a>
（錨記點前面要加上#號）
3) 電子郵件連結
<a href=“mailto：郵件地址”>站長郵箱 </a>(注意不能忘了mailto)
9.滾動標籤的文法
<marquee scrolldelay=滾動延遲時間 direction=up/down/left/right(滾動方向) onmouseover=“this.stop()”(當滑鼠指在上面時停止滾動) onmouseout=“this.start()”(當滑鼠離開時繼續滾動) >
滾動的文字和映像
</marquee>
第二章知識點總結
1.表格的基本架構文法
<table border=表格的邊框的寬度(一般不超過5) width=表格的寬度 height=表格的高度 bordercolor=表格邊框線的顏色 bgcolor=整個表格的背景顏色background=表格的背景圖片地址(背景圖片) align=表格對齊>
<tr bgcolor=行的背景顏色>(行)
<td colspan=跨的列數 rowspan=跨的行數 bgcolor=本儲存格的背景顏色 background=本儲存格的背景圖片地址(背景圖片) align=儲存格中的內容對齊(right/left/center/)></td>(儲存格)
</tr>
</table>
2.填充、間距屬性
cellpadding:內容與儲存格內邊框線的距離（內填充） cellspacing：儲存格之間的距離（外間距）
第三章知識點總結1.表單的基本結構
<form action="URL" name=表單名字 method=提交資料的方式（post/get）>
具體的內容
</form>
2.表單中的元素
1).<input>元素
<input name=“” type=text size=文字框的大小 maxlenght=限制輸入的最大字元>(單行文字框)
<input name=“” type=password size=文字框的大小 maxlenght=限制輸入的最大字元>(單行文字框——設定密碼)
<input name=“name” type=radio value=“男” checked(預設選定)>(選項按鈕——男)(設定選項按鈕的時候名字一定要一樣)
<input name=“name” type=radio value=“女”>(選項按鈕——女)
<input name=“” type=submit value=提交>(按鈕——提交)
<input name=“” type=reset value=重設>(按鈕——重設)
<input name=“” type=checkbox value=play(必須有) checked>玩遊戲(複選框)
2).<select></select>下拉式清單元素
文法：<select name=“”>
<option value=“”(必須有)>內容</option>
<option value=“”(必須有)>內容</option>
<option value=“”(必須有)>內容</option>
<option value=“”(必須有)>內容</option>
……
</select>
3).<textarea></textarea>多行文字框元素
文法：<textarea name=“” cols=“寬度” rows=“高度”(不要和合併儲存格的rowspan和colspan相混淆)>
具體的內容
</textarea>
1).架構的基本結構(注意：此時不能要<body></body>)
<framset cols=“25%，*”(分隔成左右兩部分) rows=“25%，*”(分隔成上下兩部分) border=架構邊框的大小 bordercolor=架構邊框的顏色>
<frame name=“視窗的名字” src=“此視窗要顯示的檔案地址” scrolling=yes/no(有無捲軸) noresize(禁止改變架構視窗的大小)>
</framset>
2).架構頁面之間的連結
第一步：在設計好的架構頁面中給每個部分定義一個名字；
Eg:<frame name=”視窗的名字” src=“”>
第二步：設定導覽列中的超連結的target目標視窗屬性；
Eg:<a href=“lianjie.html” target=“要顯示的視窗的名字”>連結標誌</a>
第四章知識點總結
1.樣式類型，分為三種
1）標籤選取器
文法：
標籤{
屬性:屬性值;
}
<style type=”text/css”>
P{font-size:20px;color:blue}
</style>
不需要調用，直接建立標籤就能使用
2）class選取器
文法：
。類名{
屬性:屬性值;
}
<style type=”text/css”>
.my{font-size:20px;color:blue}
</style>
調用：在需要使用的地方做為屬性來調用（class=類名）
3）ID選取器
文法：
#名稱{
屬性:屬性值;
}
<style type=”text/css”>
#my{font-size:20px;color:blue}
</style>
調用：在需要使用的地方做為屬性來調用（ID=名稱）
2.常用的樣式屬性
1)文字屬性
font-size:字型大小
font-family:字型類型
font-style:字型樣式（斜體）
color:字型顏色
text-algin:文本的對齊（left/right/center）
2)背景屬性
mso-para-margin-left: 2.0gd;">background-image:url(“圖片地址”)背景圖片
background-repeat:（repeat/no-repeat/repeat-x/repeat-y）背景圖片如何被重複顯示
3)方框屬性
(1)邊界屬性
margin-left:設定對象的左邊距
margin-right: 設定對象的右邊距
margin-top: 設定對象的上邊距
margin-bottom: 設定對象的下邊距
(2)填充屬性
padding-left:設定內容與左邊框之間的距離
padding-right: 設定內容與右邊框之間的距離
padding-top: 設定內容與上邊框之間的距離
padding-bottom: 設定內容與下邊框之間的距離
(3)邊框屬性
border-style:(soild細邊框/dashed/虛邊框)邊框樣式
border-width:邊框寬度
border-color:邊框顏色
4)超連結樣式
A:link{}未被訪問的連結樣式
A:visited{}被訪問過的連結樣式
A:hover{}滑鼠懸浮在連結上時的樣式
A:active{}滑鼠下在按下時連結文字的樣式
3.樣式表的3類應用方式
1)行內樣式表(改變某一行文字的樣式)
文法：<P style=”屬性:屬性值;”>文字</P>
2)內嵌樣式表(在一個頁面內使用)
文法：
<style type=”test/css”>
//樣式規則
</style>
3)外部樣式表(改變多個頁面中的不同頁面元素的樣式)
以CSS為尾碼名的檔案。
連結外部樣式表的兩種方式：
(1)<link>標籤聲明
<link rel=”stylesheet” type=”text/css” href=”樣式表檔案”>
(2)匯入方式
<style type=”Text/css”>
@import 樣式表檔案.css;
</style>
第五章知識點總結
1.網站開發流程
1)需求分析、確認需求
2)網站製作
3)測試網頁
4)發布網站
2.網站測試主要包括三個方面
1)頁面是否美觀,布局是否合理
2)連結是否完好,有無無效連結
3)在不同瀏覽器中的相容情況
HTML知識總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
