第一章 代碼基礎知識
第十二節 其它標簽
本節講解幾種常用標簽：塊區標簽、段落標簽、定位標簽、強調標簽、換行標簽等8種標簽。
1、<div>是塊區標簽，又叫區隔標簽。
DIV元素是用來為HTML文檔內大塊的內容提供結構和背景的元素。DIV的起始標簽（首標簽）和結束標簽（尾標簽）之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。DIV標簽稱為區隔標記。它可以包含段落，表格、圖片等不同的內容。它的作用是設定字、畫、表格等的擺放位置。
DIV元素最大的特點是默認沒有對元素內的對象進行任何格式化渲染，主要用于應用樣式表。
塊區標簽語法： <div>內容</div>
<div> 標簽是制作網頁常用的一個標簽，它的用途是用于網頁布局。<div>與</div>之間的“內容”，可以是文字，也可以是圖片等內容。在使用塊區標簽的地方，瀏覽器會自動地給下面的內容空出一行的空格。
DIV標簽應用于 Style Sheet（式樣表）會更顯威力，它最終目的是給設計者另一種組織 能力，有 Class ; Style ; title ; ID 等屬性。
在<div>標簽 中，可以添加許多屬性。添加屬性的方式，大部分是以“樣式”（style）的方式添加的。現舉例如下：
（1）設置對齊方式：
<div align="center">
（2）設置寬度、高度和背景顏色：
<div style="width:200px;height:200px;background-color:Black;">
（3）設置外邊距、寬度、高度和背景顏色：<div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">
（4）設置定位方式：position:relative（定位方式：相對定位）<div style="position:relative; top:10px;left:10px; width:140px; height:140px;background-color:White;">
2、<p>是段落標簽
段落標簽語法：<p>內容</p>
<p>是一個有特定語義的標簽，表示段落，是用來區分段落的。在大部分的瀏覽器中對P基本上都有一個上下的邊距。但是沒有行首縮進，因為行首縮進只是表示段落的方式，并不是一定的或必需的方式。所以在用<P>標簽的時候，如果需要可以針對P設定一下行首縮進。
段落標簽常用的屬性是對齊方式。即：<p align="center">、<p align="right">或者<p align="Left">
在使用段落標簽的地方，瀏覽器會自動地給下面的文章空出兩行的空格。因此，我們在編撰文字或者圖片的時候，如果想讓兩部分內容之間空出兩行空格，就用<p>標簽；如果想讓兩部分內容之間空出一行空格，就用<div>標簽。
3、<span>標簽
<span>語法：
<span> 內容</span>_<span> 標簽被用來組合文檔中的行內元素。
span 沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。
可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便于對 span 應用樣式。
<span>在行內定義一個區域，也就是一行內可以被<span>劃分成好幾個
區域，從而實現某種特定效果。<span>本身沒有任何屬性。
<span>在
CSS定義中屬于一個行內
元素，而<div>是塊級元素。所謂“塊元素”，是以另起一行開始渲染的元素，“行內元素”（又叫做“內嵌元素”），在它后邊的內容不會換行。我們可以通俗地理解為<div>為大容器，<span>就是小容器。
4、定位標簽與代碼
在制作網頁時，我們常常需要給網頁中的元素進行定位。定位有水平對齊、垂直對齊、居中標簽、絕對定位、相對定位等幾種方式。
（1）水平對齊方式：align=left（左對齊） align=center（居中對齊）align=right（右對齊）
水平對齊方式常常作為其它標簽（例如：表格、段落、塊區等標簽）的屬性使用。
（2）垂直對齊方式：valign=top（頂部對齊）valign=bottom（底部對齊）middle（中部對齊）
垂直對齊方式也常常作為其它標簽（例如：表格、段落、塊區等標簽）的屬性使用，垂直對齊方式還常常和水平對齊方式配合使用。
（3）居中標簽：居中標簽一般是單獨使用的，居中標簽有尾標簽。標簽語法：<center>內容</center>
（4）絕對定位語法：POSITION: absolute（定位：絕對定位）。
絕對定位是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
絕對定位舉例：style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"
（5）相對定位語法：POSITION: relative（定位：相對定位）。
相對定位是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
相對定位舉例：style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"
5、<strong>強調標簽
標簽語法：< strong>內容< /strong>
strong 意思是著重，這是有語義的，作用也很簡單。至于樣式，是加粗著重，還是用色彩表明著重，都由你自行選擇。
6、<em>標簽
標簽語法：< em>內容< /em>
< em >標簽是表示強調，一般瀏覽器的默認值是斜體。
<strong>標簽與< em>標簽都有強調的意思，但是強調的力度有所不同。strong要比em力度更大一點。如果說em是漢語中的“強調”、“注意”，那么strong就是“再三強調”、“特別注意”。
7、<br>標簽與<wbr>標簽
<br>換行標簽。在<br>后面的內容，會顯示在下一行。<br>標簽是空標簽，它沒有尾標簽。
wbr 是 Word BReak 的縮寫，用來指定軟換行（或單詞換行）。即使用
<nobr>禁止了換行，使用 <wbr> 仍然可以換行，但是又不是強制換行，這點和 <br> 不一樣。換不換行要看瀏覽器的橫幅。
8、<nobr>標簽
<nobr>：不換行標簽。標簽語法：<nobr>內容</nobr>
在一段文字或者幾個圖片代碼的前面輸入<nobr>標簽，后面輸入它的尾標簽</nobr>，這些文字和圖片就不會換行了。
作業：
1、認識上面講解的這8種標簽，理解這些標簽各自表示的意義。
2、熟悉這些標簽的表達語法。
3、自己找一些網頁代碼，認識這些標簽并體會它們的用法。把你認為精彩的標簽，設置一個文件夾保存起來。
２０１２年１０月１9 日于北京
第一章 代碼基礎知識
第十三節 CSS樣式
本節講解有關CSS樣式的內容。
CSS是什么？
CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或 XML 等文件樣式的計算機語言。 CSS目前最新版本為CSS3，能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象盒模型的能力，并能夠進行初步交互設計，是目前基于文本展示最優秀的表現設計語言。
CSS樣式表能為我們做什么?
CSS樣式表的作用是定義網頁的外觀（例如字體，顏色等等），它也可以和javascript等瀏覽器端腳本語言合作做出許多動態的效果。
這是一個沒有添加css的普通網頁： “
沒有添加CSS的HTML網頁” ，我們不改動網頁的HTML代碼，只是添加了一些CSS規則，就得到了一個非常美觀的網頁：“
添加了css的網頁”。
這不是CSS作用的全部，CSS可以將格式和結構分離。可以以前所未有的能力控制頁面布局。可以制作體積更小下載更快的網頁。可以將許多網頁同時更新，比以前更快更容易。瀏覽器將成為你更友好的界面 。
css的內容
css的內容是對“層疊樣式表”使用方法的講解。它包括：樣式表的基本語法、把樣式表加入網頁的方式、文字屬性的設置、文本屬性的設置、背景屬性的設置、列表項目的應用、div和span標簽、盒子、定位方法、鏈接方法等內容。
應用css樣式標簽舉例：
代碼1：
<IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 1000px; BORDER-TOP-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 305px; BORDER-LEFT-WIDTH: 0px"
src="http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg">
注釋：
1、上面的圖片標簽解析：
<圖片標簽 樣式＝“圖片右邊框寬度：0px；圖片外邊距寬度：0px；圖片寬度：1000px；圖片上邊框寬度：0px；圖片下邊框寬度：0px；圖片高度：305px；圖片右邊框寬度：0px" 圖片地址＝"http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg">
2、說明：
上面的圖片標簽中使用了css樣式，定義了圖片的四個邊框的寬度、圖片外邊距的寬度、圖片高度和圖片寬度。
代碼2：
<marquee style="width: 621px; height: 66px; color: rgb(255, 0, 255); font-size: 24pt; font-weight: bold;"
id="class=" direction="right" behavior="alternate" scrollAmount="1">
注釋：
1、上面的移動標簽解析：
<移動標簽 樣式＝屏幕寬度：621px；高度＝66px；顏色：十進制顏色（紅色值255，綠色值0，藍色值255）；文字字號：24px；文本粗細：粗體；序號＝“選擇器”＝“移動方向”＝“向右” 移動方式＝“來回走” 移動速度＝“1”>
2、說明：
上面的移動標簽中使用了css樣式，定義了移動屏幕的寬度和高度、文字顏色、文字字號、文本粗細、標簽序號（包括移動方向、移動方式和移動速度）
代碼3：
<div style="position:fixed; top:210px;left:210px; background-color:Navy;width:100px;height:100px;">
注釋：
1、上面的塊區標簽解析：
<塊區標簽 樣式＝定位類型：絕對定位；居頂：210px；居左：210px；背景顏色（設置純色）：海軍藍；寬度：100px；高度：100px；>
2、說明：
上面的塊區標簽中使用了css樣式，定義了定位類型（絕對定位）、居頂距離、居左距離、背景顏色、寬度和高度
。
編者聲明：
我對CSS不是非常熟悉，在這里只向您介紹這些內容，css的具體內容以及使用方法，請您參閱我收藏的這些文章：
http://www.360doc.com/content/12/1017/21/4127803_242100513.shtml作業：
1、認識CSS的作用，初步了解CSS的內容。
2、閱讀有關CSS的文章，學習CSS語法。
3、應用CSS樣式，試著制作幾篇文章。
代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)２０１２年１０月１9 日于北京
