1. 程式人生 > >前端HTML與CSS學習筆記總結篇(超詳細)

前端HTML與CSS學習筆記總結篇(超詳細)

第一部分 HTML

第一章 職業規劃和前景

  • 職業方向規劃定位:

    • web前端開發工程師
    • web網站架構師
    • 自己創業
    • 轉崗管理或其他
  • web前端開發的前景展望:

    • 未來IT行業企業需求最多的人才
    • 結合最新的html5搶佔移動端的市場
    • 自己創業做老闆
    • 隨著網際網路的普及web開發成為企業的寵兒和核心
  • web職業發展目標:

    • 第一、梳理知識架構

      • 負責內容的HTML
      • 負責外觀的css(層疊樣式表)
      • 負責行為的js
      • ps切圖
    • 第二、分解目標(起步階段、提升階段、成型階段)

      • 起步階段:

        • 基本知識的掌握
        • 常用工具的掌握
        • 溝通技巧的掌握(圍繞客戶的需求)
        • 良好的開發習慣(加註釋、對齊方式)
      • 提升階段:

        • 熟悉掌握HTML基本標籤和屬性
        • 熟練掌握css的基本語法和使用
        • 瀏覽器相容和w3c標準的掌握
        • 結合html+css+js開始系統專案的開發
      • 成型階段:

        • 精通DIV+CCS佈局
        • 精通css樣式表控制html標籤
        • 熟悉運用js製作動態網站的效果
        • 能獨立開發完成網站

第二章 html基本結構

  • 認識HTML:

    • html不是一種程式語言,是一種標誌語言
    • 標記語言是由一套標識標籤組成的
    • html使用標籤來描述網頁
  • html結構:

1234
<html>    <head></head>    <body></body></html>
  • 不成對出現的標籤
    <br> <hr> <meta> <img> <input..> <option..> <link>
  • HTML 基本標籤的講解:

    • <html> <head> <body>標籤
    • <h1>—-<h6>僅僅用於標題文字,不要為了產生粗體文字使用它們
    • <p>標籤 段落標籤
    • <strong><b>標籤

    • 都會讓文字產生加粗效果

      • <strong>用於強調文字,強度更深,表示重要文字—>用於SEO優化
      • <b>只是視覺加粗效果—>單純為了產生加粗
    • <em> <i>標籤
      • em用於強調文字
      • i只是視覺斜體效果
      • <strong><em>強調更強
    • 特殊符號:
      • &nbsp; —->空格
      • &gt; —>大於號
      • &lt;—>小於號
      • &quot;—>引號
      • &copy;–>版權號

第三章 html基本標籤

  • HTMl基本標籤:

    • span標籤
      • 對被用來組合文件中的行內元素
      • 注意:span沒有固定的格式表現,當對它應用樣式時,才會產生視覺上的變化
    • <pre>標籤
      • 文字的格式按原始碼的排版來顯示,我們稱之為預處理格式
    • <a>標籤—>他有一個必不可少的屬性 href

      • target屬性:
      • _self(在原來頁面開啟)
      • _blank(新視窗開啟)
      • _top(開啟時忽略所有的框架)
      • _parent(在父視窗中開啟)
    • 建立錨點和錨鏈接

      • 錨點也是一種超連結,是頁面內進行跳轉的超連結
        • 第一步:建立錨點 <a name="錨點名稱"></a>
        • 第二步:使用建立好的錨點名稱 <a href="#錨點名稱">內容</a>
    • marquee標籤
      • 可以建立一個內容滾動效果
1
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
  • direction 表示滾動方向,取值有(left,right,up,down,預設left)
  • loop表示滾動迴圈的次數,預設為無限迴圈
1
onmouseover=this.stop()  onmouseover=this.start()  scrollamout="1"(滾動速度)
  • 表示當滑鼠移上區域的時候停止滾動,滑鼠移開繼續滾動

第四章 img圖片標籤與路徑

  • 圖片標籤與路徑:

    • 常見圖片格式 jpg png gif
    • Gif (只支援全透明)
    • Jpeg /jpg
    • Png 半/全透明都支援
  • 圖片標籤寫法 :

    • <img src="" alt="" width="" height="" />
  • 圖片四要素:

    • src="" 圖片路徑
    • alt="" 圖片含義
    • width="" 圖片寬度 和圖片大小保持一致
    • height="" 圖片高度 和圖片大小保持一致
    • title=""
  • 路徑知識:

    • 相對路徑、絕對路徑:

      • 相對路徑:(Relative Path) 相對於該檔案的路徑;
      • 絕對路徑:(Absolute Path) 從磁碟出發的路徑;
    • <img src="" …… align="" /> align屬性–設定圖片與後面文字的位置關係
      值–topbottommiddleabsmiddleleftright

  • 在靜態頁面中:

    • /開頭表示根目錄;

    • ./表示當前目錄;(斜畫線前面一個點)

    • ../上級目錄;(斜畫線前面兩個點)

    • 直接用檔名不帶/也表示同一目錄

    • 這些都是相對於當前檔案的位置來說的,如果用絕對路徑的話就是寫全了。

第五章 三種列表的講解

  • 三種列表的知識講解:
    • <ul>無序列表
      • 無序列表是一個沒有順序專案的列表,此列表項預設粗體圓點進行標識
12345
<ul>   <li></li>   <li></li>   <li></li></ul>
    1. 有序列表
    • 有序列表也是一列專案,只是列表專案使用的是數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li>標籤。
12345
<ol>   <li>內容一</li>   <li>內容二</li>   <li>內容三</li></ol>
  • 列表符號

    • 無序列表-列表符號:

      • type="circle" 空心圓 type=“disc” 實心圓 預設值 type="square" 方塊符
    • 有序列表-列表符號

      • type="A" A B C D
      • type="a" a b c d
      • type="1" 1 2 3 4 預設值type=”I” I II III type=”i” i ii iii
    • 列表巢狀

    • 無序列表-巢狀