HTML5基礎入門

.標簽

1.1meta標簽

meta主要用于設置網頁中的一些元數據，元數據不是給用戶看 charset 指定網頁的字符集 name 指定的數據的名稱 content 指定的數據的內容

keywords 表示網站的關鍵字，可以同時指定多個關鍵字，關鍵字間使用,隔開

<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

description 用于指定網站的描述

<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>

<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

將頁面重定向到另一個網站

1.2title標簽

title標簽的內容會作為搜索結果的超鏈接上的文字顯示

<title>Document</title>

1.3標題

h1 ~ h6 一共有六級標題
從h1~h6重要性遞減，h1最重要，h6最不重要
h1在網頁中的重要性僅次于title標簽，一般情況下一個頁面中只會有一個h1
標題元素是塊元素
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
hgroup標簽用來為標題分組，可以將一組相關的標題同時放入到hgroup
<hgroup>
<h1>回鄉偶書二首</h1>
<h2>其一</h2>
</hgroup>
其他標簽

p標簽表示頁面中的一個段落
<p>在p標簽中的內容就表示一個段落</p>
em標簽用于表示語音語調的一個加重
<p>今天天氣<em>真</em>不錯！</p>
strong表示強調，重要內容！
<p>你今天必須要<strong>完成作業</strong>！</p>
blockquote 表示一個長引用
<blockquote>
這句話我是從來沒有說過的！
</blockquote>
q表示一個短引用
子曰<q>學而時習之，樂呵樂呵！</q>
br標簽表示頁面中的換行
<br>

1.4布局標簽

header 表示網頁的頭部 main 表示網頁的主體部分(一個頁面中只會有一個main) footer 表示網頁的底部 nav 表示網頁中的導航 aside 和主體相關的其他內容（側邊欄） article 表示一個獨立的文章 section 表示一個獨立的區塊，上邊的標簽都不能表示時使用section

div 沒有語義，就用來表示一個區塊，目前來講div還是我們主要的布局元素

span 行內元素，沒有任何的語義，一般用于在網頁中選中文字

<header></header>
    <main></main>
    <footer></footer>

    <nav></nav>
    <aside></aside>
    <article></article>

    <section></section>

    <div></div>

    <span></span>

1.5列表

1.1.1分類

1.1.1.1有序列表

使用ol標簽來創建無序列表，使用li表示列表項

<ul>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ul>

1.1.1.2 無序列表

使用ul標簽來創建無序列表，使用li表示列表項

<ol>
       <li>結構</li>
       <li>表現</li>
       <li>行為</li>
   </ol>

1.1.1.3定義列表

使用dl標簽來創建一個定義列表，使用dt來表示定義的內容，使用dd來對內容進行解釋說明

<dl>
       <dt>結構</dt>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
       <dd>結構表示網頁的結構，結構用來規定網頁中哪里是標題，哪里是段落</dd>
   </dl>

1.1.1.4列表之間可以互相嵌套

<ul>
       <li>
          aa
           <ul>
               <li>aa-1</li>
               <li>aa-2
                   <ul>
                       <li>aa-1</li>
                       <li>aa-2</li>
                   </ul>
               </li>
           </ul>
       </li>
   </ul>

1.6超鏈接

1.6.1 作用

超鏈接可以讓我們從一個頁面跳轉到其他頁面，或者是當前頁面的其他的位置

1.6.2 定義

使用 a 標簽來定義超鏈接

<a href="https://www.baidu.com">超鏈接</a>

1.6.3 屬性

1.6.3.1屬性1：href

指定跳轉的目標路徑

值可以是一個外部網站的地址

也可以寫一個內部頁面的地址

超鏈接是也是一個行內元素，在a標簽中可以嵌套除它自身外的任何元素

1.6.3.2 屬性2：target

用來指定超鏈接打開的位置

_self 默認值在當前頁面中打開超鏈接

_blank 在一個新的要么中打開超鏈接

<a href="07.列表.html" target="_blank">超鏈接</a>

1.6.4其他

將#作為超鏈接的路徑的展位符使用

javascript：; 來作為href的屬性，此時點擊這個超鏈接什么也不會發生

將超鏈接的href屬性設置為#，這樣點擊超鏈接以后頁面不會發生跳轉，而是轉到當前頁面的頂部的位置

跳轉到頁面的指定位置，只需將href屬性設置 #目標元素的id屬性值

<a href="#bottom">去底部</a>
   <br><br>
<a href="#p3">去第三個自然段</a>
   <br><br>
<p>
  內容多一點
</p>
<a href="#">這是一個新的超鏈接</a>
   <br><br>
<a href="javascript：;">這是一個新的超鏈接</a>
   <br><br>
<a id="bottom" href="#">回到頂部</a>

1.7圖片標簽

img標簽來引入外部圖片，img標簽是一個自結束標簽

屬性：src 屬性指定的是外部圖片的路徑（路徑規則和超鏈接是一樣的）

alt 圖片的描述，這個描述默認情況下不會顯示，有些瀏覽器會圖片無法加載時顯示

<img src="./img/1.gif" alt="松鼠">

1.8內聯框架

用于向當前頁面中引入一個其他頁面

src 指定要引入的網頁的路徑
frameborder 指定內聯框架的邊框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

1.8 音視頻標簽

1.8.1音頻

audio 標簽用來向頁面中引入一個外部的音頻文件的

1.8.1.1 屬性

controls 是否允許用戶控制播放
autoplay 音頻文件是否自動播放

如果設置了autoplay 則音樂在打開頁面時會自動播放

loop 音樂是否循環播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

除了通過src來指定外部文件的路徑以外，還可以通過source來指定文件的路徑

<audio controls>
       <!-- 對不起，您的瀏覽器不支持播放音頻！請升級瀏覽器！-->
       <source src="./source/audio.mp3">
       <source src="./source/audio.ogg">
       <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
   </audio>

1.8.2視頻

與 audio 相似

<video controls>
       <source src="./source/flower.webm">
       <source src="./source/flower.mp4">
       <embed src="./source/flower.mp4" type="video/mp4">
   </video>

2.表格table

在table中使用tr表示表格中的一行，有幾個tr就有幾行
在tr中使用td表示一個單元格，有幾個td就有幾個單元格
rowspan 縱向的合并單元格
colspan 橫向的合并單元格

