? ? ? ?第一次接觸html的時候，那時我還是大二，當時老師給了我們一份筆記就是些經常用的html標簽和css的樣式，html是我第一個學會的一種計算機語言，也是html和css讓我看到五彩繽紛的編程世界，如今工作也有些年頭了，還是不時會翻出之前的筆記來找找標簽（平時主要是寫java），筆記現在也完善了不少（我需要用到的基本都能找到）

HTML基操

標簽的類型：1.有開始標簽和結束標簽。 需要把網頁的內容封裝到標簽中2.開始標簽與結束標簽都是在一個標簽體內的。 =========================================================== 注釋：<!--注釋的內容-->================================================================ <h1></h1>to<h6></h6> 標題標簽 <b></b> 定義粗體文本 <i></i> 定義斜體文本 <em></em> 定義強調文本，實際效果與斜體文本差不多 <strong></strong>定義粗體文本，與<b>的作用基本相同 <small></small> 定義小號文本 <bdo></bdo> 定義文本顯示方向，內有dir屬性，只能取值ltr或rtl <p></p> 段落標簽 <hr/> 水平線標簽 <br/> 換行標簽  下標標簽  上標標簽,例如2的10次方10就放在標簽中 <pre></pre> 原樣標簽（原樣標簽會保留空格和換行符） <span></span> 行內標簽 <div></div> div標簽的內容會獨立占一行 <center>這個文本居中對齊。</center>--------------------------------------------------------------------- <table>表格標簽表格使用到的標簽:<table border="1" cellspacing="0"></table> 表格 //cellspacing是單元格之間的間隔<tr></tr> 行<td></td> 單元格<th></th> 表頭(放在tr中的) 默認的是<td>居中加粗<caption></caption> 表格的標題<thead></thead> 表頭 一個表格中可以沒有存在thead<tbody></tbody> 表體 一個表格至少要存在一個tbody，也可以存在多個<tfoot></tfoot> 表尾 一個表格可以不存在tfoot以前的瀏覽器一但遇到了一個<table>的開始標簽，就必須要等到遇到table標簽的結束 標簽的時候，才會在網頁中顯示一個表格的內容。但是一個瀏覽器只要遇到一個完整的 tbody標簽，那么就可以顯示當前頁面的信息。表格常用的屬性:border="1px" 設置表格的邊框bordercolor="red" 設置表格邊框的顏色width="100px" 設置表格的寬度height="50px" 設置表格的高度align="center" 設置對齊方式（center是居中right是右對齊left是左對齊）colspan="2" 設置單元格占據指定的列數rowspan="2" 設置單元格占據指定的行數cellspacing="0" 單元格之間的間隔為零border-collapse:collapse; 將單元格邊框組合為單一邊框 css樣式 ---------------------------------------------------------------------<ol type="li前的符號的類型" start="20"><li></li> </ol> 有序的列表標簽，start表示列表從20開始type可填1,a,A,i,I,默認是1開始<ul type="li前的符號的類型"><li></li> </ul> 無序的列表標簽,type可填disc默認的實心圓，circle空心圓,square實心方塊<dl><dt></dt><dd></dd> </dl> 項目列表標簽---------------------------------------------------------------------常用字符實體標簽(其余的查w3school表):空格 &nbsp;小于號 &lt;大于號 &gt;人名幣 &yen;版權 &copy;商標 &reg;引號 &quot;單引號 &apos; ---------------------------------------------------------------------媒體標簽:<embed src="file:\\\音樂的路徑" hidden="true為隱藏音樂插件，false是顯示音樂插件"></embed> 插入一個音樂或者視頻的標簽<marquee direction="設置活動字幕的滾動方向" scrollamount="飄動的速度" onmouseout="this.start()" onmouseover="this.stop()">飄動的字</marquee> 飄動標簽(onMouseOut="this.start()" onMouseOver="this.stop()"當挪開時繼續飄動，當鼠標放上去時停止飄動)<video src="file:\\\視頻的路徑"></video> 添加視頻標簽<img src="圖片的路徑"> 圖片標簽：img標簽常用的屬性：width=設置圖片寬度height=設置圖片高度alt=如果圖片資源無法找到，那么就顯示對應的文字對圖片進行說明。align="absmiddle" 使圖片的中間和后面的文字中間對齊title="獲得焦點顯示內容" -------------------------------------------------------------協議：file協議：file協議（文件協議）這種協議主要是用于搜索本地機器的資源文件的。格式：file：\\\f：\美女\1.jpghttp協議：瀏覽器會馬上啟動http解釋器去解釋該網址，首先會在本地機器去找一個hosts文件，那么瀏覽器就會去到對應的dns服務器去尋找該域名對應的主機名。格式：http：\\www.baidu.com郵件的協議：mailTo格式:mailTo:123456@qq.com迅雷的協議：thunder格式：thunder://abc/aa一個人的武林.avi---------------------------------------------------------------------超鏈接標簽: <a href="http:\\www.baidu.com">百度</a> 超鏈接標簽超鏈接標簽常用的屬性:href:用于指定連接的資源target:設置打開新資源的目標 _blank是在獨立的窗口上打開新資源 _self是在當前窗口打開新資源a標簽的原理：1.a標簽href屬性值如果是以http開頭的，那么瀏覽器會馬上啟動http解釋器去解釋該網址，首先會在本地機器去找一個hosts文件，那么瀏覽器就會去到對應的dns服務器去尋找該域名對應的主機名。2.如果a標簽的href屬性值沒有以任何協議開頭，那么瀏覽器就會啟動file協議解釋器去解釋該資源路徑。3.如果a標簽的href屬性值并不是以http開始，而且其他的一些協議，那么這時候瀏覽器就會去到我們本地的注冊表中去查找是否有處理這種協議的應用程序，如果有，那么馬上啟動該應用程序處理該協議。超鏈接標簽的作用:1.可以用于鏈接資源。2.錨點定位(點擊2可跳到1處）：1.首先編寫一個錨點 錨點的格式: <a name="錨點的名字">數據</a>2.使用a標簽的href屬性連接到錨點處。 <a href="#錨點的名字">數據</a>---------------------------------------------------------------------框架標簽:frameset: 一個frameset可以把一個頁面切割成多分。只能按照行或者列切割。frame:不能切割的。frame是位于frameset中。iframe：內聯框架 可在網頁中用src連接另外一個網頁或圖片。注意：1.frameset標簽不能用于body標簽體內容中。2.若要在一個frame中點擊鏈接顯示在另外一個frame中，那么先將想要顯示的frame先用name命名，再在點擊的超鏈接中用targen="frame的名字"即可。 3. name: 一般和a標簽聯合使用，a標簽的target值=name值，a標簽的連接結果內容會顯示在此frame中scrolling：滾動條，no：不顯示滾動條，yes：顯示滾動條，auto：自動顯示滾動條noresize:不能改變大小-------------------------------------------------------------------------------- 表單標簽：表單標簽的作用是用于提交數據給服務器的。表單的根標簽是<form>標簽form屬性:<form action="http://www.baidu.com"></form>該屬性是用于指定提交數據的地址注意：表單項的數據如果需要提交到服務器上面，那么表單項必須要有name的屬性值。<form method="post"></form>指定表單的提交方式 get:默認使用的提交方式。提交的數據會顯示在地址欄上。post:提交的數據不會顯示在地址欄上，數據大小不受地址欄限制，用于提交敏感數據。<from onsubmit="return checkAll()"></from>表單提交觸發事件表單提交的時候會觸發onsubmit事件的，如果onsubmit事件的方法返回的是true，那么該表單允許提交，如果返回的是false，該表單不允許提交。常用的屬性（非form中屬性）:<input type="text" placeholder="請輸入用戶名" maxlength="6" />是文本框<input type="password" />是密碼框<input type="radio" />是單選框 jq中pror設置默認 兩個單選框設置同一個name可分到同一個組<input type="checkbox" />復選框 同一組的復選框name的屬性值要一致<input type="file" />文件框<textarea rows="10" cols="30" /></textarea>文本域<input type="button" /> 創建一個按鈕<input type="submit" value="提交"/>提交按鈕<input type="reset" value="重置" />重置按鈕<input type="hidden" name="id" value="001" />隱藏域<input type="file" name="myFile" /> 附件 checked 可將此項設置為默認項value="xxx"設置值需要提交的都要設置值onclick="xxx"點擊此按鈕需要調用的js對象下拉框：來自的城市:<select><option value="">請選擇</option><option value="北京">北京</option><option value="上海">上海</option><option selected value="廣州">廣州</option> //selected默認的選項<option value="深圳">深圳</option></select>

