HTML初學者入門學習教程筆記手冊第一部分

TML基本結構
基本文件格式：一般寫的代碼需要存儲在文件中，比如html代碼存儲在.html文件中
什么是HTML標簽：HTML標簽也稱為HTML標記，由開始標簽和結束標簽組成，用于表現結構化的內容，將內容構造成為一個完整的網頁。

HTML標簽組成
雙標簽：是指由開始標簽和結束標簽組成
單標簽：是指沒有結束標簽的標簽，由一個標簽構成即為開始也是結束
理解：開始標簽是被括號包圍的元素名，結束標簽是被括號包圍的斜杠和元素名，如<h1></h1><b></b> 注意：有些HTML元素沒有結束標簽，比如<br/>

HTML詳細說明
html：告訴頁面這是一個HTML文檔，并聲明這個網頁是面向那種語言的用戶lang=”zh-CN” <!DOCTYPE html>
文檔聲明：位于文檔的首航，告知瀏覽器文檔使用哪種HTML或XHTML規范。讓瀏覽器通過正確的方式解析我們的網頁，使網頁能正常顯示。<!DOCTYPE html>
head標簽：就是一個網頁的頭，頭部中的內容一般存放描述文檔的信息 <head>
body：就是一個身體，一般來說 body里面的內容要顯示出來<body>

<html>頁面基礎元素
簡介：HTML標簽也稱為HTML標記，由開始標簽和結束標簽組成，用于表現結構化的內容，將內容構造成為一個完整的網頁
規范：1.HTML標簽是由尖括號包圍的關鍵詞，比如<html>
2.HTML標簽通常是成對出現的，比如<b>和</b>
3.HTML不區別大小寫(建議使用小寫)
4.HTML可以嵌套，但是不允許交叉嵌套。正確<b><i>內容<i></b> 錯誤 <b><i>內容</b> <i>

<head>元素
簡介：是所有頭部元素的容器。
能包含哪些：<title><base><link><mate><script><style>
連接樣式表：<link>元素
規定呈現樣式：<style>元素
指定字符集：<mate>元素，關鍵詞 name，content
本質：優化頁面，利于搜索，設置字符集，防止亂碼，引外部樣式方便，規定呈現樣式。

<title>元素
簡介：標簽定義文檔的標題。
用途：定義瀏覽器工具欄中的標題，提供頁面被添加到收藏夾時顯示的標題，顯示在搜索引擎結果中的頁面標題。

name 元信息元素名稱屬性
簡介：name屬性用來指定文檔中附加信息的名稱，通常用keywords來定義關鍵字
用法：<mate name=”信息名稱”/>
理解：在<mate>元素中，名稱必須對應有相關的值才能生效

content 元信息元素的值
簡介：用來指定文檔中附加信息的值
搭配：content屬性是與name屬性成對出現
用法：<mate name=”信息名稱” content=”附加信息的值” />

二部分 CSS

第八章 css基礎知識

css基礎知識：
css樣式表的定義
css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內部樣式-head區域style標簽里面
外部樣式-link調用
內聯樣式-標簽元素里面
css內的注釋：/*注釋內容*/
css樣式表的語法
CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標簽名、和要添加的樣式。
盒子名或者標簽名{屬性:值;}
CSS中幾種顏色的表示方法
用顏色名表示
有17個預先確定的顏色，它們是
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow
用十六進制的顏色值表示(紅、綠、藍)
#FF0000或者#F00
用rgb(r,g,b)函數表示
如：rgb(255,255,0)
用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)
如：hsl(120,100%,100%),色調0代表紅色，120代表綠色，240代表
藍色
用rgba(r,g,b,a)函數表示
其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
用hsla(Hue,Saturation,Lightness,alpha)函數表示
色調、飽和度、亮度、透明度
例子

 <div style="position:absolute;top:0px">
	<div style="background-color:gray;">background-color:gray</div>
	<div style="background-color:#F00;">background-color:#F00</div>
	<div style="background-color:#ffff00;">background-color:#ffff00</div>
	<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
	<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
	<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
	<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>

內部樣式表
當單個頁面需要設置樣式時，就應該使用內部樣式表。
使用 <style></style>標簽在文檔<head></head>里面定義內部樣式表

<head>
 <style type="text/css" >
 p{color:red;}
 </style>
</head>