<table border="1" width='50%' align="center">
      <tr>
          <td>A1</td>
          <td>B1</td>
          <td>C1</td>
          <td>D1</td>
      </tr>
      <tr>
          <td>A2</td>
          <td>B2</td>
          <td>C2</td>
          <td rowspan="2">D2</td>
      </tr>
      <tr>
          <td>A3</td>
          <td>B3</td>
          <td>C3</td>
      </tr>
      <tr>
          <td>A4</td>
          <td>B4</td>
          <td colspan="2">C4</td>
      </tr>
  </table>

長表格

可以將一個表格分成三個部分：

頭部 thead
主體 tbody
底部 tfoot

th 表示頭部的單元格

<table border="1" width='50%' align="center">  
      <thead>
          <tr>
              <th>日期</th>
              <th>收入</th>
              <th>支出</th>
              <th>合計</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
          <tr>
              <td>2000.1.1</td>
              <td>500</td>
              <td>200</td>
              <td>300</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
              <td></td>
              <td></td>
              <td>合計</td>
              <td>300</td>
          </tr>
      </tfoot>

  </table>

表格樣式

border-spacing: 指定邊框之間的距離

border-spacing: 0px;

border-collapse: collapse; 設置邊框的合并

border-collapse: collapse;

如果表格中沒有使用tbody而是直接使用tr，那么瀏覽器會自動創建一個tbody，并且將tr全都放到tbody中tr不是table的子元素

3.表單（form）

使用form標簽來創建一個表單
action 表單要提交的服務器的地址
數據要提交到服務器中，必須要為元素指定一個name屬性值

<input type="text" name="username">

單選按鈕

像這種選擇框，必須要指定一個value屬性，value屬性最終會作為用戶的填寫的值傳遞給服務器
checked 可以將單選按鈕設置為默認選中

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多選框

<input type="checkbox" name="test" value="1">
      <input type="checkbox" name="test" value="2">
      <input type="checkbox" name="test" value="3" checked>

下拉列表

<select name="haha">
          <option value="i">選項一</option>
          <option selected value="ii">選項二</option>
          <option value="iii">選項三</option>
      </select>

提交按鈕

<input type="submit" value="注冊">

屬性

autocomplete="off" 關閉自動補全
readonly 將表單項設置為只讀，數據會提交
disabled 將表單項設置為禁用，數據不會提交
autofocus 設置表單項自動獲取焦點

<form action="target.html">
      <input type="text" name="username" value="hello" readonly>
      <br><br>
      <input type="text" name="username" autofocus>
      <br><br>
      <input type="text" name="b">

      <br><br>

      <!-- <input type="color"> -->
      <br><br>
      <!-- <input type="email"> -->
      <br><br>

      <input type="submit">
      <!-- 重置按鈕 -->
      <input type="reset">
      <!-- 普通的按鈕 -->
      <input type="button" value="按鈕">

      <br><br>
       

      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <button type="button">按鈕</button>
  </form>

4.注釋

<!--
我是注釋中的注釋 注釋不能嵌套
-->

5.屬性

屬性，在標簽中（開始標簽或自結束標簽）還可以設置屬性
屬性是一個名值對（x=y）
屬性用來設置標簽中的內容如何顯示
屬性和標簽名或其他屬性應該使用空格隔開
屬性不能瞎寫，應該根據文檔中的規定來編寫，有些屬性有屬性值，有些沒有。如果有屬性值，屬性值應該使用引號引起來

6.文檔聲明

<!doctype html>

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

HTML5規范圍繞著如何使用新增標記定義了大量Javascript API；其中一些API與DOM重疊，定義了瀏覽器應該支持的DOM擴展；

從HTML4開始，在Web開發領域，有一個非常大的應用，就是濫用class屬性，一方面可以通過它為元素添加樣式，另一方面還可以用它表示元素的語義；于是，開發人員會用大量的Javascript代碼來操作CSS類，比如動態修改類或者搜索文檔中具有給定類或給定的一組類的元素，等等這些操作；為了讓開發人員適應并增加對class屬性的新的認識，HTML5新增了很多API，致力于簡化CSS類的用法；

getElementsByClassName(names)方法：

該方法是基于元素class屬性值中的類名來選取成組的文檔元素，可以通過document對象或Element元素調用這個方法；該方法最早出現在第三方Javascript類庫中，是通過既有的DOM功能實現的，而現在，原生的實現具有極大的性能優勢；

該方法接收一個names參數，即一個包含一個或多個類名的字符串，多個類名使用空格隔開，返回帶有指定類的所有元素的HTMLCollection；

var elts = document.getElementsByClassName("myclass");
console.log(elts);  // HTMLCollection
console.log(elts[0]);  // 第一個元素

傳入多個類名時，類名的先后順序不重要；如：

// 取得所有類中同時包括username和current的元素，類名的先后順序無所謂
var allCurrentUsernames = document.getElementsByClassName("username current");
console.log(allCurrentUsernames);
var selected = document.getElementById("mydiv").getElementsByClassName("selected");
console.log(selected);

它返回的HTMLCollection集合，可以借用Array的方法，如：

var elts = document.getElementsByClassName("selected");
var eltDivs = Array.prototype.filter.call(elts, function(ele){
    return ele.nodeName === 'DIV';
});
console.log(eltDivs);  // 返回擁有selected類名的所有div元素

使用這個方法可以更方便地為帶有某些類的元素添加事件處理程序，從面不必再局限于使用ID或標簽名；

<style>
.zr{background-color: rosybrown;}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    50%{transform: rotate(45deg);}
    100%{transform: rotate(0deg);}
}
.animating{
    animation: rotate 2s ease-in-out;
}
</style>
<p class="zr">this is ok</p>
<!-- 添加若干個class為zr的元素 -->
<script>
var elts = document.getElementsByClassName("zr");
for(var i=0,len=elts.length; i<len; i++){
    elts[i].addEventListener("click",function(e){
        this.classList.add("animating");
    },false);
    elts[i].addEventListener("animationend",function(e){
        this.classList.remove("animating");
        console.log("end");
    });
}
</script>

如此，我們就可以為某些需要執行動畫的元素添加一個名為zr的class類即可；當然，此處是一個動畫效果，也可以是其他的某些操作；

