功能強大的HTML

HTML基本标簽(一)

1.什麼是HTML

html：Hyper TextMakeup language：超文本标記語言

html：網頁的“源碼”

浏覽器：“解釋和執行”html源碼的工具

2.網頁的摘要資訊

網頁摘要資訊利于浏覽器解析和搜尋引擎搜尋：

2.1使用<title>标簽

<head>

<tlite>搜狐-中國最大的門戶網站</title>

</head>

2.2使用<meta>标簽

(1)描述文檔類型和字元編碼

(2)描述搜尋關鍵字和描述

3.HTML頁面中的塊和行

HTML标簽分類(友善後續的布局設計)

塊級标簽：顯示為”塊”狀，前後隔一行

行級标簽：按行逐一顯示

強調：塊級和行級标簽的差別：

塊級：前後換行

行級：一行内顯示

塊級标簽分為：基本塊級标簽，常用于布局的塊級标簽

基本塊級标簽：

001.标題标簽

......

h1最大，h6最小

002.段落标簽

003.水準線标簽

<hr/>

常用于布局的塊級标簽：

001.有序清單标簽

<ol>

</ol>

002.無序清單标簽

<ul>

</ul>

003.定義描述标簽(常用于圖文混編)

<dl>

</dl>

004.用定義描述标簽實作圖文混編的效果

005.表格

<table>

<tr>

</tr>

</table>

006.表單

...

</form>

007.分區标簽div

重點：一般當做結構化塊狀元素使用，作為邏輯分區(分塊)即容器來使用。

04.請說出實際開發常用的4種塊狀結構是什麼？

01.div-ul(ol)-li:常用于分類導航或菜單等。

02.div-dl-dt-dd：常用語圖文混編的場合

03.table-tr-td常用于圖文布局或資料顯示

04.form-table-tr-td:常用于布局表單

05.行級标簽

001,圖像标簽

為了浏覽器之間的相容，推薦使用title屬性，確定能顯示提示文字

alt:當圖檔不顯示時，顯示在圖檔上的文字

title:滑鼠停留在圖檔上顯示的文字

002.行級标簽<span>:顯示某行内的獨特樣式

<span>文本等行級内容</span>

003.換行标簽<br/>

06.為什麼需要w3c标準

w3c:World Wide Web Consortium,網際網路聯盟

W3C的職能：負責制定和維護web行業标準

W3C提倡的web結構：

1、内容（結構）和表現（樣式）分離

2、HTML内容結構要求語義化

07.XHTML1.0基本規範

001.标簽名和屬性名必須小寫

002.html标簽必須關閉

003.屬性值必須用引号括起來

004.标簽必須正确嵌套

005.必須添加文檔類型聲明

文檔聲明必須位于文檔的最前面，級别有三種：Strict(嚴格類型),Transitional(過渡類型)，Frameset(架構類型)

HTML基本标簽(二)

01.超連結--實作頁面間的導航

文法：<a href="連結位址" target="_blank" rel="external nofollow" target="目标視窗位置">連結熱點文本或圖像</a>

例如：

02.相對路徑：相對于目前目錄的位址，常用

絕對路徑：指向目标位址的完整描述，少用

重要：如果要通路目前路徑的上一級路徑可以使用../

03.超連結的三種應用場合

001.頁面間連結

002.錨連結

003.功能性連結

001.頁面間連結

适用場合：常用于網站導航

002.實作錨連結（分為同頁面錨連結和頁面間錨連結）

同頁面錨連結：

1，定義标記(錨)：<a name="标記名">目标位置</a>

2，設定連結到标記位置：<a href="#标記名" target="_blank" rel="external nofollow" >目前位置</a>

适用場合：适用于頁面内容較多，超過一屏的場合

跨頁面連結：

1.标記所在頁：<a name="标記名">[明星專區]</a>

錨連結可以用于同頁也可以跨頁連結

2.設定連結到标記位置：<a href="anchor.html#star" target="_blank" rel="external nofollow" >明星專區</a>

003.功能性連結

郵箱、QQ連結等

待寫…

04.注釋

<!--注釋内容--!>

被注釋的行用于增加代碼的可讀性，不顯示