從外部引入到樣式分為兩種：（注意寫在head標簽里面）
當樣式需要應用于很多頁面時，就需要用到外部樣式表，首先需要創建一個css文件，然后引用到我們的頁面中。
Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式： <style type="text/css">@import url("css.css");></style>
內聯樣式表（優先級高）
寫在標簽里面的樣式
如：<p style="color:red;"></p>
表示給p標簽里面的文字顏色設置為紅色
區別：外鏈樣式與導入樣式
link標簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
加載的順序的區別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
兼容性的區別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效。
在樣式控制上(比如動態改變網頁的布局時,使用javascript操作DOM)的區別，此時@import就無能為力了。

樣式的優先級補充
相同權值情況下，CSS樣式的優先級總結來說，就是——就近原則（離被設置元素越近優先級別越高）：
內聯樣式表（標簽內部） > 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）
權值不同時，瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式
層疊優先級是:
瀏覽器缺省< 外部樣式表 < 內部樣式表 < 內聯樣式
其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:
瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內部樣式表 < 內部樣式表類選擇器 < 內部樣式表類派生選擇器 < 內部樣式表ID選擇器 < 內部樣式表ID派生選擇器 < 內聯樣式…共12個優先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優先級順序為：
一個元素同時應用多個class，后定義的優先（即近者優先），加上!important者最優先！

第九章 css選擇器(上)

