Head First HTML與CSS閱讀筆記（一）

時間 2019-11-18

標籤 head html css 閱讀筆記欄目 HTML 简体版

原文原文鏈接

以前寫過很多前端界面，可是沒有完整閱讀過一本HTML與CSS的書籍，都是用到什麼查什麼，最近閒暇之餘想鞏固加深一下前端基礎方面的知識，閱讀了《Head First HTML與CSS》，感受此書有點過於簡單了，但仍是學到了很多，這裏只記錄總結一些重要或本身以前並無太過注意的知識點。css

  1. 元素屬性的寫法：屬性名+等號（=）+用雙引號括起來的屬性值；

  2. HTML中簡短引用元素：<q>...</q>，瀏覽器會負責加上雙引號，<q>通常做爲現有段落的一部分，是內聯元素（inline），<blockquote>元素用於較長的引用，需單獨顯示，是塊元素（block）；

  3. 換行：<br>，沒有實際內容，是void元素，<img>也是void元素，除要編寫XHTML兼容的頁面，通常都不使用<br/>；

  4. <ol>有序列表，<ul>無序列表，<dl>爲定義列表，每一項都有一個定義術語<dt>和一個定義描述<dd>；

  5. 強調內容：<em>...</em>，特別強調<strong>；

  6. <code>顯示計算機程序代碼，<time>顯示日期或時間，<pre>使瀏覽器按輸入的方式原樣顯示文本；

  7. 建議<a>中的title屬性值與連接的Web頁面的<title>元素值相同，<a href="xxxx" title="所要連接的頁面的文本描述">xxxx</a>；

  8. <a>元素能夠帶一個id屬性，直接訪問頁面中的一個特定點，例如：
     <h2 id="chai">Chai</h2>
     <p>xxxx</p>
     能夠直接使用<a href="index.html#chai">See Chai Tea</a>，訪問到長文件中特定的位置；
     若是在一個長文檔中，頂部有一個元素id爲top，則在底部想要返回頂部，可使用：<a href="#top">Back to top</a>；

  9. 瀏覽器在一個新頁面打開連接：<a href="index.html" target="_blank">xxxx</a>；

  10. JPEG適合連續色調圖像，如照片，是一種「有損」格式，不支持透明度和動畫；PNG適合單色圖像和線條構成的圖像，如logo，剪貼畫和圖像中的小文本，是「無損」格式的，壓縮式不會丟掉信息，容許透明       ；
      GIF適合領域與PNG相似，「無損」格式，容許透明，支持動畫；

  11. <img>元素在圖片加載失敗時，可以使用alt屬性位訪問者提供提示，說明圖像中包含哪些信息，還能夠調整圖像大小，具體以下：
      <img src="http://www.baidu.com/test.png" alt="just for test." width="48" height="100">

  12. 把圖片做爲連接：
      <a href="html/test_png.html">
        <img src="img/test.png" alt="just for test.">
      </a>

  13. 相比於HTML 4.01，HTML5的doctype至關簡潔：<!doctype html>，指定字符編碼：<meta charset="utf-8">；

  14. W3C的HTML驗證工具：http://validator.w3.org，CSS驗證工具：http://jigsaw.w3.org/css-validator/；

  15. HTML編寫的一些原則：

必定要以<!doctype HTML>開頭；
在<head>中要包含正確的字符編碼<meta charset="UTF-8">；
<head>中要包含<title>元素，通常在<head>中只放<meta>，<title>，<style>，<link>元素；
不容許在<img>等void元素中嵌套其餘內聯元素；
<img>元素中src和alt屬性都不可少；

16. 在<head>中引入外部CSS文件，<link rel="stylesheet" href="css/test.css">，<link>是一個void元素，href屬性能夠是相對地址，也能夠是完整URL；html

17. 元素能夠加入多個類，各個類名之間用空格分隔，例如： <p class="greentea blueberry redheart">...</p>，若是元素屬於多個類，且多個類中CSS都設置了相同的屬性，則會選擇CSS文件中最後列出的那個規則；前端

18. CSS屬性：web

top,left分別控制元素頂部和左邊的位置；
text-align控制文本左對齊，居中或右對齊；
letter-spacing在字母之間設置間距；
list-style改變列表中列表項的外觀；
line-height設置文本元素中的行間距，如line-height: 1.6em；
background-image設置背景圖片；
p.classname選擇該類中的全部p元素；
p#idname選擇id爲idname的p元素；

19. font-family屬性定製頁面中使用的字體，共包括5個字體系列，sans-serif，serif，monospace，cursive，fantasy，其中最經常使用的仍是sans-serif（無襯線）和serif（有襯線）；瀏覽器

例如：工具

body {字體

font-family: Verdana, Geneva, Arial, "Couries New", sans-serif;動畫

}ui

可使用web字體向用戶瀏覽器提供字體，使用CSS中的@font-face屬性，例如：編碼

@font-face {

font-family: "Emblema One";

src: url("http://xxxxxxxxxx/xxx.woff"),

src: url("http://xxxxxxxxxx/xxx.ttf");

}

h1 {

font-family: "Emblema One", sans-serif;

}

FontSquirrel提供了Web字體託管服務；

20. font-size屬性控制字體大小，可使用像素px，百分數%（相對於父元素），em（相對父元素），關鍵字四種方式指定字體大小，例如：

body {

font-size: 14px;(150%, 1.2em, small)

}

關鍵字，主要使用small和medimu，通常可指定它做爲body規則中的字體大小，做爲頁面默認字體大小，再使用em或百分數相對於body字體大小指定其餘元素的字體大小；

21. font-weight改變字體粗細，通常使用bold和normal比較多，font-style爲文本增長斜體風格，italic（斜體）和oblique（傾斜文本）；

22. 有時界面上咱們不想讓連接有下劃線，可使用text-decoration: none;來去除下劃線，text-decoration的值能夠爲line-through（刪除線），underline（下劃線），overline（上劃線）和

none（無裝飾）；

23. CSS元素盒模型：每一個盒子由一個內容區、可選的內邊距（padding）、邊框（border）和外邊距（margin）組成；

24. background-image只是要設置一個元素的背景圖片，並非用來在頁面中放置圖像，例如：

.classname {

background-image: url(image/background.gif);

background-repeat: no-repeat; /*repeat：水平垂直重複平鋪，no-repeat：不重複，repeat-x：只在水平方向重複，repeat-y：只在垂直方向重複，inherit：繼承父元素*/

background-position: top left; /*top，left，right，bottom，center*/

}

25. CSS中順序很重要，後面設置的會將前面設置的覆蓋掉；

26. 邊框樣式：border-style，共有8種樣式，solid（實線），double（雙線），groove（槽線），outset（外凸），dotted（虛線），dashed（破折線），inset（內凹），ridge（脊線）；

邊框寬度：border-width，可以使用關鍵字（thin，medium，thick）和像素指定；

邊框顏色：border-color，值可爲rgb(100%, 0%, 0%)，#ff0000，red幾種形式；

邊框圓角：border-radius: 15px，只指定左上角有圓角：border-top-left-radius: 3em;

27. 類名和id名均可以包含字母、數字和下劃線，不能有空格，類名要以字母開頭，id名能夠以數字開頭；

28. <link>元素中可使用media屬性指定應用這個樣式表的設備類型，例如：

也能夠直接在CSS中指定，例如：

@media screen and (min-device-width: 481px) {

#guarantee {

margin-right: 30px;

}

@media規則中只包含特定於一種媒體類型的CSS規則；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。