05.特殊符号

空格：

大于：>

小于：<

引号("):"

版權号():©

因為<、>等符号在HTML中已使用，是以必須用其他符号來代替，都以;号結束

06.常見的表單元素

單行文本框(text)

密碼框(password)

文本域(textarea)

單選按鈕(radio)

複選框(checkbox)

送出按鈕(submit)

下拉清單(select)

</select>

重置按鈕(reset)

07.表單的基本文法

<form action="表單送出位址" method="送出方法">:送出方法隻有post和get兩種

文本框、按鈕等表單元素

</form>

action：指定送出後，由伺服器上哪個處理程式處理

method：指定向伺服器送出的方法：一般為post或get方法，post方法比較安全。

08.表單的執行原理

用戶端：請求登入，通過表單填寫賬戶資訊

用戶端和伺服器類似兩個人溝通一樣，進而建立互動活動

伺服器端：驗證發來的賬号資訊，然後給出回報！

09.表單元素的基本格式

10.表單元素的逐一介紹

文本框

name用于伺服器端擷取資料，例如：request.getParameter("userName")

密碼框

按鈕

普通按鈕：button

送出按鈕：submit

重置(清空)按鈕：reset

圖檔按鈕：image

單選按鈕

名字name相同表明屬于同一組

特點：單選

複選框

特點:多選

檔案域

例子：<p><input type="file" name="files"/><br/>

</select>

作用：提供固定選項，避免使用者輸入錯誤

多行文本框

文本内容</textarea>

隐藏域

友善伺服器端"記住"用戶端的資訊，但又不希望客戶看到的資料

隻讀和禁用屬性

readonly:希望某個框内的内容隻允許使用者看，不能修改

disabled:因沒達到使用的條件，限制使用者使用

歡迎閱讀服務條款協定，貴美的權利和義務

</textarea><br/><br/>

同意以上協定<input name="agree" type="checkbox"/>

表格應用和布局

1.為什麼使用表格？

表格常見應用場合：

01論壇

02.購物網站

03.門戶網站應用表格

2.表格的基本結構

行、列和單元格

特點：通常情況下，同行的高度一緻，同列的寬度一緻

3.表格的基本文法

<table>

<tr>

</tr>

<tr>

</tr>

</table>

如何建立表格？

<table>代表表格的開始，border=“2”表示邊框寬度為2

4.表格的跨行跨列（重點，重點！！！）

如何跨列

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table >

其中，colspan屬性表示跨多少列

該行其他單元格的内容就省略不寫了

rowspan屬性表示跨多少行

5.表格進階标簽

表格标題：<caption>

表頭：<th>

頁眉：<thead>

資料主體：<tbody>

頁腳：<tfoot>

6.表格布局

如何實作圖文布局？

實作步驟：

01.确定行列數：5行2列

02,寫出5行2清單格

03，确定跨行跨列的單元格：

1行1列單元格跨2列

2行1列單元格跨4行

04.增加rowspan和colspan删除多餘單元格、

<tr>

</tr>

<tr>

<td>大學要求老師開網店</td>

</tr>

<tr>

<td>安全錘網上大熱銷</td>

</tr>

……

</tr>

</table>

7.如何實作表單布局？

使用表格進行布局對顯示資料有什麼要求？實作思路是什麼？

使用場合：資料顯示要求為規整，符合表格布局的特點

布局的實作思路：

01，需要幾行幾列的表格？

02，那些單元格有跨行或跨列？

03，編寫表格代碼實作

注意：1，同列單元格寬度由該列寬度最大的單元格決定

2，同行單元格寬度由該行高度最高的單元格決定

8. 嵌套布局

嵌套表格布局的缺點：

01，代碼量大

02，層次結構也相對複雜

03，不利于Google等搜尋引擎搜尋查找資料

9.表格布局适用場合：

01，規則的資料顯示

02，表單頁面

提示：表格布局不适合不規則的複雜頁面，這種場合

需使用DIV+CSS布局

架構

1、為什麼使用架構？

架構的兩類用途：

01.顯示多視窗頁面--使用<frameset>架構集

02.頁面複用--使用<iframe/>内嵌架構

二、架構檔案的特點

多個頁面檔案組成

主檔案（index.html）：

01.top.html 02.left.html 03.right.html

三、架構的基本結構

建立架構網頁的步驟：

01.建立各子視窗對應的HTML檔案

02.建立整個架構頁面檔案，引用子視窗檔案

架構頁面基本文法：

</frameset>

其中，cols将視窗分隔成左中右3個部分

rows将視窗分隔成上下2個部分

border表示邊框尺寸大小

縱向分隔視窗

</frameset>

<body> 如浏覽器不支援架構，才顯示body内的内容 </body>

</noframes>

注意：01.架構和body不能共存

02.為了相容性，可以使用<noframes>标簽

橫向分隔視窗：

</frameset>

架構實作多視窗頁面：

典型的2行2列結構

<frame src="subframe/top.html" name="topframe" scrolling="no"

noresize="noresize" />

<frame src="subframe/left.html" name="leftframe"scrolling="no"

noresize="noresize" />

</frameset>

如何實作視窗間的關聯：

01.設定視窗名(架構首頁)

</frameset>

02.設定<a>的target屬性(視窗子頁面)

設定連結在右視窗中打開

target的其他用法：

在新視窗中顯示：_blank

在自身視窗中顯示：_self

在上級視窗顯示：_top

在父視窗顯示：_parent

三、為什麼用<iframe/>

01.<frameset>需要使用多個檔案，目錄結構複雜

02.内嵌較為靈活，可以在網頁的任何位置使用

03.可以作為模闆，在本網站的多個頁面複用

iframe基本用法

frame scrolling="no">

注意點：和<frameset>不同，iframe放在<body>标簽内

常用屬性

如何設定在内嵌視窗顯示

下邊顯示第三頁

</a>

scrolling="yes" noresize="noresize"

src="subframe/the_second.html"/>

Css樣式表（一）

1,為什麼使用CSS樣式表？

CSS全稱(Cascading Style Sheets)層疊樣式表

樣式表能實作内容與樣式分離，友善團隊開發
樣式複用，友善網站的後期維護
頁面的精确控制，實作精美、複雜頁面

說明：CSS是用來美化頁面用的，可以對頁面元素進行更精細的設定，樣式主要描述元素的字型顔色、背景顔色，邊框等。

2，CSS的用途

外觀美化
布局、定位

CSS基本文法：

<head>

選擇器(即修飾對象){

對象的屬性1：屬性值1；

對象的屬性2：屬性值2;

}

</style>

</head>

例子：

{

Color:red;

Font-size:30px;

Font-family:隸書;

}

3.選擇器的分類

選擇器分為：标簽選擇器、類選擇器、ID選擇器(重點)

标簽選擇器

Li{

Color:red;

Font-size:28px;

Font-family:隸書;

}

</style>

作用：用于修飾同類HTML标簽的共同風格

類選擇器

.blue{color:blue;}

……

</style>

……

<ul>

</ul>

注意：類名有點号

ID選擇器

<style>

#menu{

width:200px; background:#ccc;

font:bold 14px 宋體;

}

