並排 require 加載失敗 shee index 失效 單詞 提交按鈕 device

head <meat charset="utf-8" /> 編碼格式：讓瀏覽器可以識別中文 <meat name="Author" content="亮亮"> 作者 <meta name="keywords" content="百度，淘寶，亮亮"> 關鍵字：用戶搜索的時候可以通過關鍵字搜索到該網頁 <meta name="description" content="這是一個非常強大的第三網站...> 網站的描述信息 body h1~h6:標題標簽，重要性依次遞減，字體默認加粗，一般作為文章的標題使用 <p></p> p標簽：段落標簽 <br> 換行標簽 &nbsp； 牛逼的空格 <hr> 水平線 &lt; < &gt; > <q></q> " " <blockquote></blockquote> 引用別人一段話 <strong></strong> 強調文本為重要文本，字體加粗 <em></em> 強調文本為重要文本，字體傾斜  上標  下標 <img src="網絡路徑 本地路徑 相對路徑"> 一般寫相對路徑 ./ 例如：./girl.jpg 當前目錄，可以省略 ../ .. /girl.jpg 跳到上級目錄 <img alt=" "> 圖片加載失敗的時候，顯示的替換文本 <img title=" "> 鼠標懸浮在元素上時顯示的內容 <a href=" " target=" "></a> href:超鏈接，網頁之間的紐帶 target＝“_blank” 代表在新的網頁中打開地址 target＝“_seft” 默認值，代表在當前頁打開地址 <a href="#">回到頂部</a> 回到網頁頂部 <a href="#teacher">講師</a> 設置錨點, 可以跳到 id 為 teacher的元素 <a href="img.zip">下載圖片</a> 下載 <ul><li></li></ul> 無序列表 <ol><li></li></ol> 有序列表 <dl> <dt><dd></dd></dt></dl> 自定義列表 表格 border:邊框 cellspacing: 單元格之間的距離 cellpadding: 單元格和內容之間的距離 align: 對齊方式 align="left" 居左對齊 align="right" 居右對齊 align="center" 居中對齊 <caption>花</caption> 標題 <tr> </tr> 表格的行 給tr添加align＝“center”他的自代元素都會居中對齊 <th></th> <td></td> 表格的列 th: td的一個變種，字體默認加粗，居中 <td rowspan="2"> rowspan:行的跨度 <td colspan="2" align="center" bgcolor="red"> colspan:列的跨度 bgcolor：背景顏色 <tfoot> </tfoot> 表尾 tfoot:寫在tbody上方，並不影響頁面中的顯示效果，但可以讓用戶優先看到tfoot中的內容 css樣式 <link rel="stylesheet" type="text/css" href="index02.css"> type:類型，表示瀏覽器解析的方式，如果不定義的話，有些css效果瀏覽器解釋的效果不一樣 width:200px; 寬度 height:200px; 高度 background:green; 背景顏色 text-align:center; 對齊方式 color:white; 設置字體顏色 選擇器 div>p 子代選擇器 div p 後代選擇器 ul+p 相鄰兄弟選擇器 選擇和ul相鄰的選則器 * 選擇所有元素 ＃ id選擇器 . class選擇器 屬性選擇器 div[id] 選中具有id屬性的 div[class] 選中具有class屬性的div div[class|="home"]選擇class為home的div元素，或著選中class為home開頭 後面內容用 － 鏈接的div元素 div[class="a c"] 選中class為ac屬性的 div[class~="a"] 選中包含a屬性的 div[class^="r"] 選擇以屬性名開頭的元素 div[class$="x"] 選擇以屬性名結尾的元素 div[class*="i"] 選中屬性中包含該值的元素 偽類偽元素選擇器 a:link 當元素定義了超鏈接屬性，並且從來沒有點擊的樣式 a:visited 該鏈接已經被訪問過的樣式 a:hover 鼠標懸浮在元素上方時的樣式 a:active 鼠標按下不松開 div::first-line 第一行的樣式 div::first-letter 第一個單詞 p::before 前面添加。。 p::after 後面添加 順序:link－visited－hover－active; 結構偽類選擇器 .box>li:nth-child(odd) 選中處於基數位的元素 .box>li:nth-child(even) 選中處於偶數位的元素 .box>li:nth-child(n+3) 可以跟簡單的數學公式 .box>li:nth-child(5n) 5的倍數 .box>li:first-child 選取第一個元素 .box>li:last-child 選取最後一個元素 .box>li:nth-last-child(n+2) 選取最後三行的 .wrap>p:nth-of-type(1) nth-of-type用法同nth-child基本一致，只不過nth-of-type會過濾掉其他類型的元素 .wrap>p:nth-last-of-type(n+3) 倒著數 .wrap>p:first-of-type 選中第一個類型為p的元素 .wrap>p:last-of-type 選中最後一個類型為p的元素 其他結構偽類選擇器 div:empty 選中元素內容為空的元素 p:only-child 選中該元素父級中只有該元素的元素 :root 選中的html 狀態偽類選擇器 input:disabled 選中禁用狀態下的input input:enabled 選中可用狀態下的input input:focus 選中聚焦狀態下的input input:checke 針對單選框和多選框 選中狀態下的input 其他選擇器 .box~p 通用兄弟選擇器 選中，box下面的所有匹配的p元素 li>*:not(div) 否定偽類選擇器 選中除了div元素之外的其它元素 p:target 目標偽類選擇器 通過a標簽跳轉到該標簽時，樣式會起作用 選擇器的優先級 ！important(慎用)>行內樣式>ID選擇器>class選擇器>與元素選擇器 盒模型 padding-top:20px 上內填充 padding: 20px 30px 40px 上 左右 下 padding:20px 30px 上下 左右 border-top-width:10px; 上邊框寬度 border-top-style:outset 上邊框樣式() solid：實線 dashed： 虛線 dotted： 小點 double： 雙實線 groove: 3d凹槽 ridge： 3d凸槽 outset: 3d凸邊 inset： d凹邊 border-top-color:blue; 上邊框顏色 box-sizing: border-box; 怪異盒模型 ie下會出現怪異盒模型 border－box：width／height ＝ border＋padding ＋content； 盒子陰影 box-shadow: 10px 10px 0 0 gray; 第一個值：陰影在x方向的偏移量，正值向右偏移，負值向左偏移； 第二個值：陰影在y方向的偏移量，正值向下偏移，負值向左偏移； 第三個值：模糊度； 第四個值：陰影半徑； 第五個值：顏色； disaply 塊級（block）元素 常見的塊級元素（div, p, h1~h6, ul, li, ol, dl, dt, tr, table, dd） 1. 默認獨占一行 2. 不設置寬度的話，默認盛滿父級 3. 支持寬高設置，支持所有的css樣式設置 內聯（inline）元素： 1. 行內元素可以和行內元素並排顯示 2. 換行會被解析 (解決方案，將父級元素的font-size設置為0) 3. 不支持寬高設置，不支持margin－top, margin－bottom, padding－top, padding-bottom設置 4. 寬決定 inline-block 1.可以設置高 2.換行被解析 3.可以同排顯示 disaply: inline; 讓元素以行內高由內容元素形式展示 disaply: block; 讓元素以塊級元素形式展示 disaply: inline－block; 讓元素同時具有塊級元素和行內元素部分特征 margin 第一個margin-top會傳遞給父級; 解決方案: 1：改用padding 2:給父級添加: border－top 3:給父級添加:overflow:hidden; 行內元素設置上下margin，上下padding無效，寬高也不能設置。有內容決定寬高 文本設置（text） color: red 給字體設置顏色 text-decoration: line-through； 文本裝飾 overline:上劃線; underline: 下劃線; line－through:刪除線; none:不要任何修飾; text-align: justify; 文本對齊方式 left:左對齊; center:居中對齊; right:右對齊; justify:兩端對齊; text-indent: 32px; 首行縮進 white-space: nowrap; 空白符處理 pre:原樣顯示 pre-line:合並空白符,但不會合並換行 pre-wrap:換行; nowrap:不換行; overflow: hidden; 益處隱藏 text-overflow:ellipsis; 文本溢出 clip：剪切; ellipsis:省略號； vertical-align:middle; 垂直方向對齊 vertical-align: bottom; 底部對齊 默認: baseline寄線對齊, 這個值會造成圖片下方和元素有一個間隙的問題； 字體設置（font） font-style: oblique 字體樣式 italic:字體中的斜體 oblique:把字體強行拉斜; font-variant: small-caps; 小寫英文變大寫 font-weight: bold; normal:普通; bold:粗體; bolder:更粗; 值也可以是100的倍數，範圍:100- 900 400:normal 700:bold font-size: 25px; 字體大小 默認:16px line-height: 100px; 行高 font-family: " " 字體家族 font: italic small-caps bold 20px/100px（字體大小／行高 必寫） "翩翩體－簡"； 浮動 浮動: 元素脫離文檔流，沿著某一個方向流動, 知道碰到父級邊界或者同級浮動元素的邊界才會停止 浮動元素 margin: auto; 失效 如果浮動元素上方有塊級元素,那麽浮動元素不會遮蓋上方塊級元素 浮動元素特點: 1.不設置寬高,有內容撐起寬高 2.會使元素脫離文檔流,(文檔流:元素在網頁中所占的位置) 3.讓元素同時具有行內元素和塊 元素部分特征 4.會提升元素層級 5.不會遮蓋文字 元素的嵌套規則: 1.塊級元素可以嵌套大部分的塊級元素，可以嵌套行內元素 2.行內元素可以嵌套行內元素，但不能嵌套塊級元素 3.p,dt,h1~h6 不能嵌套塊級元素 4.同級元素之間一般是行內元素與行內元素並列, 塊元素與塊元素並列 圖片 background-image: url(‘as.jpg‘)； 背景圖片 background: url("img/bg-tl.png") no-repeat left top, url("img/bg-tr.png") no-repeat right top, url("img/bg-bl.png") no-repeat left bottom, url("img/bg-br.png") no-repeat right bottom; background-repeat: no-repeat; 背景平鋪效果 no-repeat:沒有平鋪效果; repeat-x: x方向平鋪; repeat-y: y方向平鋪; repeat: 默認效果，x y方向都平鋪 background-position: 20px 20px; 背景圖片位置 值可以為:left right, center, top, bottom這幾個的組合值,例如: right top是右上角; 也可以 為像素,比如:20px 20px; background-attachment: scroll; 依附關系 scroll:背景圖位置隨著網頁的滾動兒滾動; fixed:背景圖的位置固定,不隨著網頁的滾動而發生變化; （overflow: scroll; position: relative; ） 超出的內容通過滾動查看 background-size:50% 50% 背景大小 cover（覆蓋）｜px｜ percent｜ contait（讓圖片以最大尺寸在背景中完全顯示）｜ 隱藏元素 display: none; 展示效果: none:元素消失，不在網頁中占據位置 visibility: visible; hidden：不可見 元素不可見，但是在網頁中占據位置； visible：可見； ul樣式 list-style-type:upper-alpha； 列表樣式類型: none: 沒有樣式; disc: 實心圓; circle:實心圓; square:實心方塊; decimal－leading－zero:0開頭的十進制; lower－alpha:小寫英文字母; upper－alpha:大寫英文字母; list-style-position: inside; 列表樣式位置 inside 在li內部 outside 在li外部 list-style-image: url(‘ad.jpg‘); 樣式圖片 css樣式的單元格 border-spacing: 10px； 邊框之間的距離 border-collapse: collapse; 合並邊框 empty-cells: hide; 隱藏空單元格 清除浮動 clear: right celer: left:清除周圍左浮動元素對該元素造成的影響; right:清楚周圍右浮動元素對該元素造成的影響; both:清除周圍左右浮動元素對該元素造成的影響; 絕對定位 position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; 絕對定位：相對於距離自己最近的， 具有定位屬性的父輩元素進行定位（註意： 父輩元素的定位屬性值不能是默認值static） 相對定位 position: relative; top:150px; left: 100px; right: 100px; 相對定位: 相對於元素本身原來的位置進行定位， 會提高元素的層級，元素本身的特性不發生變化， 一般設置了相對定位，不會對其left，top，right， bottom的值進行修改； 固定定位 position: fixed; 固定定位：相對於document進行定位（當前窗口）， 不會隨著頁面的滾動而滾動（懸浮框效果）； h5（視頻 音頻 輸入框） <audio autoplay controls> <source src="yinyue.mp3"></source> <source src="yinyue.wav"></source> <source src="yinyue.ogg"></source> 該瀏覽器不支持音頻播放，請下載最新版本的瀏覽器wg（歪哥）瀏覽器 </audio> <video autoplay controls width="500px"> <source src="shipin.mp4"></source> <source src="shipin.wav"></source> <source src="shipin.ogg"></source> 該瀏覽器不支持視頻播放，請下載最新版本的瀏覽器 </video> <input type="email" required> 郵箱輸入框，提交時會驗證輸入框中的內容是否正確required ：內容必填 <input type="url"> 驗證url <input type="number" step="5"> 數字 step(每次都加5) <input type="date"> 年月日 <input type="month"> 年月 <input type="week"> 年周 <input type="text" autofocus> autofocus：自動聚焦 <input type="text" disabled> disabled：使不能使用 <input type="submit"> 提交按鈕 <header></header> 頭部內容 <nav></nav> 導航內容 <footer></footer> 尾部內容 <aside></aside> 側邊欄 <article></article> 有獨立內容的部分，比如一個評選區，討論區等待 media媒體查詢 <meat name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> viewport：視窗 width：視窗寬度＝設備寬度（css像素） initial－scale：初始縮放比例 minimum－scale：允許縮放最小倍數 maximum－scale：允許縮放最大倍數 user－scalable：是否允許用戶進行縮放 no是不允許 ，yes是允許 像素分為 設備像素（物理像素）和 css像素（設備無關像素） window. devicePixelRatio = 物理像素／css像素 《html》@media only screen and (min-width: 600px) and (max-width: 800px) 《head》<link rel="stylesheet" href="css/middle.css" media="screen and (min-width:550px) and (max-width:750px)"> percent百分比 width: 50%; 父級寬度的50% height: 50%; 父級高度的50% border-radius:100% 100% 100% 100%/50% ; 50% /100% 100% 0 0(上下橢圓的一半) 100% 0 0 100% / 50%;( 左右橢圓的一半) 註意：margin—top，margin-bottom,padding-top,padding-bottom是相對於父級的寬度的百分比； em和rem rem是html的font－size的大小 em:當前元素字體大小 響應式布局： 格局不同的頁面尺寸，寫不同的頁面布局（css）
技術： 媒體查詢 用百分比代替像素左適配（自適應布局） 用rem，em來設置元素的尺寸 用viewport來適配移動端，對移動端進行優化 漸變 background-image: linear-gradient(to right bottom ,blue ,red ,150px,yellow); 線性漸變： 第一個值：方向； 可以是to right, to left, to top, to bottom, to right top , to left top, to right bottom, to left bottom,還可以是角度，單位是 deg 後面的值：顏色 漸變的位置（px｜百分比）； background-image: radial-gradient(200px circle at center center,red 20px, orange,yellow); 徑向漸變： 半徑 形狀 at 圓心位置， 顏色 漸變位置，顏色 漸變位置。。。
圓心位置可以是 top， right， bottom， left， center， 也可以是px， 也可以是 percent（百分比） background-image:radial-gradient(farthest-corner ellipse at 100px 100px ,red,yellow,blue); 形狀如果是橢圓的話，半徑不能寫成像素 farthest-side:圓心到最遠的邊; clothest-side:圓心到最近的邊; farthest-corner:圓心到最遠的角; clothest-corner:圓心到最近的角; 橢圓漸變 background-image:radial-gradient(farthest-corner ellipse at 100px 100px ,red,yellow ,blue ); 形狀如果是橢圓的話，半徑不能寫成像素 farthest-side:圓心到最遠的邊; clothest-side:圓心到最近的邊; farthest-corner:圓心到最遠的角; clothest-corner:圓心到最近的角; 分段漸變 background-image: repeating-linear-gradient(to right,skyblue,yellowgreen,orange 20%); 橢圓分段漸變 background-image: repeating-radial-gradient(farthest-corner ellipse at center center,red,yellow ,blue 6% ); transparent：透明色； repeating-linear-gradient(to left,pink 0px,pink 10px, transparent 10px, transparent 20px); （格格） 雪碧圖 1.工作中，ui設計師給我們提供設計圖，設計圖為psd格式 2.為了減小前端和服務器的鏈接次數（減小服務器的壓力），一般把一些小的圖片 放到一張圖上，我們稱之為Css sprites（雪碧圖） background: url("img/bg_v3.png")(圖片)no-repe；

html基礎內容樣式