代碼入門教程(7)divp及定位標(biāo)簽、css樣式

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