整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 用法

          TML 中的 Javascript 腳本代碼必須位于 <script></script> 標簽之間。

          Javascript 腳本代碼可被放置在 HTML 頁面的 <body><head> 部分中。

          <script> 標簽

          如需在 HTML 頁面中插入 JavaScript,請使用 <script> 標簽。

          <script> 和 </script> 會告訴 JavaScript 在何處開始和結束。

          <script> 和 </script> 之間的代碼行包含了 JavaScript:

          <script>

          alert("你好,77!");

          </script>

          ps:瀏覽器會解釋并執行位于 <script> 和 </script>之間的 JavaScript 代碼

          <body> 中的 JavaScript

          代碼練習:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title><body> 中的 JavaScript</title>
          </head>
          <body>
          <script>
            document.write("<h1>這是一個標題</h1>");
            document.write("<p>這是一個段落。</p>");
          </script>
          </body>
          </html>

          運行結果:

          JavaScript 函數和事件

          我們需要在某個事件發生時執行代碼,比如當用戶點擊按鈕時。

          如果我們把 JavaScript 代碼放入函數中,就可以在事件發生時調用該函數。

          在 <head> 或者 <body> 的JavaScript

          腳本可位于 HTML 的 <body> 或 <head> 部分中,或者同時存在于兩個部分中。

          <head> 中的 JavaScript 函數

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title><head> 中的 JavaScript 函數</title>
            <script>
              function myFunction(){
                document.getElementById("q").innerHTML="歡迎回家!";
              }
            </script>
          </head>
          <body>
          <p id="q">你好,77!</p>
          <button type="button" onclick="myFunction()">點擊這里</button>
          </body>
          </html>

          運行前:

          運行后:

          <body> 中的 JavaScript 函數

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title><body> 中的 JavaScript 函數</title>
          </head>
          <body>
          <p id="p">你好,77!</p>
          <button type="button" onclick="myFunction()">點擊這里</button>
          <script>
              function myFunction(){
                  document.getElementById("p").innerHTML="歡迎回家!";
              }
          </script>
          </body>
          </html>

          運行結果圖,同<head> 中的 JavaScript 函數運行結果圖。

          外部的 JavaScript

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>外部的 JavaScript</title>
          </head>
          <body>
          <p id="p">你好,77!</p>
          <button type="button" onclick="myFunction()">點擊這里</button>
          <script src="myScript.js"></script>
          </body>
          </html>

          myScript.js 文件代碼如下:

          function myFunction()
          {
              document.getElementById("p").innerHTML="歡迎回家!";
          }

          運行結果圖,同<head> 中的 JavaScript 函數運行結果圖。

          ps:外部腳本不能包含 <script> 標簽。

          家好,我是DD,已經是封閉在家的第51天了!

          最近一直在更新Java新特性(https://www.didispace.com/java-features/)和IDEA Tips(https://www.didispace.com/idea-tips/)兩個原創專欄,其他方向內容的動態關注少了。昨天天晚上刷推的時候,瞄到了這個神奇的東西,覺得挺cool的,拿出來分享下:

          相信你看到圖,不用我說,你也猜到是啥了吧?html里可以跑python代碼了

          看到好多Python公眾號已經開始猛吹未來了,但乍看怎么覺得有點像JSP?或者一些模版引擎?是進步還是倒退呢?與其瞎想,不如仔細看看這個東東的能力吧!

          根據官方介紹,這個名為PyScript的框架,其核心目標是為開發者提供在標準HTML中嵌入Python代碼的能力,使用 Python調用JavaScript函數庫,并以此實現利用Python創建Web應用的功能。

          看到介紹里提到了調用JavaScript函數庫的能力,看來跟JSP或者模版引擎還是有區別的。

          PyScript 快速體驗

          官方給了一個例子,可以幫助我們觀的感受這個開發框架的能力,不妨跟著DD看看,它能做啥吧!

          第一個案例,hello world

          代碼很簡單,就下面這幾行。你只需要創建一個html文件,然后復制進去就可以了。

          <html>
            <head>
              <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
              <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
            </head>
            <body> 
              <py-script> 
                  print('Hello, World!') 
              </py-script> 
            </body>
          </html>
          

          保存好之后,在瀏覽器里打開就能看到這樣的頁面了:

          回頭再看看這個html里的內容,三個核心內容:

          • 引入pyscript的樣式文件:<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
          • 引入pyscript的腳本文件:<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
          • <py-script>標簽中寫具體的python代碼來輸出Hello World

          如果你懶得自己敲代碼的話,本文的兩個案例代碼我打包放在公眾號了,需要的朋友可以關注公眾號“程序猿DD”,回復:pyscript 獲取。

          第二個案例,數據定義 + 數據展示

          先創建一個data.py文件,然后加入前面的代碼。功能很簡單,就是隨機生成(x,y)的坐標

          import numpy as np
          
          def make_x_and_y(n):
              x = np.random.randn(n)
              y = np.random.randn(n)
              return x, y
          

          再創建一個html文件,加入下面的代碼

          <html>
              <head>
                <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
                <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
                <py-env>
                  - numpy
                  - matplotlib
                  - paths:
                    - /data.py
                </py-env>
              </head>
          
            <body>
              <h1>Let's plot random numbers</h1>
              <div id="plot"></div>
              <py-script output="plot">
              import matplotlib.pyplot as plt
              from data import make_x_and_y
          
              x, y = make_x_and_y(n=1000)
          
              fig, ax = plt.subplots()
              ax.scatter(x, y)
              fig
              </py-script>
            </body>
          </html>
          

          這里就稍微復雜一些了,除了hello world中的幾個要點外,這里還有這幾個要關注的地方:

          • <py-env>標簽:這里聲明要引入的包和要引入的文件(上面創建的data.py
          • <py-script output="plot">:這里定義了要在<div id="plot"></div>中輸出的內容,可以看到這里的邏輯都是用python寫的

          這個頁面的執行效果是這樣的:

          是不是很神奇呢?整個過程中都沒有大家熟悉的cs、js內容,就完成了這樣一個圖的頁面實現。

          小結

          最后,談談在整個嘗試過程中,給我的幾個感受:

          1. 開發體驗上高度統一,對于python開發者來說,開發Web應用的門檻可以更低了
          2. 感覺性能上似乎有所不足,幾個復雜的案例執行有點慢,開始以為是部分國外cdn的緣故,后來移到本地后,還是慢。這部分可能還需要進一步優化。

          這個開發框架目前還只是alpha版本,未來一定還會有更多特性與優化出來,總體上我覺得這個框架還是非常cool的,尤其對于剛學會Python,或者只會Python,但又想快速開發Web應用的小伙伴來說,可能將會是個不錯的選擇,那你覺得這個框架如何?未來會不會火?留言區聊聊吧!

          .Doctype作用?標準模式與兼容模式各有什么區別

          <!DOCTYPE>聲明位于位于HTML文檔中的第一行,處于 <html>標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
          標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

          2.HTML5 為什么只需要寫 <!DOCTYPE HTML>?

          HTML5 不基于 SGML,因此不需要對DTD進行引用,但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行);
          而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。**

          3.行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

          首先:CSS規范規定,每個元素都有display屬性,確定該元素的類型,每個元素都有默認的display值,如div的display默認值為“block”,則為“塊級”元素;span默認display屬性值為“inline”,是“行內”元素
          (1)行內元素有:a b span img input select strong(強調的語氣)
          (2)塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
          (3)常見的空元素:


          <img><input><link><meta>
          鮮為人知的是:
          <area><base><col><command><embed><keygen><param><source><track><wbr>
          4.頁面導入樣式時,使用link和@import有什么區別?
          link屬于XHTML標簽,除了加載CSS外,還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用于加載CSS;
          頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;
          import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標簽,無兼容問題;

          5.介紹一下你對瀏覽器內核的理解?

          主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
          渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
          JS引擎則:解析和執行javascript來實現網頁的動態效果。
          最開始渲染引擎和JS引擎并沒有區分的很明確,后來JS引擎越來越獨立,內核就傾向于只指渲染引擎。

          6.常見的瀏覽器內核有哪些?

          Trident內核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
          Gecko內核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
          Presto內核:Opera7及以上。 [Opera內核原為:Presto,現為:Blink;]
          Webkit內核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

          7.html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?

          • HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。繪畫 canvas;
            用于媒介回放的 video 和 audio 元素;
            本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;
            sessionStorage 的數據在瀏覽器關閉后自動刪除;
            語意化更好的內容元素,比如 article、footer、header、nav、section;
            表單控件,calendar、date、time、email、url、search;
            新的技術webworker, websocket, Geolocation;


          移除的元素:
          純表現的元素:basefont,big,center,font, s,strike,tt,u;
          對可用性產生負面影響的元素:frame,frameset,noframes;

          • 支持HTML5新標簽:IE8/IE7/IE6支持通過document.createElement方法產生的標簽,
            可以利用這一特性讓這些瀏覽器支持HTML5新標簽,
            瀏覽器支持新標簽后,還需要添加標簽默認的樣式。
            當然也可以直接使用成熟的框架、比如html5shim;
            <!--[if lt IE 9]>
            <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
            <![endif]-->
          • 如何區分HTML5: DOCTYPE聲明新增的結構元素功能元素
            H5新特性
            表單 畫布 音視頻 地理定位 媒體查詢 css新特性 離線緩存 本地存儲 拖拽

          8.簡述一下你對HTML語義化的理解?

          用正確的標簽做正確的事情。
          html語義化讓頁面的內容結構化,結構更清晰,便于對瀏覽器、搜索引擎解析;
          即使在沒有樣式CSS情況下也以一種文檔格式顯示,并且是容易閱讀的;
          搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重,利于SEO;
          使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。

          9.HTML5的離線儲存怎么使用,工作原理能不能解釋一下?

          在用戶沒有連網時,可以正常訪問站點或應用,在用戶與網絡連接時更新用戶機器上的緩存文件。
          原理:HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術),通過這個文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時,瀏覽器會通過被離線存儲的數據進行頁面展示。
          如何使用
          頁面頭部像下面一樣加入一個manifest的屬性;
          在cache.manifest文件的編寫離線存儲的資源;
          CACHE MANIFEST
          #v0.11
          CACHE:
          js/app.js
          css/style.css
          NETWORK:
          resourse/logo.png
          FALLBACK:
          / /offline.html
          在離線狀態時,操作window.applicationCache進行需求實現。

          10.瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢?

          在線的情況下,瀏覽器發現html頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問app,那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了,那么瀏覽器就會使用離線的資源加載頁面,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發生改變,就不做任何操作,如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲。
          離線的情況下,瀏覽器就直接使用離線存儲的資源。

          11.iframe有那些缺點?

          iframe會阻塞主頁面的Onload事件;
          搜索引擎的檢索程序無法解讀這種頁面,不利于SEO;
          iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載。
          使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript
          動態給iframe添加src屬性值,這樣可以繞開以上兩個問題。

          12.Label的作用是什么?是怎么用的?

          label標簽來定義表單控制間的關系,當用戶選擇該標簽時,瀏覽器會自動將焦點轉到和標簽相關的表單控件上。

          <label for="Name">Number:</label>
          <input type=“text“name="Name" id="Name"/>
          <label>Date:<input type="text" name="B"/></label>

          13.如何實現瀏覽器內多個標簽頁之間的通信?

          WebSocket、也可以調用localstorge、cookies等本地存儲方式,還可以使用頁面的路有參數傳遞
          localstorge另一個瀏覽上下文里被添加、修改或刪除時,它都會觸發一個事件,
          我們通過監聽事件,控制它的值來進行頁面信息通信;
          14.如何在頁面上實現一個圓形的可點擊區域?
          map+area或者svg
          border-radius
          純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

          15.title與h1的區別、b與strong的區別、i與em的區別?

          title屬性沒有明確意義只表示是個標題,H1則表示層次明確的標題,對頁面信息的抓取也有很大的影響;
          strong是標明重點內容,有語氣加強的含義,使用閱讀設備閱讀網絡時:會重讀,而是展示強調內容。
          i內容展示為斜體,em表示強調的文本;

          16.data-屬性的作用是什么?

          h5新增的屬性
          可以通過ele.dataset獲取到標簽上的data-x的屬性
          返回一個對象

          17.常見兼容性問題?

          問題:png24位的圖片在iE6瀏覽器上出現背景,

          解決:解決方案是做成PNG8.

          問題:瀏覽器默認的margin和padding不同。

          解決:方案是加一個全局的*{margin:0;padding:0;}來統一。

          問題:IE6雙邊距bug:塊屬性標簽float后,又有橫行的margin情況下,在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會產生20px的距離**

          解決:解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
          漸進識別的方式,從總體中逐漸排除局部。
          首先,巧妙的使用“9”這一標記,將IE游覽器從所有情況中分離出來。 接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。
          css

          .bb{ 
             background-color:#f1ee18;/*所有識別*/ 
            .background-color:#00deff\9; /*IE6、7、8識別*/ 
            +background-color:#a200ff;/*IE6、7識別*/ 
            _background-color:#1e0bd1;/*IE6識別*/ 
            } 
          

          問題:IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性,Firefox下,只能使用getAttribute()獲取自定義屬性.

          解決:解決方法:統一通過getAttribute()獲取自定義屬性.

          問題:IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性,Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

          解決方法:(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

          問題:Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,

          解決:可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

          問題:超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了

          解決:方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

          18.你知道多少種Doctype文檔類型?

          該標簽可聲明三種 DTD 類型,分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
          HTML 4.01 規定了三種文檔類型:Strict、Transitional 以及 Frameset。
          XHTML 1.0 規定了三種 XML 文檔類型:Strict、Transitional 以及 Frameset。
          Standards (標準)模式(也就是嚴格呈現模式)用于呈現遵循最新標準的網頁,而 Quirks(包容)模式(也就是松散呈現模式或者兼容模式)用于呈現為傳統瀏覽器而設計的網頁。

          19.HTML與XHTML——二者有什么區別?

          1)所有的標記都必須要有一個相應的結束標記
          2)所有標簽的元素和屬性的名字都必須使用小寫
          3)所有的XML標記都必須合理嵌套
          4)所有的屬性必須用引號""括起來
          5)把所有<和&特殊符號用編碼表示
          6)給所有屬性賦一個值
          7)不要在注釋內容中使“--”
          8)圖片必須有說明文字

          20.<img>的title和alt有什么區別?

          title是global attributes之一,用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。
          alt是<img>的特有屬性,是圖片內容的等價描述,用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性,除了純裝飾圖片外都必須設置有意義的值,搜索引擎會重點分析。

          21.div+css的布局較table布局有什么優點?

          改版的時候更方便 只要改css文件。
          頁面加載速度更快、結構化清晰、頁面顯示簡潔。
          表現與結構相分離。
          易于優化(seo)搜索引擎更友好,排名更容易靠前。

          22.CSS都有哪些選擇器?

          派生選擇器(用HTML標簽申明)
          id選擇器(用DOM的ID申明)
          類選擇器(用一個樣式類名申明)
          屬性選擇器(用DOM的屬性申明,屬于CSS2,IE6不支持,不常用,不知道就算了)
          除了前3種基本選擇器,還有一些擴展選擇器,包括
          后代選擇器(利用空格間隔,比如div .a{ })
          群組選擇器(利用逗號間隔,比如p,div,#a{ })
          那么問題來了,CSS選擇器的優先級是怎么樣定義的?

          基本原則:

          一般而言,選擇器越特殊,它的優先級越高。也就是選擇器指向的越準確,它的優先級就越高。
          復雜的計算方法:
          用1表示派生選擇器的優先級
          用10表示類選擇器的優先級
          用100標示ID選擇器的優先級
          div.test1 .span var 優先級 1+10 +10 +1
          span#xxx .songs li 優先級1+100 + 10 + 1
          xxx li 優先級 100 +1
          那么問題來了,看下列代碼,<p>標簽內的文字是什么顏色的?
          <style>
          .classA{ color:blue;}
          .classB{ color:red;}
          </style>
          <body>
          <p class='classB classA'> 123 </p>
          </body>
          答案:red。與樣式定義在文件中的先后順序有關,即是后面的覆蓋前面的,與在<p class=’classB classA’>中的先后關系無關。

          23.行內元素和塊級元素的具體區別是什么?行內元素的padding和margin可設置嗎?

          塊級元素(block)特性:
          總是獨占一行,表現為另起一行開始,而且其后的元素也必須另起一行顯示;
          寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
          內聯元素(inline)特性:
          和相鄰的內聯元素在同一行;
          寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變(也就是padding和margin的left和right是可以設置的),就是里面文字或圖片的大小。
          那么問題來了,瀏覽器還有默認的天生inline-block元素(擁有內在尺寸,可設置高寬,但不會自動換行),有哪些?
          答案:<input> 、<img> 、<button> 、<texterea> 、<label>。

          24.什么是外邊距重疊?重疊的結果是什么?

          外邊距重疊就是margin-collapse。
          在CSS當中,相鄰的兩個盒子(可能是兄弟關系也可能是祖先關系)的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊,并且因而所結合成的外邊距稱為折疊外邊距。
          折疊結果遵循下列計算規則:
          兩個相鄰的外邊距都是正數時,折疊結果是它們兩者之間較大的值。
          兩個相鄰的外邊距都是負數時,折疊結果是兩者絕對值的較大值。
          兩個外邊距一正一負時,折疊結果是兩者的相加的和。

          25.rgba()和opacity的透明效果有什么不同?

          rgba()和opacity都能實現透明效果,但最大的不同是opacity作用于元素,以及元素內的所有內容的透明度,
          而rgba()只作用于元素的顏色或其背景色。(設置rgba透明的元素的子元素不會繼承透明效果!)

          26.CSS 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? CSS3新增偽類有那些?

          *   1.id選擇器( # myid)
              2.類選擇器(.myclassname)
              3.標簽選擇器(div, h1, p)
              4.相鄰選擇器(h1 + p)
              5.子選擇器(ul < li)
              6.后代選擇器(li a)
              7.通配符選擇器( * )
              8.屬性選擇器(a[rel = "external"])
              9.偽類選擇器(a: hover, li: nth - child)
          *   可繼承: font-size font-family color, UL LI DL DD DT;
          *   不可繼承 :border padding margin width height ;
          *   優先級就近原則,樣式定義最近者為準;
          *   載入樣式以最后載入的定位為準;

          優先級為:

             !important >  id > class > tag  
             important 比 內聯優先級高

          CSS3新增偽類舉例:

          p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
          p:last-of-type  選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
          p:only-of-type  選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
          p:only-child    選擇屬于其父元素的唯一子元素的每個 <p> 元素。
          p:nth-child(2)  選擇屬于其父元素的第二個子元素的每個 <p> 元素。
          :enabled、:disabled 控制表單控件的禁用狀態。
          :checked,單選框或復選框被選中。

          27.如何居中div,如何居中一個浮動元素?

          給div設置一個寬度,然后添加margin:0 auto屬性

          div{

          width:200px;
          margin:0 auto;

          }

          居中一個浮動元素

            確定容器的寬高 寬500 高 300 的層
            設置層的外邊距
          
          

          .div {
          Width:500px ; height:300px;//高度可以不設
          Margin: -150px 0 0 -250px;
          position:relative;相對定位
          background-color:pink;//方便看效果
          left:50%;
          top:50%;
          }

          28.瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什么,常用hack的技巧 ?

          *  IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto;
          *  png24為的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.
          *  瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
          *  IE6雙邊距bug:塊屬性標簽float后,又有橫行的margin情況下,在ie6顯示margin比設置的大。 
            浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 
           這種情況之下IE會產生20px的距離,解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
            漸進識別的方式,從總體中逐漸排除局部。 
            首先,巧妙的使用“\9”這一標記,將IE游覽器從所有情況中分離出來。 
            接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。
          
          

          css

            .bb{
             background-color:#f1ee18;/*所有識別*/
            .background-color:#00deff\9; /*IE6、7、8識別*/
            +background-color:#a200ff;/*IE6、7識別*/
            _background-color:#1e0bd1;/*IE6識別*/
            }
          
          
          *  IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
             也可以使用getAttribute()獲取自定義屬性;
             Firefox下,只能使用getAttribute()獲取自定義屬性. 
             解決方法:統一通過getAttribute()獲取自定義屬性.
          *  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; 
            Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
          * (條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
          *  Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
          超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
          L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
          

          29.css優先級算法如何計算?

          !important > id > class > 標簽
          !important 比 內聯優先級高

          • 優先級就近原則,樣式定義最近者為準;
          • 以最后載入的樣式為準;

          30.哪些css屬性可以繼承?

          可繼承: font-size font-family color, ul li dl dd dt;
          不可繼承 :border padding margin width height ;

          DOM

          講 DOM 先從 HTML 講起,講 HTML 先從 XML 講起。XML 是一種可擴展的標記語言,所謂可擴展就是它可以描述任何結構化的數據,它是一棵樹!

          1.documen.write和 innerHTML的區別

          document.write只能重繪整個頁面
          innerHTML可以重繪頁面的一部分

          2.DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?

          1)創建新節點

          createDocumentFragment() //創建一個DOM片段
          createElement() //創建一個具體的元素
          createTextNode() //創建一個文本節點

          2)添加、移除、替換、插入

          appendChild()
          removeChild()
          replaceChild()
          insertBefore() //在已有的子節點前插入一個新的子節點

          3)查找

          getElementsByTagName() //通過標簽名稱
          getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等于name值的)
          getElementById() //通過元素Id,唯一性

          3.attribute和property的區別是什么?

          attribute是dom元素在文檔中作為html標簽擁有的屬性;
          property就是dom元素在js中作為對象擁有的屬性。
          所以:
          對于html的標準屬性來說,attribute和property是同步的,是會自動更新的,
          但是對于自定義的屬性來說,他們是不同步的,

          4.src和href的區別

          src用于替換當前元素,href用于在當前文檔和引用資源之間確立聯系。
          src是source的縮寫,指向外部資源的位置,指向的內容將會嵌入到文檔中當前標簽所在位置;在請求src資源時會將其指向的資源下載并應用到文檔內,當瀏覽器解析到該元素時,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執行完畢,圖片和框架等元素也如此,類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
          Src source,指向外部資源的位置,如果我們添加<script src ="js.js"></script>瀏覽器會暫停其他資源的下載和處理,直到該資源加載,編譯,執行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
          src用于替換當前元素,href用于在當前文檔和引入資源之間建立聯系。

          存儲

          cookie

          cookie 本身不是用來做服務器端存儲的(計算機領域有很多這種“狗拿耗子”的例子,例如 CSS 中的 float),它是設計用來在服務器和客戶端進行信息傳遞的,因此我們的每個 HTTP 請求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲的能力(例如記住用戶名和密碼),因此就被開發者用上了。
          使用起來也非常簡單,document.cookie = ....即可。
          但是 cookie 有它致命的缺點:
          存儲量太小,只有 4KB
          所有 HTTP 請求都帶著,會影響獲取資源的效率
          API 簡單,需要封裝才能用

          locationStorage 和 sessionStorage

          后來,HTML5 標準就帶來了sessionStorage和localStorage,先拿localStorage來說,它是專門為了瀏覽器端緩存而設計的。

          其優點有:

          存儲量增大到 5MB
          不會帶到 HTTP 請求中
          API 適用于數據存儲 localStorage.setItem(key, value) localStorage.getItem(key)
          sessionStorage的區別就在于它是根據 session 過去時間而實現,而localStorage會永久有效,應用場景不同。例如,一些需要及時失效的重要信息放在sessionStorage中,一些不重要但是不經常設置的信息,放在localStorage中。

          對WEB標準以及W3C的理解與認識

          標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件,容易維 護、改版方便,不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性;


          主站蜘蛛池模板: 国产精品无码一区二区三级| 国产午夜精品一区理论片飘花| 国产福利电影一区二区三区,亚洲国模精品一区 | 亚洲AV永久无码精品一区二区国产| 亚洲成在人天堂一区二区| 午夜精品一区二区三区在线观看| 久久一区二区三区精华液使用方法 | 国产主播福利一区二区| 色婷婷综合久久久久中文一区二区| 无码精品蜜桃一区二区三区WW | 日韩精品无码Av一区二区| 欧美成人aaa片一区国产精品| 亚洲日本久久一区二区va| 亚洲美女视频一区| 亚洲一区二区三区高清视频| 少妇精品久久久一区二区三区 | 国产精品高清一区二区三区| 国产成人无码AV一区二区| 精品福利一区二区三区精品国产第一国产综合精品 | 免费人人潮人人爽一区二区| 日韩色视频一区二区三区亚洲| 韩国资源视频一区二区三区| 国产一区二区视频免费| 日韩有码一区二区| 一区二区中文字幕在线观看| chinese国产一区二区| 一区二区免费国产在线观看| 成人区人妻精品一区二区不卡视频| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 国产精品无码一区二区在线| 亚洲综合一区无码精品| 国产香蕉一区二区三区在线视频 | 久久亚洲中文字幕精品一区四| 亚洲综合色自拍一区| 久久久久人妻精品一区| 人妻互换精品一区二区| 色一情一乱一伦一区二区三区日本| 天堂Aⅴ无码一区二区三区| 无码成人一区二区| 成人无号精品一区二区三区| 一本色道久久综合一区|