html&css基礎筆記

標籤：隱藏   ora   聲明   nis   地址欄   相對路徑   邊框   有道   method   

有道筆記：http://note.youdao.com/noteshare?id=a6d7eab195085655bbfce86665524e35一 HTML結構標籤HTML基本標籤標題標籤 <h1>~<h6>段落 <p></p>換行 <br/>水平線 <hr/>粗體 <strong></strong>斜體<em></em>映像（images）<img src="相對路徑\絕對路徑" width="" height="">超連結幾個頁面之間的跳轉 <a href="跳轉後頁面的路徑">熱點文本/映像</a>錨連結跳轉到同一個頁面的固定位置<a href="#me">點擊我</a><a name="me">跳轉到這裡來</a>跳轉到不同頁面的固定位置1.html<a href="2.html#me">點擊我</a>2.html<a name="me">跳轉到我這裡來</a>功能連結<a href="mailto:郵箱地址">給站長寫信</a> 特殊字元與HTML注釋<!--注釋內容--> 規範意識 ***** 二 美化 漂亮的衣服 --CSS樣式怎麼寫？選取器{屬性：值;屬性: 值；}（1）標籤選取器：選取器寫法和標籤是一致的。所有的這些標籤會使用統一的樣式如果有個別某些h1不想使用這個樣式怎麼辦？--》肯定不能使用h1這個標籤選取器了如果某些段落p也想使用h1的那個樣式怎麼辦？(2)類別選取器.red{color:#ff0000;}<h1></h1><h1 class="red"></h1><h1></h1><p></p><p class="red"></p>(3)ID選取器#green{color:#00ff00;}<p id="green"></p>怎麼用？(1)內部樣式表<style></style>(2)內聯樣式<p style=""></p>(3)外部樣式表建立一個外部的css檔案:*.css,把樣式寫在這個檔案中誰想用這個樣式，誰就引入這個css檔案即可<link rel="stylesheet" href="樣式檔案的路徑"/> *****<style>@import "css/types.css";</style>連結式和匯入式區別 二 如何編寫自己樣式聲明？******學習方法*********（1）查看W3CSchool手冊，定位到CSS部分（2）編寫CSS樣式時，可以藉助工具的提示來調錯**********常見問題及錯誤**************(1)CSS檔案中設定的中文字型類型不起作用，怎麼解決?css檔案編碼重新設定為utf-8即可（2）如果頁面中既有中文又有英文，怎麼修飾字型類型？font-family:cursive,"微軟雅黑";***請把英文字型類型寫在中文字型類型之前 h1{font-size:23px;color:red;} 字型font 簡寫,可以按順序設定如下屬性：font-stylefont-weightfont-size/line-heightfont-family補充講解：****span和p不一樣（1）span不會獨佔一行，p會獨佔一行行內元素span，很常用，記住區塊層級元素p ，很常用的區塊層級元素<div>（2）區塊層級元素可設定寬高，行級（行內）元素設定寬高不起作用 文本colortext-aligntext-indent:(em)line-heighttext-decoration三 如何設定頁面中超連結的樣式？超連結未選中滑鼠定位上去之後滑鼠點下去之後訪問過以後 偽類文法標籤名：偽類名{聲明；}a:hover{color:#B46210;text-decoration:underline;}a:link 未單擊訪問時超連結樣式a:visited 單擊訪問後超連結樣式a:hover 滑鼠懸浮其上的超連結樣式a:active 按一下滑鼠未釋放的超連結樣式 常見的開發中的使用：超連結未被訪問，滑鼠懸浮到超連結上面a{color: black;text-decoration: none;}a:hover{color:red;text-decoration: underline;} 滑鼠形狀cursor:default/pointer/wait/help/text/crosshair;span{　　cursor:pointer;}背景屬性背景顏色：背景映像 映像路徑：background-image:url("images/buy.png"); 重複方式：background-repeat:no-repeat; 背景定位：background-position:10px center;簡寫形式：background:#B70447 url("images/buy.png") no-repeat 10px center; 列表有序列表 <ul> <li>蘋果</li> <li>香蕉</li> <li>西瓜</li> <li>桃子</li> <li>菠蘿</li> </ul>無序列表 <ol> <li>蘋果</li> <li>香蕉</li> <li>西瓜</li> <li>桃子</li> <li>菠蘿</li> </ol>自訂欄表 <dl> <dt>水果</dt> <dd>蘋果&nbsp香蕉&nbsp西瓜&nbsp桃子&nbsp菠蘿</dd> </dl> 列表樣式list-style-typelist-style-imagelist-style-positionlist-style table表格tr行td列<table border="1px" width="400px"> <tr> <td colspan="3">三年級五班學員的語文成績和數學成績</td> </tr> <tr> <td rowspan="2">白楊</td> <td>語文</td> <td>98</td> </tr> <tr> <td>數學</td> <td>96</td> </tr> <tr> <td rowspan="2">楊晨</td> <td>語文</td> <td>92</td> </tr> <tr> <td>數學</td> <td>100</td> </tr></table> 跨行：rowspan="2"跨列：colspan="2"  表單<form action="#" method="post"> <fieldset> <legend>個人簡曆</legend> <input type="hidden" name="info" value="register"/> <p>使用者名稱：<input type="text" name="username" value="請輸入使用者名稱" readonly="readonly"/></p> <p>密碼：<input type="password" name="pwd"/><p> <p>性別：<input type="radio" name="sex" id="man" checked="checked"/><label for="man">男</label> <input type="radio" name="sex" id="female"/><label for="female">女</label></p> <p>愛好：<input type="checkbox" name="hobby" value="1"/>運動 <input type="checkbox" name="hobby" value="2"/>看電影 <input type="checkbox" name="hobby" value="3"/>美食 <input type="checkbox" name="hobby" value="4"/>看書</p> <p>上傳簡曆：<input type="file"/></p> <p>所在城市： <select name="citys" id="citys"> <option value="bj">北京</option> <option value="sh" selected="selected">上海</option> <option value="gz">廣州</option> </select> </p> <p>簡歷：<br/> <textarea name="jianjie" id="jianjie" cols="30" rows="10">我喜歡電腦，喜歡前端</textarea> </p> </p><input type="submit" value="登入" disabled="disabled"/> &nbsp;<input type="reset"/></p> <p><input type="image" src="image/login.gif"/></p> <p><input type="button" value="提交表單"/></p> </fieldset></form>action屬性：表單提交給誰 method屬性：get/postget方式提交表單：表單資料能通過地址欄獲得，資料提交是不安全的post方式提交表單表單資料並不是通過地址欄來傳遞的，因此表單資料是安全的 表單元素<input type="text" name="fname" value=""/> type:text/password/checkbox/radio/submit/reset/file/image/buttonsize:元素的寬度，當type為text或password時maxlength:當type為text或password時,輸入的最大字元數checked:當type為radio或checkbox時，知道按鈕是否被選中 多行文本域：<textarea name="showText" id="" cols="30" rows="10"></textarea> 表單的進階應用程式隱藏欄位：type="hidden"唯讀：readonly="readonly"禁用：disabled="disabled" <label for="female">女</label>  css進階選取器並集選取器：多個選取器通過逗號串連而成，同時聲明多個風格相同的樣式p,h1{color:red;} 交集選取器：由兩個選取器串連構成，選中二者範圍的交集，兩個選取器之間不能有空格，第一個選取器必須是標籤選取器，第二個選取器是類別選取器或者ID選取器h1.first{color:yellow} 後代選取器：外層的選取器寫在前面，內層的選取器寫在後面，之間用空格分離，標籤嵌套時，內層的標籤成為外層標籤的後代h1 span{color:green;} 子項目選取器：通過>串連在一起而成，僅作用於子項目h1>span{color:green;} 屬性選取器：選取帶有指定屬性的元素，或者取帶有指定屬性和值的元素input[type="password"]{ border:1px solid red; } <body><p>段落</p><h1 class="first">this <span>is </span><span>the </span>first</h1><span>yyyyyy</span><h1>this is <em><span>the </span></em>second</h1><p class="first">段落</p><p>使用者名稱：<input type="text"/></p><p>密碼：<input type="password"/></p><p>重複密碼：<input type="password"/></p></body>  盒子模型 邊框 border 邊框樣式 border-style邊框顏色 border-color邊框粗細 border-width border-top-style: solid;border-right-style:dashed ;border-bottom-style: double;border-left-style: dotted; /*上下 左右*//*border-style:dashed double;*/ /*上 右 下 左*/border-style:solid dashed double dotted; border:5px solid red;border-top:5px dotted blue; 外邊距 marginmargin-topmargin-rightmargin-bottommargin-leftmargin margin-top:1px;margin-right:2px;margin-bottom:2px;margin-left:1px;margin:3px 5px 7px 4px;margin:3px 5px;margin:8px; 內邊距 padding padding-toppadding-rightpadding-bottompadding-leftpadding  box-sizing屬性content-box 盒子的實際寬度和高度僅應用於元素內容，不包括內邊距和邊框，和原來計算方式一樣border-box 盒子的實際高度和寬度包括元素內容、邊框和內邊距，總寬度和高度不變box first box-sizingborder-box-moz-box-sizingborder-box/*Firefox*/ -webkit-box-sizingborder-box/*Ssfari*/ padding20pxbox second box-sizingcontent-box-moz-box-sizingcontent-box/*Firefox*/ -webkit-box-sizingcontent-box/*Ssfari*/ padding20px
區塊層級元素 <h1>...<h6> <div> <p>  內聯（行內）元素 <a> <img> <span> <strong>... display屬性控制元素的顯示和隱藏區塊層級元素與行內元素的轉變 none:設定元素不會被顯示inline:元素會被顯示為內嵌元素block:元素會被顯示為區塊層級元素inline-block:行內塊元素，不會換行，但是可以設定寬高  常見的網頁布局上下結構上中下結構上左右下結構：1-2-1結構上左中右下機構：1-3-1結構 浮動 float屬性left 元素向左浮動right 元素向右浮動none 預設值，元素不浮動 clear屬性left:在左側不允許浮動元素right:在右側不允許浮動元素both:在左、右兩側不允許浮動元素none:預設值。允許浮動元素出現在兩側  如何讓父容器隨子項目自適應高度：1.在父容器中添加一個空的子項目.clear{ clear:both;}<div class="clear"></div>2.給父容器加一個樣式overflow:hidden; overflow屬性visible:預設值。內容不會被修剪，會呈現在盒子之外hidden:內容會被修剪，並且其餘內容是不可見的scroll:內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘內容auto:如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘內容 position屬性static:預設值，沒有定位relative：相對定位absolute：絕對位置fixed:固定定位 relative:相對自身原來位置進行位移位移設定：top、left、right、bottom#first{position:relative; top:-20px; left:20px;}設定相對定位的盒子會相對它原來的位置，通過制定位移，達到新的位置設定了相對定位的網頁元素，無論是在標準流中還是浮動流中，都不會對它的父級元素和相鄰元素有任何影響，它只針對自身原來的位置進行位移 absolute屬性值位移設定：top、left、right、bottom使用了絕對位置的元素以它最近的一個“已經定位”的“祖先元素”為基準進行位移。如果沒有已經定位的祖先元素，那麼會以瀏覽器視窗為基準進行定位絕對位置的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響 z-index屬性調整元素定位時重疊層的上下位置z-index屬性值：整數，預設值為0設定了position屬性時，z-index屬性可以設定各元素之間的重疊高低關係z-index值大的層位於其值小的層上方

html&css基礎筆記