走進前端——HTML(2)

前言

作者:迷途の羊 
在這里分享學習自己的經歷,希望可以幫助到初學前端的旁友
成為一個更好的前端開發者
大學在讀前端菜雞  若文中有誤，感謝指正

DAY2 熟悉HTML

HTML常用標簽

• a超鏈接標簽
  超鏈接標簽是用來在當前頁面或是在不同頁面進行跳轉的標簽，使用方法也非常的簡單，下面進行展示：

<!--a標簽的兩種用法-->
	<a href="./tips.html">我將跳轉到href中的鏈接頁面</a>
    <a href="#div1">我將跳轉到當前頁面id為div1的位置</a>
    <a href="#div2">我將跳轉到當前頁面id為div2的位置</a>
    <a href="#div3">我將跳轉到當前頁面id為div3的位置</a>
    <a href="#div4">我將跳轉到當前頁面id為div4的位置</a>

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>

可見，當我們在a標簽中在href屬性里寫入一個鏈接時，我們點擊a標簽對應的文字即可跳轉到相應的html頁面；當我們在href中寫入錨點格式(#id.name)時，我們點擊該標簽后即可跳轉到該標簽內id.name對應的當前頁面的id.name的位置，(補充說明,div是一個塊級元素，是一個非語意化標簽)
a標簽應用的場景無處不在，譬如我們頁面中的導航欄點擊跳轉就是使用的a標簽包裹的，一些精美的button按鈕也是通過a標簽+其他標簽來實作的，

    <!--a標簽的常用情況-->
    <ul>
        <!--導航欄簡易演示版-->
        <li><a href="javascript:;">導航欄內容1</a></li>
        <li><a href="javascript:;">導航欄內容2</a></li>
        <li><a href="javascript:;">導航欄內容3</a></li>
    </ul>

    <!--按鈕簡易版-->
    <a  href="javascript:;"><div id="botton" style="border: 1px solid #ccc;width: 100px;height: 30px;line-height: 30px;border-radius: 15px; ">我是一個按鈕</div></a>

這里展示了a標簽常用的兩種方式，此外，此處a標簽內的href="javascript:;"為協議限定符，

• em 和 strong強調標簽
  em和strong標簽使用的方法很簡單，只用在標簽內套入需要的文字即可，此外，他們都是語意化標簽！

 <p>我是一段<em>普普通通</em>的<strong>段落文字</strong></p>

從上面的展示可以看出，em用于對字體加入傾斜的效果，strong用于對字體加粗顯示，

• label焦點標簽
  label標簽是用于給用戶更好的體驗，用于獲取焦點，其格式如下

<label>其他代碼塊</label>

當我們點擊label包裹住的任意位置時，我們就相當于點擊了整個代碼塊，可以給用戶更好的體驗，現在我們可以想一想，什么時候可以用到這個標簽呢？
這里舉出一種示例：

   <input type="checkbox">我是一個復選框1
    <br/>
   <label><input type="checkbox">我是一個復選框2</label>

這樣寫的好處究竟是什么呢？
——第一個復選框只有點擊input顯示的那個框才可以改變其checked的狀態，第二個復選框點擊文字也可以改變其checked的狀態(旁友們可以實操一下)，

• pre預格式標簽
  當我們需要寫一些格式比較清晰的內容塊時，同時這段內容的格式難以調整，我們便可以使用pre預格式標簽，在這個標簽內部的所有內容都會保留其代碼書寫時的格式，不會被調整，

    <pre>
        這是標題
            這是第一行
                這是第一行的子內容
            這是第二行
            這是第三行
        這是結尾
    </pre>

使用pre所產生的格式：

未使用pre產生的格式：

        這是標題
            這是第一行
                這是第一行的子內容
            這是第二行
            這是第三行
        這是結尾

兩者所顯示的內容天差地別，pre格式在展示代碼時有奇效~~

html常用知識

• HTML塊級元素及行內元素
  html中分為幾種型別的元素：塊級元素、行內元素以及行內塊級元素，
  塊級元素：塊級元素一個元素獨占一行，可以對該元素設定寬高，塊級元素可以設定margin和padding,塊級元素內部可以放塊級元素和行級元素，常見的塊級元素有下面幾種：

div , ul , li , dl , dt , dd , p , h1-h6 , tabel , form...

行內元素：行內元素只占據內容大小的寬高，一個元素不獨占一行，不可以對行內元素設定寬高，其margin和padding屬性僅水平方向可以使用，垂直方向無效，不能容納塊級元素，常見的行內元素有下面幾種：

a , span , b , select , lable , em , button 

行內塊級元素：行內塊級元素具有行內元素的特性，也具有塊級元素的特性，其一個元素不獨占一行，只占據自身內容的寬高大小，在此同時，也可以為自己設定寬高等，其margin和padding屬性也生效，

img , input , textarea

• HTML語意化
  在HTML中，部分元素被設為語意化元素，在此先列出部分HTML語意化元素：

h1~h6 , p , header , main , ul , ol , li , a , strong , em , small
footer , nav , article , section , aside , abbr

我們平時最常使用的div，span這些居然都是非語意化元素！那為什么我們要對語意化和非語意化作出區分呢？
語意化是有很大的好處的：
1、在CSS無法加載時純HTML頁面也能展現出很好的結構，
2、便于前端開發人員對頁面進行開發和維護，
3、便于搜索引擎SEO(爬蟲)，
4、便于用戶閱讀，提升用戶體驗，
5、便于一些設備決議(螢屏閱讀器、盲人閱讀器等)，可以通過語意化標簽來識別內容重點，
因此，在我們開發一個頁面時，我們要盡可能使用語意化標簽來書寫，避免大量使用div，span等此類無語意化標簽，當然也要視情況而定，

• 瀏覽器是如何渲染HTML的
  我們平時日常生活中每瀏覽一個頁面時都會發現URL發生了變化，瀏覽器呢就是通過決議URL來展示整個HTML頁面的，
  1、在輸入URL后瀏覽器會查找瀏覽器快取，如果快取中有該地址，則展示對應的頁面，若無該地址，則進行下一步操作，
  2、瀏覽器向DNS服務器發送域名決議請求，請求決議出該URL中對應的域名地址和IP地址，
  3、根據決議出的IP地址和默認的埠號80(HTTP)建立TCP連接，
  4、瀏覽器發起請求來讀取檔案，
  5、服務器對瀏覽器的請求做出相應，給瀏覽器回傳對應的HTML檔案，
  6、通過四次揮手釋放TCP連接，
  7、瀏覽器決議HTML并進行渲染(首先構造DOM樹，其次構造CSS規則樹，然后構建render樹，最后進行布局和繪制)，
  8、執行JavaScript代碼，

下期內容

CSS初步

**章末語**
前端容易入門，但是需要持續不斷的學習，更新自己的知識
千里之行，始于足下
喜歡文章的話可以動動小手點個贊和關注呀~~
長期更新......