</style>

… …

<ul>

……

</ul>

</div>

4.文本屬性

字型、字号：

Font(縮寫形式)

Font-weight(粗細)

Font-size(大小)

Font-family(字型)

行距、對齊等：

Line-height(行高)

Text-align(對齊)

Letter-spacing(字元間距) 我是

Text-decoration(文本修飾)

White-space(空白處理) 屬性值：nowrap:不換行

li{

font: 12px 宋體;

text-align:left;

line-height:28px;

}

.title{

letter-spacing:5px;

white-space:nowrap;

text-decoration:underline;

}

.bigFont {

font-size:16px;

color:red;

}

</style>

5.背景屬性

background(縮寫形式)
background-color(背景色)
background-image(背景圖)
background-repeat(背景圖重用方式)
background-position(位置坐标、偏移量)

div{

background:url(images/bg.jpg) no-repeat;

background-position: -70px -60px

}

6 .背景屬性的經典應用

圖示截取-背景偏移量技術：了解清楚是左移還是右移，然後設定div的寬度和高度以适應圖檔的顯示。

<html>

<head>

div{

width:20px;background:url(images/icon.gif) no-repeat;

float:left;

}

.help{

background-position:-120px 0px;

}

.login{

width:40px;background-position:0px -20px;

}

</style>

