54HTML和CSS零碎知識

1、發展歷程一、1993-2000：HTML二、2000-2008：XHTML三、2008-今：HTML52、HTML5的歷史一、2004年被提出，二、2007年被W3C接納，併成立了新的 HTML 工做團隊。三、2008年1月22日公佈第一份正式草案。四、2012年12月17日，HTML5規範定稿。五、2013年5月6日， HTML 5.1正式草案公佈。六、2014年10月29日，HTML5標準規範終於最終制定完成了。七、HTML5的設計目的：爲了在移動設備上支持多媒體。八、支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；![圖片描述](attimg://article/content/picture/201804/15/111910vud6uk66ur65d6dv.png)![圖片描述](attimg://article/content/picture/201804/15/111911iqqjj3npo1z3bwbu.jpg)2、XHTML 與 HTML 之間的差別一、XHTML 元素必須被正確地嵌套。二、XHTML 元素必須被關閉。三、標籤名必須用小寫字母。四、XHTML 文檔必須擁有根元素。3、read-only和disabled的區別？（1）提交表單的時候read-only能夠提交，可是disabled不能夠（2）read-only只針對input/textarea這樣的文本輸入框，對select無效，disabled對全部表單元素有效4、defer和async的用法：（1）async：HTML5新增屬性，用於異步下載腳本文件，下載完畢當即解釋執行代碼。（2）defer：用於開啓新的線程下載腳本文件，並使腳本在文檔解析完成後執行。5、CSS中有繼承性的屬性（1）字體系列屬性：font、font-family、font-weight、font-size、font-style；（2）文本系列屬性：text-indent、text-align、line-height、word-spacing、letter-spacing、color（3）表格佈局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout（4）列表佈局屬性：list-style-type、list-style-image、list-style-position、list-style（5）全部元素能夠繼承的屬性：visibility、cursor六：HTML5新增的元素和廢除的元素（1）新增元素：section、article、aside、header、footer、nav、figure、video、audio、mark、progress、meter、time、canvas、command、details、datalist、output、source、menu、datagrid、embed、hgroup、keygen、ruby、rt、rp、wbr；（2）廢除元素：basefont、big、center、font、s、strike、tt、u、frame、applet、bgsound、blink、marguee；7、省略號代碼（1）單行省略號：overflow: hidden;text-overflow:ellipsis;white-space: nowrap;（2）多行省略號：overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;8、：CSS中經常使用的四種連接狀態（LV ha）：（1）a:link {color:#FF0000;}     未被訪問的連接 （2）a:visited {color:#00FF00;}    已被訪問的連接 （3）a:hover {color:#FF00FF;}    鼠標指針移動到連接上（4）a:active {color:#0000FF;}    正在被點擊的連接 9、選擇器   一、基本選擇器語法     （1）* ：通配選擇器      （2）E：元素選擇器    選擇指定類型的HTML元素     （3）#id：ID選擇器  選擇指定ID屬性值爲「id」的任意類型元素     （4）.class：類選擇器         （5）selector1,selectorN：羣組選擇器    二、層次選擇器語法    （1）E  F：後代選擇器    （2）E>F：子選擇器        （3）E+F：相鄰兄弟選擇器    （4）E~F：通用選擇器，選擇E元素後的全部匹配的F元素   三、動態僞類選擇器語法    （1）E:link  連接僞類選擇器      （2）E:visited   連接僞類選擇器    （3）E:active    用戶行爲選擇器    （4）E:hover 用戶行爲選擇器    （5）E:focus 用戶行爲選擇器10、HTML5新的API（1）拖放A、DragB、Drop（2）History API（歷史記錄）A、pushStateB、replaceState（3）Storage APIA、localStorageB、sessionStorage（4）Communication API （跨域通訊）postMessage（5）WebSocket API：雙工通訊（6）Geolocation API（地理位置API）（7）Web Worker：經過JavaScript建立一個後臺進程，執行耗時比較長的數據處理（8）File API：來幫助咱們在Web頁面中訪問本地文件，它能夠在Web應用中展示11、表單驗證一、form標籤裏綁定onsubmit事件二、type='submit'標籤裏綁定onsubmit事件三、type='submit'標籤裏綁定onclick事件四、type='button'標籤裏綁定onclick事件五、不須要綁定任什麼時候間，直接點擊type='submit'標籤，數據格式爲name=value&name=value六、借用jQuery12、清除浮動的8種方法一、子級結尾處加空div標籤 clear:both二、父級div定義 width三、父級div定義 僞類:after四、父級div定義 overflow:hidden五、父級div定義 overflow:auto六、父級div 也一塊兒浮動七、父級div定義 display:table八、子級結尾處加 br標籤 clear:both來源，https://www.qdfuns.com/article/27495/5c4b42c07070e566383c631ee275fb2b.html十3、table相關一、border-spacing 屬性設置相鄰單元格的邊框間的距離（僅用於「邊框分離」模式）。 table樣式屬性二、border-collapse 屬性設置表格的邊框是否被合併爲一個單一的邊框，仍是象在標準的 HTML 中那樣分開顯示。 table樣式屬性三、cellspacing 屬性規定單元格之間的空間。table標籤屬性四、cellpadding 屬性規定單元邊沿與其內容之間的空白。table標籤屬性十4、清除浮動一、.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}十5、文件提交```html<li class="item">軟件版本：<span id="softwareVersion">V2.0</span>    <form method="POST" enctype="multipart/form-data" action="" >        <input type="submit" value="升級">        <input type="file" name="file">    </form></li>```enctype取值及含義application/x-www-form-urlencoded  在發送前編碼全部字符（默認）multipart/form-data   不對字符編碼。在使用<包含文件上傳控件>的表單時，必須使用該值。text/plain  空格轉換爲 "+" 加號，但不對特殊字符編碼。十6、複選框狀態(<input type='checkbox'/>)(1)獲取複選框狀態：$("#allSelect").prop("checked")；遍歷時，這麼用item.checked;(2)改變複選框狀態：$("#allSelect").prop("checked",false)；遍歷時，這麼用item.checked = false;(3)翻轉複選框狀態：$("#allSelect").prop("checked",!($("#allSelect").prop("checked")))；遍歷時，這麼用item.checked = !item.checked;(4)判斷複選框是否被選中：$("#allSelect").is(':checked')；遍歷時，這麼用item.is(':checked');(5)獲取全部複選框：$("#single input:checkbox")或$("#single input[type=checkbox]");(6)獲取全部被選中的複選框：$("#single input:checkbox:checked")或$("#single input[type=checkbox]:checked")十7、animation的參數animation: name(動畫名) duration(運行週期) timing-function(運行軌跡) delay(延遲時間) iteration-count(播放次數) direction(是否輪流反向);animation: circleAnimation 1s linear 0s infinite normal;```css@keyframes circleAnimation {  0% {    transform: rotate(0deg);  }  100% {    transform: rotate(-360deg);  }}```十8、position（1）absolute:生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。（2）fixed:生成絕對定位的元素，相對於瀏覽器窗口進行定位。（3）relative：相對於自身位置進行定位。（4）static  默認值。沒有定位。（5）inherit 規定應該從父元素繼承 position 屬性的值。十9、HTML標籤屬性```json<!DOCTYPE html>聲明文檔類型。<html lang="en">聲明本頁面的主要語言。<meta charset="UTF-8">規定 HTML 文檔的字符編碼。<!DOCTYPE html>聲明本文檔的類型。<html lang="en">聲明本文檔的主要語言。<meta charset="UTF-8">聲明本文檔的字符編碼。```二10、W3C標準規範：```css一、<!DOCTYPE html>聲明本文檔的類型。<html lang="en">聲明本文檔的主要語言。二、<meta charset="UTF-8">聲明本文檔的字符編碼。三、JavaScript定義。Js必需要用<script language="javascript" type="text/javascript">來開頭定義，以保證在不支持js的瀏覽器上直接顯示出來。四、CSS定義。CSS必需要用<style type=「text/css」>開頭來定義，爲保證各瀏覽器的兼容性，在寫CSS時請都寫上數量單位。五、使用註釋。正確的應用等號或者空格替換內部的虛線。<!--這裏是註釋-->六、全部標籤的元素和屬性名字都必須使用小寫七、全部屬性值必須用引號括起來（"" ''）雙引號或單引號七、把全部特殊符號用編碼表示：空格爲&nbsp; 、小於號（<）&lt、大於號（>）&gt、和號（&）&amp等。八、全部屬性必須有屬性值，沒有值就是重複自己。九、全部的標記都必須有相應的結束標記。雙標記：<div></div> 單標記：<img />十、全部的標記都必須合理嵌套。<p><b></p></b>必須修改成：<p><b></b></p>十一、圖片添加有意義的alt屬性。圖片加載失敗時能夠用alt屬性代表圖片內容。同理添加文字連接的title屬性，幫助顯示不完整的內容顯示完整。十二、在form表單中增長label，以增長用戶友好度以上是規範標準，結論：一、標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO（搜索引擎優化）頗有幫助。二、儘可能使用外鏈css樣式表和js腳本。是結構、表現和行爲分爲三塊，符合規範。同時提升頁面渲染速度，提升用戶的體驗。三、樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要作到見文知義，標籤越少，加載越快，用戶體驗提升，代碼維護簡單，便於改版參看：https://blog.csdn.net/Hhy_9288/article/details/78602277```二11、點擊事件之顯示執行與隱式執行示例：```html:run<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{width:100px;height:100px;background: red;}    </style></head><body><div id="myDiv" onclick="myClick(event,'second','third')" ></div><!--這是顯示執行，有定義，有執行。執行時，除了瀏覽器向其傳參'event'，還能夠人爲傳參'second'、'third'--><script>    function myClick(first,second,third){        console.log(first);        console.log(second);        console.log(third);    }    document.getElementById("myDiv").onclick=function (myEvent) {  /*這是隱式執行，有定義，無執行。執行時，除了瀏覽器向其傳參'event'，沒辦法人爲傳參'second'、'third'*/        console.log(myEvent);    }</script></body></html>```二12、半包圍效果：```html:run<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body><p>    <span style="color:red;">被包圍者</span>    <span style="color:green;">包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者包圍者</span></p></body></html>```二十3、一個空標籤div，若是它沒有任何佔空間的樣式，好比padding、border等，那麼它是不佔空間的。