html網(wǎng)頁布局模板

.1 html筆記一、HTML的概述（了解）a.html是什么 ： hypertext markup language 超文本標記語言 超文本：音頻，視頻，圖片稱為超文本。. 標記 ：稱為標記. 一個HTML頁面都是由各種標記組成。 b.作用：編寫HTML頁面。c.HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程). HTML頁面直接由瀏覽器解析執(zhí)行。 二、HTML的歷史（了解）三、HTML的網(wǎng)絡術(shù)語（明白） * 網(wǎng)頁 ：由各種標記組成的一個頁面就叫網(wǎng)頁 . * 主頁(首頁) : 一個網(wǎng)站的起始頁面或者導航頁面 . * 標記:稱為開始標記 稱為結(jié)束標記. 也叫標簽.每個標簽都規(guī)定好了特殊的含義。 * 元素：內(nèi)容 稱為元素. * 屬性： 給每一個標簽所做的輔助信息。 * xhtml： 符合XML語法標準的HTML。 * dhtml：dynamic,動態(tài)的。javascript + css + html 合起來的頁面就是一個dhtml * http：協(xié)議標準。用來規(guī)定客戶端瀏覽器和服務端交互時數(shù)據(jù)的一個格式。SMTP 郵件傳輸協(xié)議,ftp:文件傳輸協(xié)議.四、HTML的編輯工具（了解）*.notepad 記事本*.editplus : 語法高亮顯示技巧： 根據(jù)顏色判斷單詞是否出錯。 （不是100%）*.ultraedit : 根據(jù)顏色判斷單詞是否出錯,可以顯示2進制數(shù)據(jù).*.dw(dreamweaver,專業(yè)工具) 代碼提示.五、HTML的規(guī)范(知道) *.HTML是一個弱勢語言*.html 不區(qū)分大小寫*.html頁面的后綴名是html或者htm(有一些系統(tǒng)不支持后綴名長度超過3個字符，比如dos系統(tǒng))*.html 的結(jié)構(gòu)1)聲明部分。主要作用是用來告訴瀏覽器這個頁面使用的是那個標準。是HTML5標準。2)head部分： 不會顯示在頁面上。作用是告訴瀏覽器一些頁面的額外信息。3)body部分：我們縮寫的代碼必須放在此標簽內(nèi)。六、HTML的各種標簽(掌握) 明確：每個標簽都有私有屬性。也都有公有屬性。 html中表示長度的單位都是像素。HTML只有一種單位就是像素。 body: bgcolor: 背景顏色background:背景圖片text: 文本顏色1.排版標簽 所有的瀏覽器默認情況下都會忽略空格和空行P：p代表一個段落屬性： align:對齊方式. 取值：left,right,center代表是換行。hr:color: 線的顏色size : 線的粗細width: 線的長短 兩種寫法： 1) 絕對值 eg: 500 2) 相對值： 50%noshade: 不要陰影align: 對齊方式 取值： left,right,centercenter: 內(nèi)容居中pre: 預定義格式標簽 .告訴瀏覽器不要忽略空格和空行div: 塊級標簽 必須單獨占據(jù)一行 屬性： align :span: 塊級標簽 不換行字體標記 2 字體標簽h1.h6:定義字體大小屬性： align :居中font:color:字體顏色顏色的寫法有3種： 1)英文單詞: red 2)十六進制：#00ffcc 3)RGB(三原色) : new RGB(124,156,23)size:字體大小face：字體類型特殊字符： <小于 >大于 & &符號 " 雙引號'單引號 © 版權(quán) ™商標  空格 擴展： b: 加粗strong: 加粗i:斜體em: 斜體u: 下劃線s: 中劃線(刪除線)sup: 上標sub: 下標. 3.圖像標記img: 代表是一副圖片 屬性： src : 圖片的路徑 兩種寫法：a) : 相對路徑 路徑是相對頁面所在的路徑 兩個標記.和. ,分表代表當前目錄和父路徑 b) ：絕對路徑 1) : 以盤符開始的路徑 eg: C:Documents and SettingsAdministrator桌面day01_html上課示例/images/1.jpg2) : 網(wǎng)絡路徑eg: /images width: 寬度 height：高度 Alt：當圖片顯示不出來的時候代替圖片顯示的內(nèi)容 title： 提示性文本 border: 邊框熱點： 就是特定的位置添加超鏈。 4.清單標記列表標簽：3種a.無序列表ul屬性：type : 值： disc(默認，實心原點),square(實心方點),circle(空心圓)b.有序列表(OL)屬性: type:取值：1(阿拉伯數(shù)字，默認),a,A,i,I start: 從幾開始c.定義列表(dl) dt: 列表項的標題 dd: 列表項5.超鏈接3種超鏈接:1. 連接到其他頁面2. 錨: 指給超鏈接起一個名字，作用是連接到本頁面或者其他頁面的特定位置。使用name屬性給超鏈起名字3. 連接到郵件: 進入我的郵箱屬性：target: 告訴瀏覽器怎么顯示目標頁面 HTML中已定義4個值： _self :在同一個瀏覽器中顯示 _blank: 打開新的瀏覽器顯示 _parent: 在父窗口中顯示 _top: 在頂級窗口中顯示6.表格標記 table: 表格 屬性：border:邊框width:寬度height：高度align:表格的對齊方式cellpadding:單元格內(nèi)容到邊的距離cellspacing:單元格和單元格之間的距離bgcolor:背景顏色background:背景圖片bordercolorlight:表格的上，左邊框，以及單元格的右，下邊框的顏色bordercolordark: 表格的右，下邊框，以及單元格上，左的邊框的顏色dir:單元格內(nèi)容的排列方式 取值：ltr 從左到右， rtl:從右到左tr: 行 屬性：dir:bgcolor:td: 單元格 屬性： align: 內(nèi)容的橫向?qū)R方式 valign: 內(nèi)容的縱向?qū)R方式 top,middle,bottom width: 絕對值或者相對值(%) height:單元格的高度單元格的合并： 單元格的屬性： colspan: 橫向合并 rowspan: 縱向合并 th: 相當于 + 屬性同caption: 表格的標題 屬性：align: 取值：left,center,right,top,bottomtheadtbodytfoot 寫與不寫的區(qū)別： 1. 當表格非常大的時候，如果不寫，則必須等表格的內(nèi)容全部下載完成才能顯示。但是用tbody標簽的話，那么邊下載邊顯示。2.如果不寫thead,tbody,tfoot那么瀏覽器解析表格內(nèi)容的時候是從上到下解析。如果寫了，那么順序任意，瀏覽器解析的時候還是按照thead,tbody,tfoot的順序顯示內(nèi)容7.框架標記及 框架頁面上不允許有body標簽frameset: 框架的集合rows: 縱向分部框架. cols: 橫向分部框架. 寫法有兩種: 1) 絕對值 200,* ,*代表剩余的 2) 相對值 30%,*frame: 框架. 一個框架顯示一個頁面scrolling: 是否需要滾動條。默認是truenoresize : 固定框架大小bordercolor: 給框架邊框起一個顏色name : 給框架起一個名字內(nèi)嵌框架： 嵌入在一個頁面上的框架.(僅僅IE支持)iframe:屬性： width: 寬度 height： 高度 scrolling : 是否需要滾動條8.表單標記及語義化9.多媒體標記bgsound: 背景音樂 embed: 播放多媒體文件.marquee: 移動屬性：direction 移動目標方向 left,right ,up,down ,up，down移動距離是固定的200px behavior: 行為方式 取值：slide,alternate,scroll scrollamount : 移動速度 loop: 循環(huán)多少圈。負值表示無限循環(huán) scrolldelay: 移動一次休息多長時間。單位是毫秒10.頭標記css筆記一、CSS 概述(了解)*.CSS ： Cascading Style Sheet 層疊樣式表*.CSS 作用就是給HTML頁面標簽添加各種樣式*.為什么用CSSHTML的缺陷： 1. 不能夠適應多種設備 2. 要求瀏覽器必須智能化足夠龐大 3. 數(shù)據(jù)和顯示沒有分開 4. 功能不夠強大 CSS 優(yōu)點：1.使數(shù)據(jù)和顯示分開2.降低網(wǎng)絡流量3.使整個網(wǎng)站視覺效果一致4.使開發(fā)效率提高了二、CSS語法pcolor：red; 選擇器屬性名：屬性值 ; 選擇器后一定是大括號.屬性名后必須用冒號隔開.屬性值后用分號 屬性名和冒號之間最好不要有空格。三、CSS和HTML的結(jié)合方式CSS代碼理論上位置是任意的，但通常寫在style標簽里CSS和HTML的結(jié)合方式有3種：a. 行級樣式表:采用style屬性,范圍只針對此標簽適用大家好b. 內(nèi)嵌樣式表:采用標簽完成。范圍針對此頁面c. 外部樣式表: 采用建立樣式表文件。針對多個頁面.引入樣式表文件的方式:1):采用標簽eg:2):采用import，必須寫在標簽中，并且必須是第一句eg: import url(a.css) ;兩種引入方式的區(qū)別：外部樣式表中不能寫標簽,但是可以寫import語句四、CSS選擇器選擇器分為兩大類:1.基本選擇器 a.標簽選擇器:指的就是選擇器的名字代表html頁面上的標簽pcolor:red ;border:1px dashed green;b.類選擇器：規(guī)定用圓點.來定義優(yōu)點：靈活eg: .onebackground-color:#ff0099; c. ID選擇器：規(guī)定用#來定義eg: #onecursor:hand; 區(qū)別：標簽選擇器針對的是頁面上的一類標簽.類選擇器可以供多種標簽使用.ID選擇器是值供特定的標簽(一個). ID是此標簽在此頁面上的唯一標識。d:通用選擇器： 用*定義,代表頁面上的所有標簽。*font-size:30px;margin-left:0px;margin-top:0px;2.擴展選擇器 a. 組合選擇器:采用逗號隔開eg: p,h1,h2,.one,#twocolor:red ; b. 關聯(lián)選擇器(后代選擇器): 采用空格隔開eg: h4 span icolor:red ; 表示h4標簽中的span標簽中的i標簽的樣式h4和span和i標簽不一定是緊挨著的。 c. 偽類選擇器 1) :靜態(tài)偽類：規(guī)定是用:來定義.只有兩個.只能用于超鏈接. :link表示超鏈接點擊之前的顏色 :visited表示鏈接點擊之后的顏色 eg:a:linkcolor:red ; a:visitedcolor:yellow;注意： a:link定義的樣式針對所有的寫了href屬性的超鏈接(不包括錨) a定義的樣式針對所有的超鏈接(包括錨) 2) :動態(tài)偽類 : 針對所有的標簽都適用:hover : 是移動到某個標簽上的時候:focus : 是某個標簽獲得焦點的時候:active : 點擊某個標簽沒有放松鼠標時eg: label:hovercolor:#00ff00; input:focusbackground-color:#ff9999;border:1px solid red;a:activecolor:blue;五、CSS各種選擇器的沖突(掌握)CSS樣式的沖突:1.ID選擇器 類選擇器 標簽選擇器2.行級樣式表 內(nèi)嵌樣式表 外部樣式表外部樣式表的ID選擇器 內(nèi)嵌樣式表的標簽選擇器原則： 就近原則六、CSS的各種屬性(掌握)? CSS中尺度單位的介紹 CSS的單位:a. 絕對單位 1in=2.54cm=25.4mm=72pt=6pc , pt是點或者磅，pc是派卡b. 相對單位：px, em(印刷單位相當于12個點), %(相對周圍的文字)*字體設置 pfont-size:50px; /*字體大小*/font-style:italic ; /*斜體*/font-weight:bold; /*粗體*/font-family:幼圓; /*字體類型*/font-variant:small-caps; /*小寫變大寫*/*文本設置 pletter-spacing:0.5cm ; /*字母間距*/word-spacing:1cm; /*單詞間距*/text-align:center; /*在所包含容器的中間*/text-decoration:overline; /*字體修飾 underline下劃線 line-through中劃線 overline上劃線*/text-transform:lowercase; /*單詞字體大小寫*/color:red ;*背景設置bodybackground-color:#ff99ff ; /*背景顏色*/background-image:url(images/2.gif) ; /*背景圖片*/background-repeat: no-repeat; /*no-repeat不要平鋪，repeat-x,橫向平鋪，repeat-y 縱向平鋪*/background-position:center right; /*背景位置*/background-attachment: scroll ; /*背景的移動 ,fixed跟著滾動條一起移動，scroll 不動*/*列表設置ul lilist-style:none; /*列表前樣式*/list-style-image:url(images/2.gif) ; /*列表項前圖片*/margin-left:80px; *盒子模型(border margin padding) padding:是內(nèi)容到邊的距離 border: 是邊的粗細 margin:是控件到控件的距離 *定位設置(position,float,clear,z-index)#dposition: absolute; /* 1.絕對定位: 定義橫縱坐標 .脫離了本身的順序流 2.相對定位: 相對的是自己在順序流中原來的位置 */left:100px; /*橫坐標*/top:100px; /*縱坐標*/border:1px solid red ; width:100px;height:100px;background-color:#ff66ff; #d1position: relative; /*相對位置*/left:100px;top:100px;border:1px solid green ;width:100px;height:100px;background-color:#339900; spanposition: relative;left:20px;top:20px; z-index:值任意，值越大離我們越近 float : 浮動 overflow: 超出范圍怎么辦鼠標樣式設置(cursor)七、濾鏡(了解)css濾鏡的兼容性、實現(xiàn)濾鏡效果只是IE內(nèi)核才支持。不過咱們平時還是可以用用透明濾鏡的。之前看到美工組組長的期末網(wǎng)站作品，一直很好奇那些透明效果是怎么做出來的，現(xiàn)在算是有點頭緒了。為什么火狐谷歌chrome等瀏覽器不支持一些css濾鏡在IE下使用的濾鏡，可以實現(xiàn)很多不錯的特效，但是在chrome和火狐opera等瀏覽器里這些就全都失效了，這是為什么呢？找了一下原來是因為濾鏡只是屬于IE瀏覽器開發(fā)下的功能，不支持IE內(nèi)核的瀏覽器也就都不支持這些濾鏡。 不過一般都支持透明濾鏡，只是寫法不一樣，如下：要設置一下透明度為60%的DIV就應該這樣寫了：（加到CSS里面就好）div.transp /* make the div translucent */ opacity: 0.6; /* Firefox, Safari(WebKit), Opera,chrome/ filter: alpha(opacity=60); /* IE 8 */ filter: alpha(opacity=60); /* IE 4-7 */ zoom: 1; /* needed in IE up to version 7, or set width or height to trigger hasLayout */ filter: alpha(opacity=60); /* IE 8 */ 為IE下寫法，opacity: 0.6; 為火狐等瀏覽器下寫法，所以要都支持這個濾鏡，就得兩個都寫上（搞的這麻煩，看得出W3C標準規(guī)范化可以實現(xiàn)的好處了）CSS 濾鏡詳解(大多數(shù)只支持IE)CSS樣式表是一種為超文本標簽語言提供增強補充服務的技術(shù)，可對每一個html的標簽做精雕細刻的修飾。只用html制作的網(wǎng)頁，對頁面內(nèi)各部分的修飾能力有限且語句煩鎖，樣式表正是彌補這一缺陷的有力技術(shù)，它語句文法簡單，只要在源碼中插入style語句就可輕易實現(xiàn)頁面內(nèi)任意文本顏色、背景、邊框、行距、字距的添刪和修飾等功能，使網(wǎng)頁更加生動活潑，從而獲得滿意的效果。當然，樣式表的強大還依靠的就是它的濾鏡功能。因為有了濾鏡，大家就可以輕易地創(chuàng)造出“專業(yè)”的藝術(shù)效果。為了能幫助大家高效使用好樣式表濾鏡，筆者將對樣式表濾鏡各方面的內(nèi)容進行詳細介紹。一、什么是樣式表濾鏡 說到濾鏡，其實它并不是對圖像進行了什么處理，而是在瀏覽器中對使用了該屬性的對象進行一定的修飾。樣式表濾鏡實際上是樣式表一個新的擴展部分，使用這種技術(shù)簡單的語法就可以把可視化的濾鏡和轉(zhuǎn)換效果添加到一個標準的html元素上，例如圖片、文本、以及其他一些對象，為頁面添加一些豐富的變化。如果大家有一些腳本語言的基礎，能夠把濾鏡效果與類似javascript的腳本代碼做一些結(jié)合，就可以擁有一個在樣式表濾鏡與腳本共同作用下建立的強大的動態(tài)交互文檔工具?，F(xiàn)在能使用的濾鏡有13個之多，不過要欣賞到這些濾鏡的特效，必須要求用戶的瀏覽器必須在IE4.0/NC6.0之上，因為只有這些版本的瀏覽器才能支持樣式表濾鏡效果。 二、常用的樣式表濾鏡 隨著樣式表技術(shù)的不斷成熟，其濾鏡功能和種類也在不斷增多。如果用戶能夠熟練地混合使用它們，將可以產(chǎn)生意想不到的效果。在操作上，用戶只需要了解具體濾鏡的實際效果后，就能根據(jù)實際進行微調(diào)了。為了使大家能有針對性地使用濾鏡，下面就把一些常用濾鏡的功能和參數(shù)詳細介紹如下： 1、濾鏡 作用：該濾鏡可以實現(xiàn)各種溶入效果，如果大家將該濾鏡與網(wǎng)頁腳本語言結(jié)合起來，對濾鏡的參數(shù)進行處理的話，就能很輕易地做出淡入淡出的效果來。 語法：FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity，style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy) 參數(shù)：Opacity參數(shù)代表圖象的起始透明度，其默認的數(shù)值是從0到100，0代表完全透明，100代表完全不透明；FinishOpacity是一個可選參數(shù)，如果想要設置漸變的透明效果，就可以使用他們來指定結(jié)束時的透明度，作用范圍也是0到100；Style表示透明區(qū)域的形狀特征，其中“0”代表統(tǒng)一形狀，“1”代表線形?！?”代表放射狀，“3”代表矩形；startx表示漸變透明效果開始處的X坐標，starty代表漸變透明效果開始處的Y坐標，finishx代表漸變透明效果結(jié)束處的X坐標，finishy代表漸變透明效果結(jié)束處的Y坐標。 2、模糊濾鏡 作用：該濾鏡主要是讓圖象產(chǎn)生一種模糊效果。 語法：filter:blur(add=add，direction=direction，strength=strength) 參數(shù)：該濾鏡主要包括三個參數(shù)，其中add是用來指定圖象是否被改變成印象派的模糊效果，模糊效果是按順時針的方向進行的，它的數(shù)值應該是ture或false；direction參數(shù)是用來設置模糊的方向的，其中0度代表垂直向上，每45度為一個單位，默認值是向左的270度；strength 參數(shù)代表有多少像素的寬度將受到模糊影響，缺省的參數(shù)值是5個像素，而且該參數(shù)值只能使用整數(shù)來指定。 3、斜影濾鏡 作用：該濾鏡主要是為對象建立輪廓的影子效果的，它可以在指定的方向建立物體的投影； 語法：filter:shadow(color=color,direction=direction)參數(shù)：斜影濾鏡只有兩個參數(shù)，其中color代表投影的底色，該數(shù)值是用英文字母來代替的，例如投影底色是紅色的話，就應該設置color=red;direction參數(shù)是用來設置投影方向的，如果該數(shù)值是0的話，就代表垂直投影，此外該數(shù)值每45度為一個單位，它的默認值是向左的270度。 4、發(fā)光濾鏡 作用：該濾鏡可以給圖象或者文字產(chǎn)生一種發(fā)光效果； 語法：filter:glow(color=color,strength=strength) 參數(shù)：該濾鏡的color參數(shù)與陰影濾鏡的color參數(shù)功能幾乎是一樣的，不過這里的color參數(shù)是用來設置發(fā)光顏色的;strength參數(shù)是用來指定發(fā)光強度的，其值為1到255之間的任何整數(shù)。 5、燈光濾鏡作用：燈光濾鏡是模擬光源來投射文字或者圖象，使圖象和文字能產(chǎn)生一定的投射效果； 語法：filter:light 參數(shù)：一旦為對象定義了“l(fā)ight濾鏡屬性后，大家就可以調(diào)用它的“方法(Method)來設置或者改變屬性，該濾鏡可用的方法有：AddAmbient方法是用來加入包圍光源的，AddCone方法是用來加入錐形光源的，MoveLight方法是用來移動光源的，Changstrength方法是用來改變光源強度的，Changcolor方法是用來改變光的顏色的，Clear方法是用來清除所有光源的。 6、遮罩濾鏡作用：該