getElementsByClassName()方法與querySelector()和querySelectorAll()方法很類似，但用法及返回類型不同；

var elts = document.getElementsByClassName("myclass outer");
console.log(elts);  // HTMLCollection
var elts = document.querySelectorAll(".myclass,.outer");
console.log(elts);  // NodeList

getElementsByClassName()參數只能是類名，且多個類名用空格隔開，多個類名是并的關系，而且不分順序，即只有所有class都匹配的元素才會被返回，其返回類型是HTMLCollection，是動態的集合；

querySelector()參數是CSS選擇器，并且可以使用復雜的CSS選擇器，只要是合法的CSS選擇器都可以，但多個選擇器必須使用逗號分隔，它們是或的關系，其返回類型是NodeList，并且這個NodeList是靜態的；

目前，獲取元素集合共有四個方法，要注意它們的不同點；

var elts = document.getElementsByClassName("myclass outer");
console.log(elts);  // HTMLCollection
var elts = document.getElementsByTagName("div");
console.log(elts);  // HTMLCollection
var elts = document.getElementsByName("myname");
console.log(elts);  // NodeList
var elts = document.querySelectorAll(".myclass,.outer,.current");
console.log(elts);  // NodeList

另外，需要注意的是，getElementsByClassName()方法返回的是動態HTMLCollection，所以使用這個方法與使用getElementsByTagName()以及其他返回動態集合的DOM方法都具有同樣的性能問題；

元素滾動：

Element.scrollIntoView(alignToTop | scrollIntoViewOptions)方法：

DOM對滾動頁面沒有做出規定；各瀏覽器分別實現了相應的方法，用于以不同方式控制滾動，最終HTML5選擇了scrollIntoView()作為標準方法；

該方法是作為Element類型的擴展存在的，因此可以在所有元素上使用，通過滾動瀏覽器窗口或某個容器元素，使調用該方法的元素出現在視口中；

該方法接收一個布爾值參數alignToTop或Object型（scrollIntoViewOptions）參數，如果為true或者省略，那么窗口會盡可能滾動到自身頂部與元素頂部平齊，如果為false，調用元素會盡可能全部出現在視口中，不過頂部不一定對齊；

var mybtn = document.getElementById("mybtn");
mybtn.onclick = function(){
    var img = document.getElementById("myimg");
    img.scrollIntoView(false);
}

Object型參數scrollIntoViewOptions：一個包含下列屬性的對象：

behavior：可選，定義動畫過渡效果，"auto"或 "smooth" 之一，默認為 "auto"；
block：可選，定義垂直方向的對齊，"start", "center", "end", "nearest"之一，默認為 "start"；
inline：可選，定義水平方向的對齊，"start", "center", "end", "nearest"之一，默認為 "nearest"；

img.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"});

但是IE與Edge對scrollIntoViewOptions這個參數并不友好，比如不支持behavior:”smooth”等；

var btn = document.getElementById("btn");
btn.onclick = function(){
    var img = document.querySelector("img");
    // 以下三行是等同的
    img.scrollIntoView();
    img.scrollIntoView(true);
    img.scrollIntoView({behavior:"auto",block:"start"});
    // 以下兩行是等同的，但IE與Edge似乎不識別end
    img.scrollIntoView(false);
    img.scrollIntoView({behavior:"auto",block:"end"});
}

另外，CSS3中有個平滑滾動的屬性scroll-behavior，如；

<style>
        html,body{scroll-behavior: smooth;}
</style>

只要頁面有滾動行為，自動進行平常處理；但IE與Edge不支持；

當頁面發生變化時，一般會用這個方法來吸引用戶的注意力；實際上，為某個元素設置焦點也會導致瀏覽器滾動并顯示出獲得焦點的元素；

var username = document.getElementById("username");
username.focus();

Element.scrollIntoViewIfNeeded()方法：

用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域，如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動，此方法是標準的Element.scrollIntoView()方法的專有變體，不屬于任何規范，是一種WebKit專有的方法；

var btn = document.getElementById("btn");
btn.onclick = function(){
    var elt = document.getElementById("elt");
    elt.scrollIntoViewIfNeeded(true);
}

目前，除了Chrome和Opera支持，其他都不支持；

應用的場景：