</head>

<body>

<div class="help"></div>幫助中心

</body>

</html>

7.清單屬性

01.清單li常用屬性

List-style(清單風格)取值

屬性值方式文法規則執行個體

none 無風格 list-style:none; 刷牙

disc 實心圓(<ul>預設類型) list-style:disc; ● 刷牙

circle 空心圓 list-style:circle; ○ 刷牙

square 實心正方形 list-style:square; ■ 刷牙

decimal 數字(<ol>預設類型) list-style:decimal; 1. 刷牙

表格常見屬性

背景顔色；

color:文本顔色

border-style:solid;邊框風格，實線(預設是沒有)，還有dotted(點)等值；

border-color:邊框顔色；

border-width:邊框寬度(預設是0)

CSS樣式表(二)

1.如何控制CSS樣式

盒子模型

網頁中所有元素都可以看做一個一個的盒子

盒子模型包括：

元素内容

填充(也稱内邊距)：padding

邊框：border

邊界(也稱外邊距)：margin

樣式控制思路

盒内樣式修飾：設定網頁元素的顔色、字型等外觀

盒子位置布局：确定盒子所在的位置、和其他網頁元素的關系

2.盒子模型詳解

為什麼需要盒子屬性

1，盒子模型是網頁布局的基礎

2，盒子屬性是盒子模型的關鍵屬性

什麼是盒子屬性
1. 盒子屬性

margin(外邊距/邊界)

各個屬性又分為四個方向

Margin-top

Margin-right

Margin-bottom

Margin-left

Margin:1px,2px,3px,4px;(每個值分别是：上右下左，順時針方向)

Margin:值1，值2，值3;(含義：上為值1，左右為值2，下為值3)

Margin:1px,2px;(含義：上下值為1，左右值為2)

Margin:0 auto;相當于margin:0 auto 0 auto;即上下是0，左右是自動，要有HTTP頭協定才能居中顯示

Margin:值1;(含義：上右下左都是值1)

Margin-left:1px;

Border(邊框)

修飾屬性：

Border-color

Border-width

Border-style

四個方向：

Border-top

Border-right

Border-bottom

Border-left

典型應用

Border-style:none;

Border:1px solid red;

Border-right:5px dotted blue;

(solid 實線，dashed虛線 dotted點)

使用border屬性修飾表單

.textBorder{

Border-width:1px;

Border-style:solid;

}

</style>

</head>

<body>

<p>名字：

</p>

<p>密碼：

</p>

Padding(内邊距/填充)

Padding屬性

Padding

Padding-top

Padding-right

Padding-bottom

Padding-left

3.元素的寬高及實際占位

元素的實際占位(實際寬、高)

盒子高度=height屬性+上下填充高度+上下邊框高度(上下兩個)

盒子寬度=width屬性+左右填充寬度+左右邊框寬度

4.使用盒子屬性實作DIV+CSS布局

實作步驟：1，分析頁面的分塊結構，形成HTML組織結構

為了控制整個頁面的居中，添加一個大容器：container

2.編寫每個DIV塊的CSS控制定位

5.浮動float

01.為什麼需要float浮動屬性

使用float浮動屬性可以解決兩塊布局無法同行顯示的問題

02.什麼是浮動屬性

所謂浮動就是标簽脫離正常文檔流而表現為向右或向左浮動

預設的正常文檔流：頁面内容從上到下，從左到右排列，DIV塊換行顯示。

03，浮動的三大顯著特性

1， DIV塊元素失去“塊狀”換行顯示特征，變為行内元素。

2，緊貼上一個浮動元素(同方向)或父級元素的邊框，如寬度不夠将換行顯示。

3，占據行内元素的空間，導緻行内元素圍繞顯示

6.為什麼需要clear屬性

預設情況下第3個div随視窗大小決定是否換行，如希望換行可以使用clear區隔屬性。

什麼是clear清除屬性