CSS基操

html 在一個網頁中負責的事情是一個頁面的結構。 css（層疊樣式表）在一個網頁中主要負責了頁面的數據樣式。 ============================================================================= 注釋：/*css的注釋內容*/============================================================================== 編寫css代碼的方法:第一種：在style標簽中編寫css代碼。 只能用于本頁面中，復用性不強。格式：<style type="text/css">編寫css代碼。</style>第二種：可以引用外部的css文件。 推薦使用。方式1：使用link標簽。 推薦使用。格式：<link href="css文件的路徑" rel="stylesheet" type="text/css">方式2：使用<style>引入格式：<style type="text/css">@import url("css的路徑");</style>第三中：直接在html標簽使用style屬性編寫。 只能用于本標簽中，復用性差。例子：<a style="color:red;text-decoration :none" href="#">新聞標題</a>---------------------------------------------------------------------------- 選擇器：選擇器的作用就是找到對應的數據進行樣式化。一.標簽選擇器：就是找到所有指定的標簽進行樣式化。格式：標簽名{樣式1：樣式2...}例子：div{color:red;font-size:20px;}二.類選擇器:使用類選擇器首先要給html標簽指定對應的class屬性值。格式:.class的屬性值{樣式1；樣式2。。。}類選擇器要注意的事項：1.html元素的class屬性值一定不能以數字開頭。2.類選擇器的樣式是要優先于標簽選擇器的樣式。三.ID選擇器:使用ID選擇器首先要給html元素添加一個id的屬性值。格式：#id屬性值{樣式1；樣式2。。。。。}id選擇器要注意的事項：1.ID選擇器的樣式優先級是最高的，優先于類選擇器與標簽選擇器。2.ID的屬性值也是不能以數字開頭的。3.ID的屬性值在一個html頁面中只能出現一次。四.交集選擇器格式：選擇器1 選擇器2{樣式1，樣式2，。。。。}五.并集選擇器：對指定的選擇器進行統一的樣式化。格式：選擇器1，選擇器2...{樣式1;樣式2....}六.通用選擇器:格式：*{樣式1;樣式2...}七.偽類選擇器:偽類選擇器就是對元素處于某種狀態下進行的樣式。a:link {color: #FF0000} /* 未訪問的鏈接 */a:visited {color: #00FF00} /* 已訪問的鏈接 */a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */a:active {color: #0000FF} /* 選定的鏈接 */注意：1.a:hover必須被置于a:link和a:visited之后，才是有效的。2.a:active 必須被置于 a:hover 之后，才是有效的。text-decoration:none;//a標簽不要下劃線text-decoration:underline;//a標簽要下劃線八.div起名字時可以取兩個類名，css中兩個類名都可以控制樣式例如div的類名為class="myclass box"那么myclass和box都可以控制這個div的樣式 -------------------------------------------------------------------- 1.span中不會自動換行的bug如aaaaaaaaaaaa css加上word-wrap:break-word; overflow:hidden;2.span既可以設置寬高又可以使他前后不換行的 css加上display:-moz-inline-box; /* css注釋：for ff2 */ display:inline-block;*****************************************************樣式表內的基本內容 1、文字效果 font: normal 26px/38px "微軟雅黑"; // 文字樣式：不加粗 字號26像素 行高38像素 微軟雅黑字體 font-family: "宋體"; font-size: 12px; color: #555; text-align: center;(left/right) //文字居中,居左或居右 font-weight:bold;文字加粗font-weight:800;也是加粗 text-indent:10px;/*首行縮進*/ /* 行高與首行縮進可 line-height:10px;行高 調整盒子內文字的位置*/將行高和div高度一樣即可上下居中 color:rgba(0,0,0,0.5); 文字顏色rgb#000黑色，0.5透明度50%； text-decoration:line-through; 文字中加一橫，劃掉的效果 font-family:"Microsoft YaHei",微軟雅黑,"MicrosoftJhengHei",華文細黑,STHeiti,MingLiu2、背景 background-color: #4fa9c6; 背景顏色 background-image:url(圖片的路徑); 背景圖片 background: #f1f7fd; background:url("../images/adv1.jpg") center; 插入背景圖片并居中 background-repeat:no-repeat; 背景不平鋪，只顯示一次，也可以把上面的center換成no-repeat實現一樣的效果。repeat-x 背景圖像將在水平方向重復。repeat-y 背景圖像將在垂直方向重復。 background-position:370px 100px; 設置背景圖片的位置，第一個參數是左上角的左邊距第二個參數是左上角的上邊距。 background-size:100% 100%; 設置背景圖片的大小 background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top;插入兩種背景圖片一張默認左上，一張設置右上。 background-color:rgba(0,0,0,0.5);背景顏色rgb#000黑色，0.5透明度50%；3、寬度高度 width: 910px; height: 414px;4、浮動方式：盒子的靠齊方式（css的定位） float: left; float:right; clear:both; 清除左右浮動 position:absolute;/*絕對定位*/父級元素設置了相對定位子級元素設置了絕對定位，那么子級元素會以父級元素為參考。用了定位的元素會在沒用定位元素的最上面顯示 position:relative;/*相對定位*/ position:fixed;/*固定定位*/ (想對于瀏覽器，一般做廣告框時使用) （使用了定位后可以用top，right，bottom，left，調整上右下左的距離） z-index:1; 層級，絕對定位默認層級是0，層級大的顯示在上面5、邊框： border:2px solid red; 設置邊框色 border-bottom: #c5c5c5 1px solid; //只顯示底邊框 border-bottom:1px dotted #eee; //顯示虛線的下邊框dashed是更粗長的虛線 border-top-width: 1px; border-top-style: solid; border-top-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc; border-radius:4px; 設置邊框的圓角6、邊距（外邊距） margin: 0px auto; 設置網頁布局居中效果 margin-top: 3px; margin-bottom: 3px; margin-left: 20px; margin: 3em; 設置外邊距是3個字體的寬度 margin:1px 2px 3px 4px;設置上右下左的外邊距7、填充距（內邊距） padding: 0px;8、列表位置及圖片（ul無序列表） list-style-type:lower-alpha;英文字母； list-style-type:upper-roman；設置列表符號為希臘字母； list-style-type:circle;設置列表符號為小圓圈 list-style-type:square;設置列表符號為小方塊 list-style-type:none;設置列表符號為空list-style-position:inside; 列表符號位置為內部 list-style-position: outside; 列表符號位置為外部 list-style-image: url("../images/0206icon04.gif"); 設置列表圖片 9、鼠標樣式1、cursor:default;默認正常鼠標指針 2、cursor:text;文本選擇效果 3、cursor:move;移動選擇效果 4、cursor:pointer;手指形狀 鏈接選擇效果 5、cursor:url(url圖片地址),default; 設置對象為圖片,default是默認鼠標（一個箭頭）,以防沒有url地址時顯示默認鼠標，不加顯示不出來 w3c解釋網址：http://www.w3school.com.cn/cssref/pr_class_cursor.asp10、隱藏和透明與加陰影 overflow:hidden;隱藏溢出,隱藏元素不占位 display:none;隱藏當前菜單 display:block;顯現當前菜單,,定義為塊元素 display:inline-block; 行內塊級元素，定義后寬度會隨著內部元素的增加而增加 filter:Alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;/*實現背景透明*/ box-shadow:0px 0px 10px #000; 給盒子加陰影，第一個是陰影在水平方向上的偏移量，第二個是陰影在垂直方向上的偏移量，第三個是陰影的半徑，第四個是陰影的顏色。div 加滾動條的方法： <div style="position:absolute; height:400px; overflow:auto"></div> div 設置滾動條顯示：overflow :yes div 設置滾動條自適應顯示：overflow :auto div 設置上下滾動條顯示：overflow-y :yes div 設置上下滾動條自適應顯示：overflow-y :auto 如果該div被包含在其他對象例如td中，則位置可設為相對：position:relative

?

總結

以上是生活随笔為你收集整理的CSS和HTML基操的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。