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結構：

<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標籤
  • 可以建立一個內容滾動效果

• direction 表示滾動方向，取值有（left,right,up,down,預設left）
• loop表示滾動迴圈的次數，預設為無限迴圈

  onmouseover=this.stop()  onmouseover=this.start()  scrollamout="1"(捲動速度)

• 表示當滑鼠移上地區的時候停止滾動，滑鼠移開繼續滾動

第四章 img圖片標籤與路徑 

• 圖片標籤與路徑：

  • 常見圖片格式 jpg png gif
  • Gif （只支援全透明）
  • Jpeg /jpg
  • Png 半/全透明都支援

• 圖片標籤寫法 ：

  • <img src="" width="" height="" />

• 圖片四要素：

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

• 路徑知識：

  • 相對路徑、絕對路徑：

    • 相對路徑：(Relative Path) 相對於該檔案的路徑；
    • 絕對路徑：(Absolute Path) 從磁碟出發的路徑；

  • <img src="" …… align="" /> align屬性--設定圖片與後面文字的位置關係
    值--top、bottom、middle、absmiddle、left、right

• 在靜態頁面中：

  • /開頭表示根目錄；

  • ./表示目前的目錄；（斜畫線前面一個點）

  • ../上級目錄；（斜畫線前面兩個點）

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

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

第五章 三種列表的講解三種列表的知識講解：

• <ul>無序列表
  • 無序列表是一個沒有順序項目的列表，此清單項目預設粗體圓點進行標識

      

•  有序列表                 有序列表也是一列項目，只是清單項目使用的是數字進行標記。 有序列表始於 <ol> 標籤。每個清單項目始於 <li>標籤。

列表符號

• 無序列表-列表符號:

  • 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

• 列表嵌套

• 無序列表-嵌套

• 有序列表-嵌套

• 定義列表

    定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以 <dl> 標籤開始。每個定義清單項目以 <dt>開始。每個自訂欄表項的定義以 <dd> 開始。

dd是對dt的解釋

• < dl>< /dl>用來建立一個普通的列表,
• < dt>< /dt>用來建立列表中的上層項目，
• < dd>< /dd>用來建立列表中最下層項目，
• < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。

• dl是definition list的縮寫
• dt是definition title的縮寫
• dd是definition description的縮寫

• list-style屬性具有三個屬性分量：
• list-style-position ：設定清單項目表徵圖的位置，位於文本內或者文本外
• list-style-type： 設定清單項目表徵圖的類型
• list-style-image：使用映像設定清單項目表徵圖

第六章 表單元素(上) 

表單標籤:

• <form>表單標籤

  • <form>表單是一個包含表單元素的地區，包括起來的都是表單的內容

 

HTML標籤 - Action和確認按鈕：

• 當使用者單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔案名稱。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。

• HTML標籤 - 隱藏欄位隱藏標籤：

• 隱藏欄位在頁面中對於使用者是不可見的，在表單中插入隱藏欄位的目的在於收集或發送資訊，以利於被處理表單的程式所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏欄位的資訊也被一起發送到伺服器

 

• <input>標籤的掌握

  • 常用type類型：

    • <input type="" name="" value="" />
    • type="text" 單行文本輸入框
    • type="password" 密碼（maxlength=""）
    • type="radio" 單項選擇（checked="checked"）
    • type="checkbox" 多項選擇
    • type="button" 按鈕
    • type="submit" 提交 type="image"圖片提交
    • type="file" 上傳檔案
    • type="reset"重設
    • type="hidden" 隱藏

• 關於表單中的設定預設值：

• textarea沒有預設值

• <label>標籤的使用

  • <label></label>

    • label 元素不會向使用者呈現任何特殊效果。
    • 不過，它為滑鼠使用者改進了可用性。
    • 如果您在 label 元素內點擊文本，就會觸發此控制項。
    • 就是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。

  • <label> 標籤的for 屬性應當與相關元素的 id屬性相同。

  • 例子：（重要---註冊表單--使用者體驗--必做）

第七章 表單和表格(下)

• 表單和表格標籤：
  • <textarea>文本域標籤
  • <textarea>標籤：
  • <textarea></textarea>是文本域標籤，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols

• 注意：

  • rows表示這個文本域有多少行
  • cols表示這個文本域有多少列

• 除了這兩個屬性它還有readonly（唯讀，文本域的內容無法改變，相當於協議）和title（滑鼠放上提示）

• <select>標籤的掌握

  • 註：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單資料提交給伺服器時包括 name屬性

• 常用到的屬性：disabled=“disabled” name="sel" size="2"

• <table>表格標籤

• <table>表格標籤：<table>是表格標籤，可以用它定義一個表格。

• 注意：<table>的border屬性不能少

• <tr><td>標籤的使用

  • <tr>列標籤：

    • <tr>可以定義表格中的一行，一個<tr></tr>表示一行。

<td>儲存格標籤:

• <td>可以定義表格中的一個儲存格，<td></td>表示一個儲存格。

• border-collapse 屬性設定是否將表格邊框摺疊為單一邊框：
• border-collapse:collapse;
• colspan左右合并
• rowspan上下合并

第一部分總結：

• 非可視化標籤：head meta style scrpit...
• 可視化標籤：img div span a ul li...
• 只有可視化標籤，才能用css改變它
• 單標籤：meta link base img input br hr

• 雙標籤：html head body div a p span ..ul li ol dl ....

• 常用可視化標籤

  • div
    • 一般用它來布局
  • a 超連結標籤
    • href*屬性：設定跳轉的網頁地址
    • target屬性：設定跳轉的目標
    • 結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標籤
  • img
    • src*屬性用來設定圖片的url資料
    • alt提供給搜尋引擎搜尋的
    • width
    • height
    • 結論 ：顯示圖片
  • ul li
    • 列表
    • 結論：只要將來設計頁面中有固定樣式的列表，就用ul和li
  • table caption tr td (th)
    • 慢慢已經被淘汰了 被ul li代替
    • 如果是合并豎排的就是合并行（rowspan）
    • 如果是合并橫排的就是合并列（colspan）

 

HTML部分導圖總結

• HTML5標籤集合

 

 

 

文／poetries（簡書作者）
原文連結：http://www.jianshu.com/p/8ebebb84b1c1
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。

 

 

HTML+CSS學習筆記總結篇【精心收藏】