Clear作用：1，如果前一個元素存在左浮動或右浮動，則換行以區隔。

2，隻對塊級元素有效

Clear屬性的取值

Right

Left

Both

None

CSS樣式表(三)

1.超連結樣式的特點

01.超連結樣式的特殊性

文本或圖像加上連結，将失去原樣式而繼承連結的樣式

02.超連結樣式的四種狀态

未通路狀态(a:link)

已通路狀态(a:visited)

滑鼠移上狀态(a:hover)

激活標明狀态(a:active)

注意：加連結後，圖檔/文本樣式的變化

圖檔添加了邊框，文本添加了下劃線

2.超連結僞類樣式

采用選擇器：通過狀态的方式定義樣式，一般稱為僞類

僞類示例說明

a:link a:link{color:#999;} 未通路狀态

a:visited a: visited {color:#333;} 已通路狀态

a:hover a: hover {color:#ff7300;} 滑鼠移上狀态

a:active a: active {color:#999;} 激活標明狀态（滑鼠點選未釋放時）

3.如何設定超連結樣式:因為實作的是css樣式複用

設定超連結樣式的步驟：

1.确定頁面所有超連結的樣式是否相同，否則分開定義

2.先确定四個狀态共有樣式，再分别定義其他狀态

4.如何應用樣式

三類應用樣式的方式：

01.内部樣式表：

//樣式定義

</style>

HTML和CSS在同一檔案，友善開發時修改，樣式和内容分離

不夠徹底，不利于頁面複用

02.外部樣式表

分别定義*.css和*.html檔案，樣式和内容徹底分離，多個網頁可以共享同一CSS

03.行内樣式表

單獨定義某個元素的樣式，靈活友善。但因為内容與樣式混在

一起，應盡量少用或不用。

5.樣式的優先級

01.各類樣式有繼承

02.各類樣式的優先級

由低到高，“近者優先”原則

1，浏覽器預設設定

2，外部樣式表檔案

3，内部樣式表

4，行内樣式表

選擇器的優先級

a=（最進階 style=""）

b=（ID用到的數目）

c=（class用到的數目）

d=（标簽用到的數目）

03. <style type="text/css">

div

{

background:green;

}

</style>

</head>

<body>

</div>

</body>

選擇器優先級的案例

div

{

width:200px;

height:100px;

background:yellow;

}

.dv1

{

background:red;

}

#mydiv

{

background:blue;

}

</style>

</head>

<body>

</div>

</body>

6.典型的局部布局結構

div-ul(ol)-li:常用于分類導航或菜單等場合

div-dl-dt-dd:常用語圖文混編場合

table-tr-td：常用于圖文布局或顯示資料的場合

form-table-tr-td:常用于布局表單的場合。

div-ul-li局部布局樣式的修飾

實作思路：布局結構分析、css樣式分析

7.如何複用CSS代碼

抽取重複代碼建立類，如：.pic{//共有的CSS代碼}

應用樣式：多個類樣式，如：<li class="pic pic1"></li>

div-dl-dt-dd局部布局樣式修飾

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div

{

background:url(./images/bg.gif) no-repeat;

padding-top:32px;

width:235px;

height:292px;

}

div dl

{

margin:3px;

padding-left:5px;

}

div dl dt

{

float:left;

padding:2px 0px;

}

div dl dt img

{

height:46px;width:53px;border:1px solid red;

}

div dl dd a

{

line-height:60px;

vertical-align:middle;

text-decoration:none;

}

</style>

</head>

<body>

<div>

<dl>

<dd>

</dl>

<dl>

<dd>

</dl>

<dl>

<dd>

</dl>

<dl>

<dd>

</dl>

</div>

</body>

</html>

8.css中基本符号

（空格）（逗号）（#）（冒号）

選擇器的組合：

标簽+類

标簽+id

id+空格+類

id+空格+類+逗号

Li .pic{width:28px;}

div#nav{text-align:center;}

#nav .pic{border:1px;}

#nav .pic,#nav .text{height:26px;}

轉載于：http://www.cnblogs.com/qixiaohua/p/4476939.html

轉載于:https://www.cnblogs.com/yaobolove/p/4484546.html