css選擇器：
class類選擇器可以重復利用
id選擇器唯一
標簽選擇器
什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標簽選擇器：頁面中所有的標簽都是一個選擇器 p{color:red;}
ID選擇器
選擇id命名的元素以 # 開頭 #p1{color:#0f0;}
類選擇器
class選擇器，選擇clas命名的元素以.開頭 .first{color:#00f;}
css代碼寫完后上線前要經過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
包含選擇器
選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
span{color:red;}
屬性選擇器
選擇包含某一屬性的元素
a[title]{color:red;} 選擇包含title的a標簽
a[title][href]{color:red;} 選擇包含title和href的a標簽
> + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當于包含元素）
p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
p + span{color:red;}

第十章 css選擇器(下)

<a>偽類選擇器
a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標簽）
a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標簽）
a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
*/（可和其他標簽結合一起用）
a:active {color:#0000FF;} / 選定的鏈接 /
注意
偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha
輸入偽類選擇器（針對表單）
input:focus{color:red;} / 鍵盤輸入焦點 /
其他偽類選擇器
p:first-child{color:red;} /* 第一個p */
:before 在元素之前添加內容。
:after 在元素之后添加內容。
css優先規則
內聯樣式表-> ID 選擇器—> Class 類選擇器->標簽選擇器

第十一章背景屬性

背景屬性：
背景的添加：
背景顏色的添加:
background:red;
backgronnd-color:red;
背景圖片的添加：
background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
背景的平鋪
什么是平鋪？平鋪就是圖片是否重復出現
不平鋪：background-repeat:no-repeat;
水平方向平鋪：background-repeat:repeat-x;
垂直方向平鋪：background-repeat:repeat-y;
完全平鋪：默認為完全平鋪
背景圖片的定位
背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
background-position的取值可為英文單詞或者數值和百分值。
background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ottom right
background-positon的數值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;
背景圖片的大小
背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數值和百分值。
background-size的數值取值
background-size:x y;
background-size的數值取值
background-size:x% y%;
背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動

第十二章文字文本屬性

css文字文本屬性：
文字屬性
color:red; 文字顏色
font-size:12px; 文字大小
font-weight:“bold” 文字粗細(bold/normal)
font-family:“宋體” 文字字體
font-variant:small-caps小寫字母以大寫字母顯示
文本屬性
text-align:center; 文本對齊(right/left/center)
line-height:10px; 行間距(可通過它實現文本的垂直居中)
text-indent:20px; 首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through)
letter-spacing: 字間距

第十三章盒子模型

盒子模型
盒子模型就是一個有高度和寬度的矩形區域
所有html標簽都是盒子模型
div標簽自定義盒子模型
所有的標簽都是盒子模型
class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標識單獨的唯一的元素。
盒子模型的組成
盒子模型組成部分：
自身內容：width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內容+內邊距+邊框+外邊距=面積
border 邊框
常見寫法 border:1px solid #f00;
單獨屬性：
border-width:
border-style:
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color (顏色)
padding 內邊距
值：像素/厘米等長度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下左右
padding:10px 10px 10px; 上左右下
padding:10px 10px 10px 10px; 上右下左（設置4個點–>順時針方向）
單獨屬性：
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并

補充盒子模型內容

標準盒子模型
盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標準盒子模型

從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分
IE盒子模型

從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content
和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
IE盒子模型width = padding+border+內容
標準盒子模型 = 內容的寬度（不包含border+padding）
例：
一個盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px
那應該選擇哪中盒子模型呢？當然是“標準 w3c 盒子模型”了。怎么樣才算是選擇了“標準 w3c盒子模型”呢？很簡單，就是在網頁的頂部加上 doctype 聲明。
假如不加doctype 聲明，那么各個瀏覽器會根據自己的行為去理解網頁，即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff會采用標準w3c 盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標準 w3c盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

用 jquery 做的例子來證實一下

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標準w3c盒子模型”。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>

代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標準 w3c盒子模型”
所以為了讓網頁能兼容各個瀏覽器，讓我們用標準 w3c 盒子模型
擴展
學會使用box-sizing布局

第十四章塊元素、行元素與溢出

基本概念
塊級元素：默認情況下獨占一行的元素，可控制寬高、上下邊距；
行內元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
行塊轉換
display:none; 不顯示
display:block; 變成塊級元素
display:inline; 變成行級元素
display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列
溢出
overflow:hidden; 溢出隱藏
overflow:scroll; 內容會被修剪，瀏覽器會顯示滾動條
overflow:auto; 如果內容被修剪，則產生滾動條
文本不換行：white-space:nowrap;
長單詞換行：word-wrap:break-word;
行內元素和快級元素小結
一、塊級元素：block element
每個塊級元素默認占一行高度，一行內添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內元素；
塊級元素一般作為容器出現，用來組織結構，但并不全是如此。有些塊級元素，如只能包含塊級元素。
DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
二、行內元素：inline element
也叫內聯元素、內嵌元素等；行內元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內聯元素，常見內聯元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母之間橫向排列，到最右端自動折行。
三、block（塊）元素的特點:
①、總是在新行上開始；
②、高度，行高以及外邊距和內邊距都可控制；
③、寬度缺省是它的容器的100%，除非設定一個寬度。
④、它可以容納內聯元素和其他塊元素
四、inline元素的特點
①、和其他元素都在一行上；
②、高，行高及外邊距和內邊距不可改變；
③、寬度就是它的文字或圖片的寬度，不可改變
④、內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下:
設置寬度width 無效。設置高度height無效，可以通過line-height來設置。設置margin
只有左右margin有效，上下無效。
設置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
五、常見的塊狀元素
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是CSS layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3級標題
h4 – 4級標題
h5 – 5級標題
h6 – 6級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
noscript – 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 有序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 無序列表
六、常見的內聯元素
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
bdo – bidi override
big – 大字體
br – 換行
cite – 引用
code – 計算機代碼(在引用源碼的時候需要)
dfn – 定義字段
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
kbd – 定義鍵盤文本
label – 表格標簽
q – 短引用
s – 中劃線(不推薦)
samp – 定義范例計算機代碼
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
七，可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
applet - java applet
button - 按鈕
del- 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊(map)
object - object對象
script - 客戶端腳本
八、行內元素與塊級元素有什么不同
區別一：
塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設置寬高
行內：行內元素不可以設置寬高
區別三：
塊級：塊級元素可以設置margin，padding
行內：行內元素水平方向的margin-left; margin-right;
padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
替換元素有如下：（和img一樣的設置方法）
<img>、<input>、<textarea>、<select>
<object>都是替換元素，這些元素都沒有實際的內容
可以通過修改display屬性來切換塊級元素和行內元素

第十五章定位

static靜態定位（不對它的位置進行改變，在哪里就在那里）
默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。
fixed固定定位（參照物–瀏覽器窗口）—做彈窗廣告用到
生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。
relative（相對定位）（參照物以他本身）
生成相對定位的元素，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經有定位的父元素進行定位)
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 “left", "top", "right" 以及 "bottom" 屬性進行規定
z-index
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
一切皆為框
塊級元素: div、h1或p元素即：顯示為一塊內容稱之為 “塊框“ ;
行內元素: span,strong,a等元素即：內容顯示在行中稱 “行內框”;
使用display屬性改變成框的類型即：display:block; 讓行內元素設置為塊級元素，display:none; 沒有框
相對定位：
如果對一個元素進行相對定位，它將出現在它所在的位置上。
通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
.adv_relative { position: relative; left: 30px; top: 20px; }
絕對定位：
元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }

