〖前端开发〗HTML/CSS基础知识学习笔记
生活随笔
收集整理的這篇文章主要介紹了
〖前端开发〗HTML/CSS基础知识学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
經過一天的學習，把慕課網的HTML/CSS基礎知識學完了，筆記整理：
?
1. 文件結構：HTML文件的固定結構：<html><head>...</head><body>...</body></html>html是根標簽head定義文檔頭部，包含： title, script, style, link, metabody是網頁主要內容，包含：h1,h2-h6, p, a, img2. 認識head標簽：<head><title>...</title> 網頁標題<meta><link><style>...</style><script>...</script></head>3. 語義化：明白每個標簽的用途（在什么情況下我可以使用這個標簽才合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使用em標簽表示強調等等。4. 認識body標簽：<p>段落文本</p> 有三段就放三個<p></p><h1>標題文本</h1> h1-h6共6個標題分級<em>斜體文本（強調）</em> 斜體文本內容<strong>粗體文本</strong> 粗體顯示文本內容<span>單獨樣式文本</span> 沒有語義的，它的應用就是為了 設置單獨的格式用的<q>引用的文本</q> 引用的文本內容，會自動加上雙引號<blockquote>大段引用</blockquote> 引用大段的文本內容，文本前后會加上縮進<br/> 換行<hr/> 水平橫線 空格<address>地址信息</address> 地址信息，通常用于公司地址顯示<code>代碼內容</code> 代碼，通常是一行內<pre>多行代碼</pre> 多行代碼,你需要在網頁中預顯示格式時都可以使用它<ul> ul-li 列表信息，以圓點顯示<li>信息1</li><li>信息2</li>......</ul><ol> ol-li 列表信息，帶上序號<li>信息</li><li>信息</li>......</ol><div>排版內容<div> 排版中使用，相當于一個容器確定邏輯部分：邏輯部分是頁面上相互關聯的一組元素，如欄目版塊<div id="版塊名稱">…</div> div 帶上ID號，使之更清晰<table>表格內容</table> 創建表格<caption>標題文本</caption> 為表格添加標題文本<tbody>...</tbody> 若加此標簽后，表格會一次性顯示出來（而非網頁加載一點顯示一點）<tr>表格一行</tr> 表格中的一行<td>表格單元格</td> 表格中的一個單元格<th>表格表頭</th> 表格頭部的一個單元格，表格表頭<table summary="表格摘要">...</table> 為表格添加摘要，但不會被瀏覽器顯示出來<a href="目標網址" title="鼠標滑過時顯示文本">鏈接顯示文本</a> 鏈接標簽target="_blank" 網頁將在新窗口中打開mailto: 網頁中郵件地址，可帶多個參數mailto: 郵箱地址cc= 抄送地址bcc= 密抄地址; 多個郵箱地址subject=郵件主題body= 郵件內容完整舉例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主題 &body=郵件內容">發送郵件</a><img scr="圖片地址" alt="下載失敗時替換文本" title="提示文本" />5. 與用戶交互：語法：<form method="傳送方式" action="服務器文件"></form>舉例：<form method="post" action="save.php"><label for="username">用戶名:</label><input type="text" name="username" /><label for="pass">密碼:</label><input type="password" name="pass" /></form>表單控件：文本框、文本域、按鈕、單選框、復選框method:post/get1. 文本框（文本/密碼）<form><input type="text/password" name="名稱" value="文本" /></form>type：有“text”和“password”兩種類型name：為文本框命名，方便后臺ASP和PHP使用value：文本框默認值，一般起提示作用2. 文本域（多行文本）<textarea rows="行數" cols="列數">默認文本內容</textarea>cols：多行輸入域的列數rows：多行輸入域的行數3. 單選框、復選框<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>type：radio單選，checkbox復選框value：提交數據到服務器的值，后臺PHP處理使用name：為控件命名，以備后臺程序ASP和PHP使用checked：checked="checked"時，此選項默認被選中注意：同一組的單選按鈕，name取值一定要一致4. 下拉列表框<form action="save.php" method="post" ><label>愛好:</label><select multiple="multiple"><label for="book>看書</label> <option value="看書" id="book">看書</option><option value="旅游">旅游</option><option value="運動">運動</option><option value="購物">購物</option></select><input type="submit" value="提交"><input type="reset" value="重置" /></form>value：向服務器提交值selected：設置selected="selected"時，默認選中multiple：multiple="multiple"時，可以使用Ctrl多選，但很丑label：為了改進鼠標易用性，鼠標點擊文本時，選擇上Radio6. 認識CSS樣式：CSS：層疊樣式表（Cascading Style Sheets），主要用于定義HTML內容在瀏覽器內的顯示樣式語法：選擇符{ 屬性: 值}舉例：p{ color: blue}選擇符：又稱選擇器，指明要應用樣式規則的元素，如<html>、<body>、<h1>、<p>、<img>...聲明：指的是冒號”:“多條聲明：使用分號”;“隔開，最好每行都加上分號注釋：CSS使用 /**/，HTML注釋則使用<!--內容-->7. CSS樣式分類：1. 內聯式<p style="color:red;font-size:12px">這里文字是紅色。</p>2. 嵌入式較通用的一類，CSS樣式放置在<style>標簽中，而<style>通常要放置在<head>內<style type="text/css">span{color:blue;font-size:12px;}</style>3. 外部式把CSS代碼寫到一個單獨的外部文件中，以.css擴展名結尾，在<head>內使用<link>標簽引入，如：<link href="base.css" rel="stylesheet" type="text/css" />href: .css文件路徑rel和type: rel="stylesheet" type="text/css" 是固定寫法，不能改三種方法的優先級：內聯式 > 嵌入式 > 外部式就近原則，嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面以上規則適用于相同權值的情況 8. CSS 類選擇器語法：.類選器名稱{css樣式代碼;}舉例：<style type="text/css">.stress{color:red;}</style>注意：前邊的小圓點是必須要有的使用：<span class="stress">膽小如鼠</span> 9. CSS ID選擇器語法：#ID選擇器名稱{css樣式代碼}舉例：#setGreen{color:green;}<span id="setGreen">膽小如鼠</span> 區別：起始于 '.' 與 '#'調用時 class= 與 id= ID選擇器只能在文檔中使用一次，類選擇器則可以使用多次一個元素可以使用多個類選擇器同時設置多個樣式，而ID選擇器是不可以的，如 <span class="stress bigsize">三年級</span> 10.CSS 子選擇器還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。舉例：.food>li{border:1px solid red;}若大于符號換成空格( ),用于選擇指定標簽元素的所有后輩元素，舉例：.first span{border:1px solid red;}11. CSS 通用選擇器通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素：* {color: red;}此時，所有元素的字體都為紅色12. CSS 偽類選擇符偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色a:hover{color:red;}此時，把鼠標放置到元素上邊，顏色就會切換為紅色13. CSS 分組選擇符多個標簽使用逗號隔開：h1,span{color:red;}相當于：h1{color:red;}span{color:red;}14. CSS 繼承CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代如：p{color:red;} /*可被span繼承*/p{border:1px solid red;} /*此時，span將不繼承，邊框顯示紅色*/15. CSS 特殊性（權值）權值：p{color:red;} /*權值為1*/p span{color:green;} /*權值為1+1=2*/.warning{color:white;} /*權值為10*/p span.warning{color:purple;} /*權值為1+1+10=12*/#footer .note p{color:yellow;} /*權值為100+10+1=111*/注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。層疊：相同權值時，最后一個將被應用重要性：相同權值時，使用 !important 將得到最高權重，如 p{color:red!important;}樣式優先級為：瀏覽器默認的樣式 < 網頁制作者樣式 < 用戶自己設置的樣式，使用 !important 優先級比 用戶自己設定 還高16. CSS 文字排版1. 字體body{font-family:"宋體";}body{font-family:"Microsoft Yahei";}2. 字號，顏色body{font-size:12px;color:#666}3. 粗體p span{font-weight:bold;}a{font-weight:bold;}4. 斜體p a{font-style:italic;}p{font-style:italic;}5. 下劃線p a{text-decoration:underline;}6. 刪除線.oldPrice{text-decoration:line-through;}7. 縮進p{text-indent:2em;} /*2em 表示兩倍文字大小*/8. 行間距p{line-height:1.5em;}9. 字間距、字母間距h1{letter-spacing:50px;word-spacing:50px;} /*分別是字母、單詞間距*/19.對齊h1{text-align:center;} /*left、right和center*/17. CSS 元素分類塊狀元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>內聯元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>內聯塊狀元素：<img>、<input>1. 塊狀元素：1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）2、元素的高度、寬度、行高以及頂和底邊距都可設置。3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。注意：a{display:block;} /*可以把內聯元素 a 轉換為 塊狀元素*/2. 內聯元素：1、和其他元素都在一行上；2、元素的高度、寬度、行高及頂部和底部邊距不可設置；3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。注意：display:inline 可以轉換成內聯元素3. 內聯塊狀元素：1、和其他元素都在一行上；2、元素的高度、寬度、行高以及頂和底邊距都可設置。注意：display:inline-block 可以轉換成內聯塊狀18. CSS 盒模型1. 邊框div{ border:2px solid red;}相當于：div{border-width:2px;border-style:solid;border-color:red;}border-style: dashed（虛線）| dotted（點線）| solid（實線）border-color:#888; //前面的井號不要忘掉。border-width: 有 thin | medium | thick（但不是很常用），最常還是用象素（px）2. 上下左右邊框：div{border-bottom:1px solid red;} /*top、bottom、left和right*/3. 高度和寬度div{width:200px; /*寬度*/height:30px; /*高度*/padding:20px; /*元素到邊框的距離，又名為“填充”*/border:1px solid red;margin:10px; /*兩盒子距離，又名為“邊界”*/}19. CSS 布局模型元素有三種布局模型：1、流動模型（Flow）網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示2、浮動模型 (Float)現在我們想讓兩個塊狀元素并排顯示任何元素在默認情況下是不能浮動的，但可以用CSS定義為浮動，如div、p、table、img等元素都可以被定義為浮動舉例：#div1{float:left;}#div2{float:right;}3、層模型（Layer）就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由于網頁大小的活動性，層布局沒能受到熱捧層模型有三種形式：1、絕對定位(position: absolute)需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口舉例：div{xxxx:yyyy;position:absolute;right:100px;top:20px;}2、相對定位(position: relative)position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動舉例：#div1{width:200px;height:200px;border:2px red solid;position:relative;left:100px;top:50px;} <div id="div1"></div>3、固定定位(position: fixed) 如彈窗廣告fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響舉例：#div1{width:200px;height:200px;border:2px red solid;position:fixed;left:100px;top:50px;}Relative與Absolute組合使用：1、參照定位的元素必須是相對定位元素的前輩元素<div id="box1"><!--參照定位的元素（前輩）--><div id="box2">相對參照元素進行定位</div><!--相對定位元素--></div>2、參照定位的元素必須加入position:relative;#box1{width:200px;height:200px;position:relative; }3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了#box2{position:absolute;top:20px;left:30px; }20. 代碼簡寫：1. 盒模型： margin:10px; 相當于 margin:10px 10px 10px 10px; （上右下左順序）margin:10px 40px; 相當于 margin:10px 40px 10px 40px; （上右 下左順序）padding, border和 margin是一致的；2. 顏色值：p{color:#000000;} 相當于 p{color: #000;}p{color: #336699;} 相當于 p{color: #369;}3. 字體：body{font-style:italic;font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif;}編寫為：body{font:italic small-caps bold 12px/1.5em "宋體",sans-serif;}注意：1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性未指定將自動使用默認值。2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。21. 長度值1. 像素像素為什么是相對單位呢？因為像素指的是顯示器上的小點（CSS規范中假設“90像素=1英寸”）2. em假定 font-size設定 14px，那么 1em=14px3. 百分比p{font-size:12px;line-height:130%}?
總結
以上是生活随笔為你收集整理的〖前端开发〗HTML/CSS基础知识学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 登录token无效的解决方法
- 下一篇： 解读2014之前端篇：任性的颠覆式改变