對URL中hash標記的進化；比如：回到頂部(#)；

<a href="javascript：void(0)" id="topA" style="position:fixed;right:50px;bottom:50px;display:block; width:50px;height:50px;background-color:purple;">回到頂部</a>
<script>
// 回到頂部
var topA = document.getElementById("topA");
topA.onclick = function(){
    document.body.scrollIntoView({behavior:"smooth",block:"start"});
}
</script>

滾動到指定位置(#xxx)；

如：一個單頁導航的應用；

<style>
*{margin:0; padding: 0;}
html,body{
    -ms-overflow-style: none; scrollbar-width: none;
}
::-webkit-scrollbar{ display: none; }
ul,li{list-style-type: none;}
header{
    position: fixed; top:0; left: 0;;
    width: 100%; height: 2rem; background-color: rgba(0, 0, 0, .5);
}
nav ul li{padding: 0 2rem; line-height: 2rem; float: left;}
nav ul li a{color:#FFF; text-decoration: none;}
section{width: 100%; height: 100vh; box-sizing: border-box; padding: 10%; background-size:cover;}
section#banner{background: url(images/1.jpg) no-repeat center; background-size:cover;}
section#service{background:url(images/2.jpg) no-repeat center; background-size:cover;}
section#contact{background: url(images/3.jpg) no-repeat center; background-size:cover;}
footer{
    width:100%;height: 2rem; background-color: rgba(0, 0, 0, .8); color:rgba(255, 255, 255, .8);
    position: fixed; left: 0; bottom: 0;
}
</style>
<header>
    <nav>
        <ul>
            <li><a href="dom1.html">首頁</a></li>
            <li><a href="#news" data-name="news">新聞</a></li>
            <li><a href="#service" data-name="service">服務</a></li>
            <li><a href="#about" data-name="about">關于</a></li>
            <li><a href="#contact" data-name="contact">聯系</a></li>
        </ul>
    </nav>
</header>
<section id="banner">
    <h2>零點程序員</h2>
    <h3>zeronetwork</h3>
</section>
<section id="news"><h2>新聞中心</h2></section>
<section id="service"><h2>服務領域</h2></section>
<section id="about"><h2>關于我們</h2></section>
<section id="contact"><h2>聯系我們</h2></section>
<footer><p>北京零點網絡科技有限公司,www.zeronetwork.cn 零點程序員</p></footer>
<script>
window.onload = function(){
    scrollPage();
    var navs = document.querySelectorAll("nav a");
    for(var i=0,len=navs.length; i<len; i++){
        (function(){
            var item = navs[i];
            item.addEventListener("click",function(event){
                event.preventDefault();
                scrollPage(event.target.dataset.name);
            },false);
        })();
    }
}
function scrollPage(id){
    console.log(id);
    var section = id ? document.querySelector("#" + id) : document.body;
    section.scrollIntoView({behavior:"smooth",block:"start"});
}
</script>

聊天窗口滾動顯示最新的消息；

<style>
*{margin: 0px; padding: 0;}
html,body{font-size: 14px;}
ul,li{list-style-type: none;}
li{margin: 1.5vh 0;}
#app{
    width: 400px; height: 400px; border: 10px solid purple;
    position: relative; background-color: rosybrown; 
    padding-bottom: 40px;
}
#message{ width: 100%; height:100%; padding:15px; padding-bottom: 0; 
    box-sizing: border-box; overflow-y: scroll;
}
#message ul{padding-bottom: 15px;}
#message ul li{display: flex;}
#message ul li.me{flex-direction: row-reverse;}
#message ul li a{display: inline-block;}
#message ul li a img{width: 2vw; height: 2vw; border-radius: 50%;}
#message ul li p{
    background-color: #FFF; border-radius: 3px; padding:0.5vw; margin:0 3vw 0 1vw;
}
#message ul li.me p{background-color:#09ce44;margin: 0 1vw 0 3vw;}
#inputdiv{
    position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; 
    background-color:rgba(0, 0, 0, 1); padding: 5px; box-sizing: border-box;
    display:flex;
}
#txtInput{flex-grow: 3;}
#btn{flex-grow: 1;}
</style>
<div id="app">
    <div id="message">
        <ul>
            <li><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
            <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
            <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>..</p></li>
            <li><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
            <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
        </ul>
    </div>
    <div id="inputdiv"><input type="text" id="txtInput" name="txtInput" />
    <input type="button" value="發送" id="btn" /></div>
</div>
<script>
window.onload = function(){
    var ul = document.querySelector("#message>ul");
    if(navigator.userAgent.indexOf("Trident") != -1){
        ul.scrollIntoView(false);
    }else{
        ul.scrollIntoView({behavior:"smooth", block:"end"});
    }
    var btn = document.querySelector("#btn");
    btn.addEventListener("click",function(e){
        var txtInput = document.querySelector("#txtInput");
        if(txtInput.value){
            var html = "<li class=\"me\"><a href=\"#\"><img src=\"images/1.jpg\" /></a>";
            html += "<p>" + txtInput.value + "</p></li>";
            document.querySelector("#message ul").insertAdjacentHTML("beforeend", html);
            txtInput.value = "";
        }
        if(navigator.userAgent.indexOf("Trident") != -1){
            ul.scrollIntoView(false);
        }else{
            ul.scrollIntoView({behavior:"smooth", block:"end"});
        }
    },false);
}
</script>

焦點管理：

HTML5也添加了輔助管理DOM焦點的功能；

document.activeElement屬性：

該屬性始終會引用DOM中當前獲得了焦點的元素；

元素獲得焦點的方式有頁面加載、用戶輸入和在代碼中調用focus()方法，如：

console.log(document.activeElement);
var btn = document.getElementById("myButton");
btn.focus();
console.log(document.activeElement === btn);  // true

默認情況下，文檔剛剛加載完成時，document.activeElement中保存的是document.body元素的引用，文檔加載期間，其該屬性的值為null；

一般情況下，都是在一個表單控件上應用焦點管理，比如，在一個input或textarea上選擇文本時，activeElement屬性就會返回該元素；

在現實中，該屬性在控件中使用時，一般會與選擇控件中的文本操作配合使用，比如，調用該控件的selectionStart()和selectionEnd()方法來獲取選擇的文本內容；

<input type="text" id="myinput" value="北京零點網絡科技有限公司" /><br/>
<textarea id="mytextarea" rows="5" cols="40">北京零點網絡科技有限公司推出零點程序員品牌，專門從事IT培訓，主講是大師哥王唯。</textarea>
<p>獲得焦點的元素：<b id="outputelement"></b></p>
<p>選擇的文本：<b id="outputtext"></b></p>
<script>
function selectText(e){
    var activeEl = document.activeElement;
    var selection = activeEl.value.substring(
        activeEl.selectionStart, activeEl.selectionEnd
    );
    var outputelement = document.getElementById("outputelement");
    var outputtext = document.getElementById("outputtext");
    outputelement.innerHTML = activeEl.id;
    outputtext.innerHTML = selection;
}
var myinput = document.getElementById("myinput");
var mytextarea = document.getElementById("mytextarea");
myinput.addEventListener("mouseup", selectText,false);
mytextarea.addEventListener("mouseup", selectText,false);
</script>

小示例：

// 獲取焦點的控件自動滾到頁面中間
window.addEventListener("click",function(e){
    var elt = document.activeElement;
    if(elt.tagName == "INPUT" || elt.tagName == "TEXTAREA")
        elt.scrollIntoView({behavior:"smooth", inline:"center"});
},false);

解決由于窗口縮放、鍵盤彈出后遮擋表單的問題：

<!-- 按tab切換到input，再縮放窗口大小 -->
<h1 tabindex="1">Web前端開發</h1>
<div style="height: 1000px; background-color: purple;" id="mydiv" tabindex="2">div</div>
<input type="text" />
<script>
window.addEventListener("resize",function(e){
    if(document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'){
        setTimeout(function(){
            document.activeElement.scrollIntoView({behavior:"smooth"});
        },100);
    }
});
</script>

activeElement屬性是只讀的，如果想讓某個元素獲取焦點，可以調用該元素的focus()方法，如：

var myinput = document.getElementById("myinput");
document.activeElement = myinput;  // 失效
myinput.focus();
console.log(document.activeElement);  // input