第十六章框架

frameset框架：
<frameset> —- 用來定義一個框架；雙標簽
不能和 <body> 一起使用
rows、cols屬性
rows 定義行表示框架有多少行（取值 px/%/ * ）
cols 定義列表示框架有多少列（取值px/ %/ * ）
frame子框架
<frame> —- 表示框架中的某一個部分；單標簽，要跟結束標志
src 顯示的網頁的路徑
name 框架名
frameborder 邊框線（取值 0 / 1）
<noframes>屬性
<noframes> 提供不支持框架的瀏覽器顯示body的內容；雙標簽

<frameset>
 <frame src=“” />
 <frame src=“” />
 <frame src=“” />
 <noframes>
 <body>內容</body>
 </noframes>
</frameset>

<iframe>內聯框架
iframe元素會創建包含另外一個文檔的內聯框架（即行內框架）
允許和 body 一起使用
width 寬（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 邊框線（取值 0 / 1）
src 顯示的網頁的路徑

第十七章 css高級屬性

opacity透明屬性
opacity
對于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
對于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
對于早期火狐，使用-moz-opacity:值; 值為0-1
所以寫透明屬性時，一般寫法是

 {	
 opacity:0.5;
 filter:alpha(opacity：50);/*0-100*/
 -moz-opacity:0.5;	/*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}

border-radius圓角邊框屬性
向 div 元素添加圓角邊框
border-radius:10px;
box-shadow陰影屬性
box-shadow屬性向框添加陰影效果,后面跟4個參數。
box-shadow:0px 0px 10px #000;
<embed>屬性
是HTML5中新增的標簽,媒體嵌入插件標簽，可以通過<embed>插入音頻或視頻
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等

CSS部分導圖總結

css常見簡寫

TML基本結構

HTML基本結構

網頁：由HTML(HyperText Markup Language)超文本標記語言所組成。文件后綴一般為.htm或.html

靜態網頁：由html、js、css等組成，不具備交互性。后綴一般為.htm或.html

動態網頁：在html中加入asp/asp.net/jsp/php等技術，使網頁有交互性，后綴一般為.asp/.aspx/.jsp/.php

網站：由一個或若干個網頁、圖片、音頻、視頻、動畫、文件夾等組成的一個集合（文件夾）。

網站中的所有文件和文件夾均不能使用漢字命名。

首頁：也叫主頁/homepage,即打開網站時默認顯示的第一個網頁（http://www.XX.com,https://www.XX.cn），首頁名稱一般為index.html或default.html

標題標簽：h1……h6,h1最大，h6最小

……

HTML注意事項：

1、html中的標點符號必須是英文輸入法中的標點符號

2、HTML標簽不區分大小寫，但一般習慣小寫；Html不區分空格、空行，html標簽和屬性、屬性和屬性之間用一個空格隔開，如<p align=”center” style=”color:red;”>；屬性值一般放置在單引號或雙引號中。

3、html標簽必須放置在尖括號<>中

4、html標簽一般是成對出現（雙標簽），結束標簽在開始標簽的基礎上添加/，如<h1>……</h1>、<p>……</p>

如果是單標簽則在右尖括號前加/，如<br />、<hr />、<img />

5、Html標簽是包含關系，不要交叉書寫。如<p><b><i>文字</i></b></p>,不要書寫為<p><b><i>文字</p></b></i>

段落：<p>……</p>

分行：<br />

網頁中支持的圖像格式：jpg、gif、png、bmp，其中支持背景透明的有gif和png,支持動畫的有：gif

圖像：img

Src:圖像的地址。 ./當前目錄下 ../向上退一級目錄 ../../向上退二級目錄 /根目錄

Width:寬度

Height:高度

在線咨詢

上一篇：web前端入門JavaScript筆記之一
下一篇：ubuntu-make - Ubuntu一鍵安裝開發環境

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML初學者入門學習教程筆記手冊第一部分

您的項目需求