第一篇：html和css總結

Html 超文本標簽語言，用<>表示一個一個標簽，必須有頭有尾，

….

網頁內容寫在里面分為兩大類：行級標簽和塊級標簽行級標簽以行為單位，不會自動換行塊級標簽以塊為單位，新建是自動換行塊級標簽分為基本塊級標簽標題標簽

到

段落標簽
分割線標簽
布局塊級標簽有序列表標簽

無序列表標簽

定義描述標簽

標題

…

表格
…
…

… …

… …

colspan可以定義所跨的列數 rowspan可以定義所跨的行數
圖像標簽 src 導入圖片的地址，alt是當圖片打不開時顯示的文字，title表示鼠標懸停時提示的文字鏈接標簽
… Href 要打開鏈接的路徑，target表示鏈接打開的位置，…表示點擊那里觸動鏈接常用的超鏈接頁面間錨鏈接創建跳轉標記
乙位置創建跳轉鏈接
甲位置表示在頁面上從甲位置通過name=“marker”跳轉到乙位置。功能性鏈接
行級標簽：范圍標簽用style設置屬性換行標簽
表單元素：單行文本框：text 密碼框：password 單選按鈕：radio 提交按鈕：submit 重置按鈕：reset 普通按鈕：button 圖片按鈕：image 復選框：checkbox 下拉列表：select 文本域：textarea 文件域：file 下拉列表文本域 …. 其他都是幾個表單元素的屬性需要特殊記憶 readonly 表示只讀 disable表示禁用
selected表示下拉列表默認選中項
checked表示設置單選或者復選的默認選中項
name表示在服務器端可以通過該屬性來獲得表單元素的值
框架內聯框架css 層疊樣式表組成部分：選擇器，用來查找要修飾的元素聲明，包括屬性和屬性值基本的三種選擇器標簽選擇器類選擇器 id選擇器 css三種樣式行內樣式，用style 內部樣式表，在head標簽里加一個style標簽，用來修飾整個頁面外部樣式表，把css樣式寫在一個.css的文件里。用兩種方式引入：鏈接式：<link href=”css/css.css” rel = “stylesheet” type= “text/css” /> 導入式：<style type = “text/css”> @import url(“css/css.css”)</style> 內部樣式表和外部樣式表的優先級和引入順序和選擇器有關復合選擇器：后代，以空格的方式隔開，修飾子孫輩并集，多種選擇器之間用逗號隔開子代，以>隔開，只修飾兒子相鄰兄弟選擇器,以加號隔開屬性，把屬性寫在[]里，在指定的元素里指定屬性超鏈接的偽類 a：link沒點擊之前的 a：visitd點擊后的 a：hover鼠標放在上面的 a：active鼠標點擊后沒有放開順序是lvha常用的樣式：1、Font2、文本樣式3、背景樣式以background開頭的屬性背景色背景圖背景的重復背景的偏移4、列表樣式。List-style-type5、盒子模型6、浮動屬性float7、清除浮動clear8、定位 position，常用相對定位和絕對定位 Relative相對自己原來的位置移動Absotute相對于元素有定位的父元素來移動9、盒子的疊放層次用z-index，數值越大越在上面<h2><a name="2" >第二篇：前臺html、css、js培訓心得體會</a></h2>個人心得體會在學習中成長，在成長中實踐。人生中就是這樣，每一次的學習就是一次實踐的機會。每一次的實踐就是一次挑戰，我們能害怕嗎？答案是肯定的：“不能!”。不管是在什么情況下，都是不能，不會，也不可以害怕挑戰。我們之所以培訓，目的就是增強我們挑戰的信心。我不知道別人通過培訓學到了多少，感受到了多少，了解到了多少。只知道通過培訓自己感悟頗深。首先要說明的一點就是通過這次培訓我學到了很多，見過的聽過的，沒見過的沒聽過的統統包含在內。HTML六天的學習中，學習了html的基本標記，這大概是學習一門語言最基礎的一部分吧。但是也不是說背一背就解決問題的，選擇IT，程序員這一方面，只要多練習，多敲代碼感覺就好了，所以熟練的使用這些標記其實不是很大的問題，對自己來說，比較難的是一個表格和框架，也許會有人說，表格有什么難的，就<tr><td>行列的問題啊，但是不知道為什么，在學習的那幾天對于表格的學習和接受能力都沒有別的那么好，表格的整體框架能搭出來，但是就是對于表格的美化總做不到自己心里所預期的那樣。其實練習的話也是挺多的，對于表格的網頁練習做了應該也有一二十個的，但是就是沒那么理想，所以這方面的話也是需要自己多加練習和修正的，因為表格的用處還是挺大的。HTML的學習方面還有框架和表單，框架的話，就是一個網頁的主體了，網頁的大致形式基本上從你的框架結構就可以知道的，學習框架，重要的就是網頁的布局如何劃分，然后利用框架的嵌套，浮動就可以解決的，學習過程也不會是很大的難度。再者就是CSS，CSS課程雖然學習時間不長，但是卻是更應該學好的一個模塊。因為我們都知道，在正真的開發中，CSS的作用起到了決定性，一個網頁做得優劣，完全取決與CSS的掌握。CSS就是網頁樣式，一個網頁的整體美感，在你確定了框架之后，就看你的CSS樣式的添加了，所以一直以來都很想把CSS學好。記得CSS學習的那幾天，自己的消化還是很好的，自己去獨立完成練習的時候也是沒有太大難度的，但是不知道是為什么，到后面學習JS 的時候，操作CSS時居然會吧CSS和HTML弄的有點混淆，這一點一直沒做好。CSS的學習還有一個地方就是浮動，因為存在塊元素和行內元素，塊元素因為其本身特性，一個塊元素標記他要占用一整行的空間，而一個行內元素他只能占用行內的一些空間，但是在實際操作中，很多時候我們卻要想將多個塊元素排在同一行，或者將多個行內元素排在不同行，這時候就可以使用浮動的方法來實現，浮動最主要做的就是這個，唯一要記住的一點就是做了浮動之后，如果他的父元素是沒有進行匡高的設定的話，是不是要進行清除浮動，防止下面的操作也是有浮動的。JS學習不多，只是初步了解，自己也很少練習，因為練習的時間只要是用于html和CSS。在JS中取得元素id并修改其樣式，這些看起來很容易的操作，但卻不是想象中的那么簡單，很多時候操作著就亂了，這應該是我練習少的緣故，加上CSS把握不是很好。今后要勤加練習，我覺得IT這個行業很有趣，也很神秘，我想通過自己的學習來揭開它那神秘的面紗。<h2><a name="3" >第三篇：在HTML中加入CSS教案</a></h2>《在HTML中加入CSS》教學設計文昌華僑中學陳文芳模塊：信息技術·選修《網絡技術應用》第五章第二節：在HTML中加入CSS 教材版本：教育科學出版社學生：高中二年級課時： 1課時一、教材分析《在HTML中加入CSS》屬于5.2.2 CSS樣式表這一教學內容，是高中信息技術·選修《網絡技術應用》的第五章第二節動態網頁中的內容。本節內容包括嵌入樣式表、內聯式樣式表、外聯式樣式表，教材安排的思路：由具體標簽——當前網頁——多張網頁的整體風格進行設置，重點是外聯式樣式表的使用。二、教學對象分析通過前階段的學習，學生已經認識了動態網頁，并對HTML的標簽及屬性、樣式表的概念及書寫格式也有了了解。由于學生的水平有限，而且《在HTML中加入CSS》對于學生來說是全新的內容，不易掌握，但學生有著非常強烈的求知欲，渴望通過css優化自己的主題網站。三、教學目標1、知識與技能(1)熟練掌握CSS的基本應用：嵌式樣式表、內聯式樣式表、；(2)掌握CSS的價值體現：外聯式樣式表的應用。2、過程與方法(1)嘗試利用代碼選擇進行CSS的初步設計，以取感性的認識；(2)通過在網頁內加入嵌入式和內聯式的CSS樣式表來達到熟練掌握CSS基本應用的目的；(3)通過任務的完成學會應用同一CSS樣式表來掌握外聯式CSS樣式表的。3、情感態度與價值觀（1）通過CSS樣式表的學習，提高學生美化網頁的技能。（2）培養學生的探索、實踐能力。四、教學重點與難點1、教學重點：(1)CSS的基本應用：嵌入式樣式表、內聯式樣式表；(2)CSS的價值體現：外聯式樣式表的應用對于網站頁面風格統一的作用。2、教學難點：外聯式樣式表的應用；五、教學設計思路首先提問學生如何在網頁中改變文字的格式，提出像新浪網這樣的網站包含很多文字，同時又要保持統一的風格格式時，這樣一一設置格式就很費時、費力，設疑，有沒有更快的方法對網頁元素的格式進行設置呢？然后在網頁中添加樣式，引出學生思考：為什么文字的格式沒有改變，添加的樣式在那里呢？目的，復習舊知識引出本節課的內容。其次，講解本節內容，通過教師演示——學生操作、探究——學生總結的方式進行。目的，培養學生的獨立思維、操作技能、歸納能力。最后，教師進行概括性的總結。目的，理清脈絡。六、教學方法講授法、任務驅動法、個別指導法、賞識教育法、問題教學法七、教學準備基于網絡的多媒體計算機教室、PowerPoint教學課件八、教學過程教師活動：在FrontPage中呈現已準備好的兩句話，提問學生如何改變文字的格式，并請一位學生操作。教師提問：如果要完成像新浪網包含這么多文字的格式，又要保持統一風格，大家覺得我們所用的方法快捷嗎？學生活動：回答老師問題。教師活動：但會費時費力。那有沒有更快的方法呢? 學生活動：思考問題。教師活動：在網頁中可以使用CSS樣式表來規定文字的格式。教師活動：簡單介紹css樣式，然后演示添加樣式的過程，并要求學生觀察在哪里添加了樣式。教師提問：請同學們說說在哪里添加了樣式呢？學生活動：思考、回答問題。教師活動：給出答案，在HTML代碼視圖中。這就是今天我們要學習的內容——在HTML中加入CSS。簡單介紹CSS。教師活動：請同學們把課本打開到P115頁，并請一位同學回答在HTML中加入CSS有幾種方法。教師活動：演示在HTML中加入CSS的幾種方法教師活動：講授嵌入式樣式表的使用方法。1、樣式表 方法：只需在每個要用樣式的HTML的標記后寫上屬性就可以了。CSS屬性書寫格式：Style=”color:red;font-size:24pt;”任務1：用嵌入式樣式表對網頁gushi1的標題“靜夜思”進行設置，字體為紅色，字號為24pt。學生活動：依據教師的方法，進行練習。教師活動：巡回輔導，對樣式的書寫格式進行糾錯。教師活動：總結嵌入式的使用方法。嵌入式樣式表主要用于對具體的標簽作具體的調整，其作用的范圍只限于本標簽。并不能體現出css的優越性。教師提問：如果我想改變整張網頁的文字格式，使用嵌入式好用嗎？學生活動：回答老師問題。教師活動：這時我們就可以使用內聯式樣式表。1、內聯式樣式表：作用于當前頁教師活動：教師講授內聯式樣式表的使用方法。方法：把樣式表定義語句放在標簽<style type=”text/css”></style>中，并把這一部分語句放在HTML文件的<body>標簽之前。<style type=”test/css”> 樣式表css內容 </style> 任務2：使用內聯式改變gushi1中的詩句，樣式自定義。學生活動：依據教師講授的方法，進行練習。教師活動：巡回輔導，對格式進行糾錯。教師提問：如果站內有幾十張網頁都要用到此格式，該如何做呢？有沒有更簡單的方法？學生活動：回答老師。教師提問：我們可以用外聯式樣式表，不僅可以快速改變文字的格式，而且能夠保持網頁的整體風格。2、外聯式樣式表教師活動：教師講授外聯式樣式表的使用方法。方法：（1）將樣式定義成一個”.css”的文件。（2）在網頁中的<head></head>標簽對之間插入引用代碼： <link rel=”tylesheet” href=”文件路徑”> 任務3：①用外聯式改變gushi1的詩句。②使用外聯式改變gushi1、gushi2、gushi3、的詩句，使之具有統一的格式。學生活動：完成任務3，教師活動：巡回輔導，糾錯學生的書寫格式。教師活動：對學生完成的情況進行評價。并請一名學生演示操作過程。教師活動：我們來總結一下，CSS樣式表有什么樣的優點？學生活動：總結CSS樣式表的優點。教師活動：總結CSS的優點。1、避免在標識字符和設置段落格式等操作時重復定義需要的樣式（如字體、字號、顏色），從而使應用該樣式的網頁具有相同的風格。2、只需要修改一個CSS代碼就可以改變頁數不定的網頁外觀和格式，提高網頁編輯效率。3、可以“隨心所欲”地控制頁面布局和外觀。4、在所有瀏覽器和平臺之間具有較好的兼容性。教師活動：今天，我們一起學習了如何在HTML中加入不同類型的CSS樣式表。那請同學們回憶一下，在HTML中加入CSS樣式表有幾種方法，分別是什么？學生活動：回憶、總結。教師活動：總結本節課的教學內容。<h2><a name="4" >第四篇：HTML個人總結</a></h2>HTML 網站開發的主要原則是：– 用標簽元素HTML描述網頁的內容結構； – 用CSS描述網頁的排版布局；– 用JavaScript描述網頁的事件處理，即鼠標或鍵盤在網頁元素上的動作后的程序 HTML（Hyper Text Mark-up Language 超文本標記語言）的縮寫，是最基礎的網頁語言。Html是通過標簽來定義的語言，代碼都是由標簽所組成。Html代碼不用區分大小寫。Html代碼由<html>開始</html>結束。里面由頭部分<head></head>和體部分<body><h2><a name="5" >第五篇：html標簽總結</a></h2><html></html>:標記中的內容是用html語言<head></head>:網頁頭部信息<title></title>:網頁標題<body bgcolor/background=“"></body>:網頁主體bgcolor/background:背景顏色/背景圖片:文字size:文字大小color:文字顏色face:字體<hr size=”“ color=”“ width=”“/>:橫線size:粗細color:顏色width:寬度<img src=”“ width=”“ height=”“ border=”“/>:圖片src:圖片引入路徑width:圖片寬度height:圖片高度border:圖片邊框<embed src=”“ width=”“ height=”“></embed>:視頻src:視頻引入路徑width:視頻寬度height:視頻高度 :換行:加粗:加粗<s></s>:刪除線:下劃線:字體傾斜:字體傾斜<ul type=”circle/disc/square“><li></li>:無序列表內容</ul>:無序列表type=”circle/disc/square“:空心圓/實心圓/方形<ol type=”1/a/i“ start=”“><li></li>:有序列表內容</ol>:有序列表type=”1/a/i“:數字/字母/羅馬數字start:從幾開始</pre>:預處理空格<marquee scrollamount=”“ behavior=”alternate/scroll/slide“ direction=”up/down/left/right“ width=”“ height=”“ bgcolor=”“></marquee>:滾動scrollamount:滾動速度behavior=”alternate/scroll/slide“:滾動方式direction=”up/down/left/right“:滾動方向width:滾動寬度height:滾動高度bgcolor:滾動軌跡顏色<a href=”“ target=”_blank/_self“ name=”“></a>:超鏈接href:跳轉路徑target:控制目標網頁跳轉方式_blank/_self:原窗口保留，打開另一個網頁/原窗口跳轉另一個網頁”#“:錨點，當前頁面跳name:命名<form action=”“ method=”get/post“><input type=”text“ size=”“ maxlength=”“ value=”“/>type=”text“:文本框size:文本框長度maxlength:輸入內容最大長度value:默認內容<input type=”password“ size=”“ maxlength=”“ value=”“/>type=”password“:密碼框size:密碼框長度maxlength:輸入內容最大長度value:默認內容<input type=”radio“ name=”“ checked=”checked“/>type=”radio“:單選框name:命名checked=”checked“:默認當前選中<input type=”checkbox“ checked=”checked“/>type=”checkbox“:多選框checked=”checked“:默認當前選中<input type=”file“/>type=”file“:上傳域<input type=”submit“ value=”“/>type=”submit“:提交按鈕value:默認內容<input type=”reset“ value=”“/>type=”reset“:重置按鈕value:默認內容<input type=”button“ value=”“/>type=”button“:普通按鈕value:默認內容<input type=”hiddle“/>type=”hiddle“:隱藏內容<input type=”image“ src=”“ width=”“ height=”“ border=”“/>type=”image“:圖片提交按鈕src:圖片路徑width:圖片寬度height:圖片高度border:圖片邊框<select><option selected=”selected“></option>:下拉框內容</select>:下拉框selected=”selected“:默認當前選中<textarea cols=”“ rows=”“></textarea>:文本域cols:文本域寬度rows:文本域高度</form>:表單標記action:跳轉路徑method=”get/post“:提交方式get:所填內容顯示在地址欄，所填內容有限制（默認方式）post:所填內容不顯示在地址欄，內容以一種加密方式，所填內容無限制<table align=”left/center/right“ width=”“ height=”“ border=”“ cellspacing=”“ cellpadding=”“bordercolor=”“ bgcolor/background=”“><caption align=”left/center/right/top/bottom“></caption>:表格標題align=”left/center/right/top/bottom“:標題居左/居中/居右/居上/居下<tbody><tr align=”left/center/right“ valign=”top/middle/bottom“ bgcolor/background=”“ height=”“><td colspan/rowspan=”“ align=”left/center/right“ valign=”top/middle/bottom“ bgcolor/background=”“height=”“ width=”“></td>:格colspan/rowspan:行合并/列合并align=”left/center/right“:內容水平方向居左/居中/居右valign=”top/middle/bottom“:內容垂直方向居上/居中/居下bgcolor/background:格背景顏色/背景圖片height:格高度width:格寬度</tr>:行align=”left/center/right“:行內容水平方向居左/居中/居右valign=”top/middle/bottom“:行內容垂直方向居上/居中/居下bgcolor/background:行背景顏色/背景圖片height:行高</tbody>:表格塊</table>:表格align=”left/center/right“:表格居左/居中/居右width:表格寬度height:表格高度border:邊框粗細cellpadding:表格內容據邊框距離cellspacing:表格內外邊框距離bordercolor:邊框顏色bgcolor/background:表格背景顏色/背景圖片<frameset frameborder=”“ rows/cols=”“ broder=”“><frame src=”“ noresize=”noresize“ name=”“/>src:引入路徑noresize=”noresize“:骨架固定name:命名</frameset>:網頁分割rows/cols:網頁上下/左右分割frameborder:骨架顯示/隱藏border:骨架粗細<iframe width=”“ height=”“ frameborder=”“ src=”“ name=”x“> :浮動框架
width:寬度
height:高度
frameborder:浮動框架邊框
src:引入路徑
name:命名
target=”x":控制網頁顯示區域
href:跳轉路徑

久久99精品久久久久久琪琪,久久人人爽人人爽人人片亞洲,熟妇人妻无码中文字幕,亚洲精品无码久久久久久久

html和css總結[精選合集]

第一篇：html和css總結

到

相關范文推薦

常用CSS縮寫語法總結

html總結[共五篇]

網頁制作HTML總結（范文大全）

CSS小結

css 實驗報告

CSS試題

【每日一步】CSS Hack 總結

HTML學習心得