document.hasFocus()方法：

該方法用于表明當前文檔或者當前文檔內的節點是否獲得取焦點，該方法可以用來判斷當前文檔中的活動元素是否獲得了焦點，如：

console.log(document.hasFocus());

當查看一個文檔時，當前文檔中獲得焦點的元素一定是當前文檔的活動元素，但一個文檔中的活動元素不一定獲得了焦點，例如，一個在后臺窗口中的活動元素一定沒有獲得焦點；

通過檢測文檔是否獲得了焦點，可以知道用戶是不是正在與頁面交互；

<input id="btn" type="button" value="打開窗口" /><br/>
<script>
function openWin(){
    window.open("about:blank","newwin","width=400,height=300");
}
var btn = document.getElementById("btn");
btn.addEventListener("click", openWin, false);
function checkPageFocus(){
    if(document.hasFocus())
        console.log("該頁面獲得了焦點");
    else
        console.log("該頁面失去了焦點");
}
setInterval(checkPageFocus, 1000);
</script>

查詢文檔獲知哪個元素獲得了焦點，以及確定文檔是否獲得了焦點，這兩個功能最重要的用途是提高Web應用的無障礙性；無障礙Web應用的一個主要標志就是恰當的焦點管理，而確切地知道哪個元素獲得了焦點是一個比較重要的操作；

HTMLDocument的增強：

HTML5擴展了HTMLDocument，增加了新的功能；

document.readyState屬性：

該屬性描述了document 的加載狀態，當該屬性值發生變化時，會在 document 對象上觸發 readystatechange事件；

IE4最早為document對象引入了readyState屬性，然后，其他瀏覽器也都陸續實現了這個屬性，最終HTML5把這個屬性納入了標準之中。

該屬性有三個可能的值：

loading：正在加載文檔；
interactive：可交互的，文檔已被解析，"正在加載"狀態結束，但是諸如圖像，樣式表和框架之類的資源仍在加載；
complete：文檔和所有資源已完成加載，表示load狀態的事件即將被觸發；

console.log(document.readyState);  // loading

為什么要使用document.readyState屬性？目的就是通過它來實現一個指示文檔已經加載完成的指示器；在這個屬性沒有得到廣泛支持前，要實現這樣的一個指示器，必須借助onload事件處理程序，表明文檔已經加載完畢；

window.onload = function(){
    console.log("文檔加載完畢")
    console.log(document.readyState);  // complete
}
現在可以直接使用document.readyState屬性來判斷，如：
// 不會被執行，因為代碼運行到此處，readySate狀態為loading
if(document.readyState == "complete"){
    console.log("文檔已加載完畢");
    console.log(document.readyState);
}

但并沒有執行，因為代碼執行到此處，readyState的狀態為loading，而后它又不能自己更新，所以要實時的取得readyState的狀態；當該屬性值發生變化時，會在 document 對象上觸發 readystatechange事件，所以使用該事件就可以實時監聽它的狀態；

document.onreadystatechange = function(e) {
    // if(document.readyState == "loading"){
    //     console.log("Loading");
    // }else if(document.readyState == "interactive"){
    //     var span = document.createElement("span");
    //     span.textContent = "資源正在加載";
    //     document.body.appendChild(span);
    //     console.log("Interactive");
    // }else if(document.readyState == "complete"){
    //     var span = document.querySelector("span");
    //     document.body.removeChild(span);
    //     console.log("Complete");
    // }
    // 或者
    switch(document.readyState){
        case "loading":
            console.log("Loading");
            break;
        case "interactive":
            // 文檔已經結束了“正在加載”狀態，DOM元素可以被訪問。
            // 但是像圖像，樣式表和框架等資源依然還在加載。
            var span = document.createElement("span");
            span.textContent = "資源正在加載";
            document.body.appendChild(span);
            console.log("Interactive");
            break;
        case "complete":
            // 頁面所有內容都已被完全加載
            var img = document.getElementsByTagName("img")[0];
            console.log("圖片等資源加載完成：" + img.src);
            break;
    }
}

一個簡單小示例，loading頁

<style>
*{margin: 0; padding: 0;}
#loading{
    width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .6);
    position: absolute; top: 0; left: 0;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
#loading img{
    width: 5vw;
    position: absolute; left: 50%; top:50%;
    margin-left: -5vw; margin-top:-5vh;
    animation: rotate 1s linear infinite;  /* [??nf?n?t] */
}
#loading.loading-none{display: none;}
</style>
<div id="loading"><img src="images/loading.png" /></div>
<script>
document.onreadystatechange = function(e) {
    if(document.readyState == "complete")
        document.getElementById("loading").className = "loading-none";
    else
        document.getElementById("loading").className = ""
}
</script>

compatMode兼容模式：

頁面的渲染有兩種方式，Standards mode標準模式和Quirks mode混雜模式（也稱為怪異模式）；

這兩種模式主要影響CSS內容的呈現，某些情況下也會影響JavaScript的執行；所以，在開發時，確定瀏覽器處于何種模式很重要；

起先，是從IE6開始區分渲染頁面的模式是Standards mode還是Quirks mode；IE為此給document對象添加一個名為compatMode屬性，該屬性即用于識別瀏覽器處于什么模式；如果是標準模式，返回CSS1Compat，反之返回BackCompat；后來，其他瀏覽器也實現了這個屬性，最終HTML5也把這個屬性納入標準；

console.log(document.compatMode);  // CSS1Compat

目前，存在以下幾種情況：

瀏覽器都是根據是否有DOCTYPE聲明判斷，有則為標準模式，值為CSS1Compact，無則為混雜模式，值為BackCompact；因此，一條好習慣就是每個html文檔都要有doctype聲明；

對于有DOCTYPE聲明，但瀏覽器不能正確識別，則使用混雜模式，值為BackCompact；

如果有xml聲明 <?xml version="1.0" encoding="utf-8"?>也是混雜模式；

另外，如果文檔的第一行是標簽或文本，也為混雜模式；

對于IE來說，這兩種模式差別很大，但對其他瀏覽器來說，差別很小，因此，這兩種模式的判斷和差別主要是針對IE；

兩種模式的具體差別：

在Standards Mode下對于盒模型的解釋所有瀏覽器都是基本一致的，但在Quirks Mode模式下則有很大差別；

