? ? ? ?第一次接觸html的時(shí)候，那時(shí)我還是大二，當(dāng)時(shí)老師給了我們一份筆記就是些經(jīng)常用的html標(biāo)簽和css的樣式，html是我第一個(gè)學(xué)會(huì)的一種計(jì)算機(jī)語(yǔ)言，也是html和css讓我看到五彩繽紛的編程世界，如今工作也有些年頭了，還是不時(shí)會(huì)翻出之前的筆記來(lái)找找標(biāo)簽（平時(shí)主要是寫(xiě)java），筆記現(xiàn)在也完善了不少（我需要用到的基本都能找到）

HTML基操

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

CSS基操

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

?

總結(jié)

以上是生活随笔為你收集整理的CSS和HTML基操的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。