在Standards mode中：

元素真正的寬度 = margin + border-width + padding + width；

在Quirks mode中：

元素真正的寬度 = width，而其內容寬度 = width - (margin – padding - border-width)；

在標準模式下，所有尺寸都必須包含單位，否則會被忽略，而在混雜模式下，可以不帶單位，如：style.width = "20"，相當于"20px"；

當一個div元素中包含的內容只有圖片時，在標準模式下的所有瀏覽器中，在圖片底部都有4像素的空白；但在混雜模式下，div距圖片底部默認沒有空白；

兩種模式獲取視口的方式是不同的；

console.log(document.body.clientHeight);
console.log(document.documentElement.clientHeight);

就是說，在BackCompact模式下，取得document的某些屬性，如clientWidth、scrollLeft等，使用的是document.body，而標準模式下，使用的是document.documentElement，如：

var height = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
console.log(height);

documentMode文檔模式：

IE8為document對象添加了documentMode屬性，即文檔模式（document mode），該屬性與compatMode屬性緊密相關，但該屬性不是標準屬性，除了IE，其它瀏覽器都不支持；

console.log(document.documentMode);  // 11

頁面的文檔模式決定了可以使用什么功能，如，文檔模式決定了可以使用哪個級別的CSS，可以在Javascript中使用哪些API，以及如何對待文檔類型；

在IE8中，有三種不同的呈現模式：

為5，則為混雜模式(IE5)，IE8或更高版本中的新功能無法使用；
為7，表示IE7仿真模式，IE8或更高版本中的新功能無法使用；
為8，表示IE8標準模式，IE8中的新功能都可以使用，如可以使用Selectors API，更多CSS2級選擇器和某些CSS3功能，還有一些HTML5的功能；不過IE9中的新功能無法使用；

從IE8往后，都遵循了這一規律，比如，為9，表示IE9標準模式，支持ES5，CSS3和更多HTML5的功能；

有了這個屬性，就能準確的判斷IE的各種版本了，如：

var isIE = !!(window.ActiveXObject || "ActiveXObject" in window);
var ieMode = document.documentMode;
var isIE7 = isIE && ieMode && ieMode == 7;
var isIE8 = isIE && ieMode && ieMode == 8;
var isIE9 = isIE && ieMode && ieMode == 9;
var isIE10 = isIE && ieMode && ieMode == 10;
console.log(isIE);  // true
console.log(isIE10);  // 切換到10版本，返回true

X-UA-Compatible：

開發者還可以主動要求客戶端按照什么文檔模式進行渲染，也就是強制瀏覽器以某種模式渲染頁面，此時可以使用HTTP頭部信息X-UA-Compatible，或通過等價的<meta>標簽來設置：

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

IEVersion有可能有以下值：

Edge：始終以最新的文檔模式來渲染頁面；忽略文檔類型聲明；
EmulateIE9(8、7)：如果有文檔聲明，則以IE9(8、7)標準模式渲染頁面，否則將文檔模式設置為IE5；
9、8、7、5：強制以IE9(8、7、IE5模式)標準模式渲染頁面，忽略文檔類型聲明；

如：讓文檔模式像在IE7中一樣，可以：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

如果不考慮文檔類型聲明，而直接使用IE8標準模式，可以：

<meta http-equiv="X-UA-Compatible" content="IE=8">

再如，強制以IE5混雜模式渲染：

<meta http-equiv="X-UA-Compatible" content="IE=5" />

如果在IE8以下的瀏覽器中設置，是無效的，因為該設置是在IE8才開始有的；

使用最新的文檔模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

IE瀏覽器將總是使用最新版本的文檔模式；

另外，也可以同時設置多個值，中間用逗號隔開；

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

注意，由右向左進行嘗試，即先使用IE8模式，如果失敗，則使用IE模式；

最流行的設置：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

chrome=1表示可以激活Chrome Frame；

如果安裝了Google Chrome Frame（谷歌瀏覽器內嵌框架）則使用谷歌瀏覽器內核模式，甚至會使用Chrome的控制臺，否則使用最新的IE模式；

head屬性：

在HTML5規范中新增了document.head屬性，引用文檔的<head>元素，屬于HTMLHeadElement類型；

console.log(document.head);
console.log(document.head === document.querySelector("head"));

各主流瀏覽器均支持，但為了兼容低版本的，也可以結合備用方式，如：

var head = document.head || document.getElementsByTagName("head")[0];

如果有多個<head>元素，則返回第一個；

document.head 是個只讀屬性，為該屬性賦值只會靜默失敗，如果在嚴格模式中，則會拋出TypeError異常；

字符集屬性：

HTML5新增了幾個與文檔字符集有關的屬性，其中，charset屬性表示實際使用的字符集，也可以用來指定新字符集；可以通過<meta>元素、響應頭部或直接設置charset屬性修改這個值，但實際上是只讀的，現在已經被characterSet替代，該屬性是只讀屬性，返回當前文檔的字符編碼，該字符編碼是用于渲染此文檔的字符集，如：

console.log(document.charset);  // UTF-8

此時，可以修改文檔的字符集設置，如：

// IE與老版的Edge返回gb2312，其它默認失敗
document.charset = "gbk";
console.log(document.charset);  // UTF-8
console.log(document.characterSet);
// 同上，但所有瀏覽器靜默失敗
document.characterSet = "gbk";
console.log(document.characterSet);

另一個屬性是defaultCharset，表示根據默認瀏覽器及操作系統的設置，當前文檔默認的字符集應該是什么，該屬性不是標準屬性，沒什么用處；

console.log(document.defaultCharset);  // 只有IE與Safari有值

data-自定義數據屬性：

HTML5定義了一種標準的、附加額外數據的方法，即在HTML5文檔中，任意以”data-”為前綴的小寫的屬性名稱都是合法的，這樣的屬性被稱為數據集屬性，目的是為元素提供與渲染無關的信息，或者提供語義信息；這些屬性可以任意添加、隨便命名，只要以data-開頭即可，如：

<div id="mydiv" data-appId="1234" data-myname="wangwei"></div>

HTMLElement.dataset屬性：

在Javascript中也為Element對象上定義了dataset屬性，該屬性指代一個對象，是元素的data-特性的實時、雙向的接口；

dataset屬性的值是DOMStringMap接口的一個實例，被用于容納和展示元素的自定義屬(特)性，它就是一個名值對的映射，在這個映射中，每個data-name形式的屬性都會有一個對應的屬(特)性，只不過屬性名沒有data-前綴，比如，dataset.x保存的就是data-x屬(特)性的值；帶連字符的屬(特)性對應于駝峰命名屬性名，如：data-web-test屬(特)性就變成dataset.webTest屬性；如：

<div id="mydiv" data-appId="001" data-subtitle="zeronetwork" data-web-description="零點程序員"> 
// Javascript
var mydiv = document.getElementById("mydiv");
console.log(mydiv.dataset);  // DOMStringMap
console.log(mydiv.dataset.subtitle);  // zeronetwork
console.log(mydiv.dataset.webDescription);  // 零點程序員
console.log(mydiv.dataset.appid);  // 只能小寫，不能是appId

設置或刪除dataset的一個屬性就等同于設置或移除對應元素的data-屬(特)性，并且在將鍵值轉換為一個屬性的名稱時會使用相反的轉換；

// 判斷有沒有該屬性
if(mydiv.dataset.myname){
    console.log(mydiv.dataset.myname);
}
mydiv.dataset.subtitle = "wangwei";  // 修改
mydiv.dataset.imgurl = "images/1.jpg";  // 添加
mydiv.dataset.userName = "wangwei";  // 添加，被轉換為data-user-name
delete mydiv.dataset.subtitle;  // 刪除
遍歷DOMStringMap對象；
for(var k in mydiv.dataset){
    console.log(k + ":" + mydiv.dataset[k]);
}

與getAttribute()和setAttribute()相比：

在效率上，dataset沒有上述兩個方法高，但是，這個影響可以忽略不計；從操作上來看，雖然使用dataset不能提高代碼的性能，但是對于簡潔代碼，提高代碼的可讀性和可維護性是很有幫助的，如：

<div class="user" data-id="123" data-user-name="wangwei" data-sex="男" data-date-of-birth="1998/8/8"></div>
<div class="user" data-id="124" data-user-name="jingjing" data-sex="女" data-date-of-birth></div>
<div class="user" data-id="125" data-user-name="juanjuan" data-sex="女" data-date-of-birth="1995/5/5"></div>
<script>
var users = document.querySelectorAll(".user");
// 使用getAttribute()和setAttribute()
for(var i=0,len=users.length; i<len; i++){
    var user = users[i];
    var id = user.getAttribute("data-id");
    var username = user.getAttribute("data-user-name");
    var sex = user.getAttribute("data-sex");
    if(!user.getAttribute("data-date-of-birth"))
        // user.setAttribute("data-date-of-birth","2020-1-1");
    var dateofbirth = user.getAttribute("data-date-of-birth");
    console.log("ID:" + id + ",username:" + username + ",sex:" + sex + ",dateofbirth:" + dateofbirth);
}
// 使用dataset
for(var i=0,len=users.length; i<len; i++){
    var user = users[i];
    var id = user.dataset.id;
    var username = user.dataset.userName;
    var sex = user.dataset.sex;
    if(!user.dataset.dateOfBirth)
        user.dataset.dateOfBirth = "2020/1/1";
    var dateofbirth = user.dataset.dateOfBirth;
    console.log("ID:" + id + ",username:" + username + ",sex:" + sex + ",dateofbirth:" + dateofbirth);
}
</script>

另外，dataset屬性在IE中，只有IE11支持，所以在低版本的IE中，如果要使用dataset屬性，必須做兼容性處理；

if(mydiv.dataset){
    console.log(mydiv.dataset.subtitle);
    console.log(mydiv.dataset.webDescription);
}else{
    console.log(mydiv.getAttribute("data-subtitle"));
    console.log(mydiv.getAttribute("data-web-description"));
}
// 封裝一個函數
function getDataset(elt){
    if(elt.dataset)
        return elt.dataset;
    var attrs = elt.attributes,  // 元素的屬性集合
        dataset = {},   // 包裝的一個屬性集對象
        name,   // 要獲取的特性名
        matchStr;  // 匹配結果
    for(var i=0, len = attrs.length; i<len; i++){
        // 匹配data-自定義屬性
        matchStr = attrs[i].name.match(/^data-(.+)/);
        if(matchStr){
            // 轉成小駝峰
            name = matchStr[1].replace(/-([\da-z])/gi, function(all, letter){
                return letter.toUpperCase();
            });
            dataset[name] = attrs[i].value;
        }
    }
    return dataset;
}
var dataset = getDataset(mydiv);
console.log(dataset);

另外data-屬性并不是只在Javascript中使用，在CSS中應用的場景也很多，如：

<style>
p[data-font-size='2em']{font-size: 2em;}
p[data-font-size='3em']{font-size: 3em;}
</style>
<p data-font-size="3em">零點程序員</p>
<p data-font-size="2em">王唯</p>
// 又如
<style>
#mydiv::after{background-color: rgba(0,0,0,.2); content: attr(data-content);}
</style>
<div id="mydiv" data-content="王唯是好人">大師哥</div>

dataset應用的場景還是非常多的，一般來說，為了給元素添加一些不可見的數據，并要進行后續的處理，就可以用到自定義數據屬性；比如，配合CSS開發一些動畫效果，或在跟蹤鏈接等應用中，通過自定義數據屬性能方便地知道點擊來自頁面中的哪個部分；

<a href="https://www.zeronetwork.cn" data-title="零點網絡">零點網絡</a>
<script>
window.onload = function(){
    var aElts = document.querySelectorAll("a");
    for(var i=0,len=aElts.length; i<len; i++){
        aElts[i].addEventListener("click",function(e){
            e.preventDefault();
            doDataset(this);
        },false);
    }
    var aDataset = [];
    function doDataset(elt){
      var o = {title:elt.dataset.title, href:elt.href, page:location.pathname};
        aDataset.push(o);
        console.log(aDataset);
    }
}
</script>
// 小示例
<style>
.banner{
    background:url("images/2.jpg") no-repeat center; background-size:cover;
}
.fadeInDown{opacity: 0; transform: translateY(20px);}
</style>
<div class="banner"> 
    <h2 class="fadeInDown" data-duration=".8" data-delay="400">零點程序員</h2>
    <h3 class="fadeInDown" data-duration="1" data-delay="800">大師哥王唯</h3>
    <p class="fadeInDown" data-duration="1" data-delay="1000"><a href="#">更多</a></p>
</div>
<script>
window.onload = function(){
    var elts = document.getElementsByClassName("fadeInDown");
    // for(var i=0,len=elts.length; i<len; i++){
    //  (function(){
    //      var elt = elts[i];
    //      var dataset = elt.dataset;
    //      setTimeout(function(){
    //          elt.style.opacity = 1;
    //          elt.style.transform = "translateY(-20px)";
    //          elt.style.transition = "all " + dataset.duration + "s linear";
    //      }, dataset.delay);
    //  })();
    // }
    Array.prototype.forEach.call(elts, function(v,k){
        console.log(v);
        var dataset = v.dataset;
        setTimeout(function(){
            v.style.opacity = 1;
            v.style.transform = "translateY(-10px)";
            v.style.transition = "all " + dataset.duration + "s linear";
        }, dataset.delay);
    });
}
</script>

Web前端開發之Javascript

、盒模型

我們在上篇文章<html5前端開發之基礎篇>中已經對HTML有了基礎的了解，都說‘盒模型’非常神奇，但是很多朋友始終不能掌握其原理。此事無礙，且看此圖。

我們把這個盒子，類比成我們中秋節的時候包裝月餅的月餅盒子。
其中兩個月餅盒子之間的距離就是咱們要介紹的-->margin(外邊距).
而咱們每個月餅都要有最外層的包裝盒，
這個包裝盒的厚度，就是咱們的--> border(邊框).
那咱們的月餅不可能都是直接挨在一起的，對吧，
那每個月餅之間的間距，咱們就叫做--> padding(內邊距).
那咱們介紹了月餅盒，咱們的月餅總應該有吧。
對的，咱們月餅的寬度就是 --> width.
高度就是 --> height.
而咱們的月餅就叫做 --> element(元素).

“那我們的盒模型的距離又該怎么去計算呢?”看下圖

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。

增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。

如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素。

二、div標簽

上篇文章中我們學習了 HTML 的入門基礎，接下來我們該來一起學學最常用的標簽 div了。

什么是div呢?說白了，div 是一個塊級元素，在實際HTML文檔應用中一個塊通常是以<div>開頭，以</div>結束，<div>的出現也意味著它的內容自動地開始一個新行。此外，還可以對 <div> 元素應用 class 或 id 屬性。可以對同一個 <div>元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組(類似的元素，或者可以理解為某一類元素)，而 id 用于標識單獨的唯一的元素。

三、塊元素(block)

塊元素基本特征
塊元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
塊元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
塊元素可以設置margin和padding屬性。
塊元素支持所有的 CSS 樣式

塊元素基本可以劃分以下幾類：

div
無意義，主要是配合界面布局(雙標簽)
p
語義：段落(雙標簽)
h1~h6
定義一級標題至六級標題
注意
h1 權重非常高，一般一個頁面只有一個H1
h2 權重非常高，一般一個頁面不要超過10個，大型網站除外
h3 隨便用
都是雙標簽

但是需要注意一點，假如使用 p 標簽的時候，里面嵌套了 div 標簽，這樣會導致 p 標簽里面的樣式被分割掉，這點需要注意。

除此之外，塊元素還包括有序列表 ol，無序列表 ul ，以及列表dl，dt，dd。

注：所有的標簽全部有特定的樣式，我們可以通過 CSS 去清掉所有的樣式，建立屬于自己的 reset.css 文件。

/*margin的樣式初始化*/body,h1,h2,h3,h4,h5,h6,p,ol,ul { margin:0;

}/*padding的樣式初始化*/ol,ul { padding:0;

}/*列表點點的樣式初始化*/ul,ol { list-style: none;

}

四、內聯元素(inline)

內聯元素基本特征
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行
內容撐開寬度
inline元素設置width,height屬性無效。
inline元素不支持上下的margin和padding，只支持左右的margin和padding
代碼換行被解析

內聯元素中，有一個我們最常見的標簽，那就是超鏈接 a 標簽。它能從一個頁面中跳轉到另外一個界面，同時也可以在同一個頁面之中設置空間‘錨點’，實現特定位置的跳轉

注意：a 標簽中一定不能嵌套 a 標簽

a標簽的錨點設置方法：

可以通過設置 href = “# + 錨點名稱” 的方式進行跳轉，注意，一定要加 #

例如：

<!DOCTYPE html><html lang="en"><head>

<title>Document</title></head><body>

<p>asdnajsd</p>

<br>

標簽的初始化

下劃線的樣式初始化/*下劃線的樣式初始化*/a { text-decoration: none;

}/*字體樣式初始化*/em { font-style:normal;

}

五、內聯塊元素

內聯塊元素基本特性

1.支持所有css的樣式
2.除塊屬性的標簽以外，同屬性以及行屬性標簽排在一排
3.代碼換行被解析

內聯塊元素同時具有了塊元素可以設置寬度和高度的特點，同時又可以像內聯元素一樣，可以和其他行屬性標簽處于同一行。

雖然內聯塊元素能同時擁有塊元素和內聯元素的特性，但很多時候，在頁面中還是要使用不同標簽對應的特性。其次就是，內聯塊也并不是完美無缺的。因為設置內聯塊的時候，它的換行會被解析。

如下文所示：

從下圖可以看見，img 的邊上，并沒有 margin，但是實際展示的時候，會存在一條白的間隙。

而當我們把兩個 img 標簽連在一起寫的時候，就正常了，如第一個 img 和第二個 img。

具體解決方法會在下一篇文章中介紹

圖片標簽的初始化

img { border:none;

}

當然，你在網頁中看到塊元素，不一定就是塊元素，他有可能已經是一個內聯塊元素了。

display 可以對它原本的特性進行一個修改，可以讓原本是塊屬性的元素變成行屬性元素，同時內聯屬性也同樣可以轉化為塊屬性。

本文鏈接：http://hn.lanou3g.com/lozx/2890.html

在線咨詢

上一篇：基于Scrapy的京東商品評論爬蟲
下一篇：前端開發css_day02

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商