前端知識點總結——HTML

HTML：HTML4.01 指的就是網頁技術
HTML5：HTML4.01的升級版本

1.web的基礎知識

web與Internet
1.Internet:全球性的計算機網際網路絡，因特網，網際網路，互動網。前端學習圈：767273102 ，從最基礎的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的專案實戰的資料都有整理

2.提供服務

訪問網站：www（world wide web）服務
Email:電子郵件服務
BBS：電子公告板，俗稱論壇
FTP：檔案的上傳下載
telenet:遠端登入

3.Internet上的應用程式

1.C/S程式
  C：Client客戶端
  S：Server伺服器端
  代表：QQ，微信，網路遊戲
2.B/S程式
  B：Browser 瀏覽器
  S：server 伺服器
  代表：網站

4.web

web:執行在Internet之上的一種B/S結構的應用程式，俗稱網站。
w3c:(全球資訊網聯盟)
w3c:制定web技術規範
web的工作原理：
   基於瀏覽器和伺服器還有通訊協議來實現資訊的傳輸和展示。
   1.通訊協議
     HTTP/HTTPS
 規範了資料是如何傳遞和打包
   2.伺服器
     1.功能
   1.儲存web資訊，並提供程式執行環境
   2.接收使用者請求並給出響應
   3.具備一定的安全功能
 2.伺服器產品
   1.TOMCAT 
   2.APACHE
   3.IIS
 3.伺服器技術
   1.php
   2.java
   3..NET
   3.瀏覽器
     功能：
      1.代理使用者（UA:user agent）提交請求
  2.以圖形化的方式顯示網頁
  3.作為HTML和JS的直譯器
 瀏覽器產品：
  1.IE
  2.chrome
  3.firefox 
  4.opera
  5.safari
 瀏覽器技術：
  1.HTML
  2.CSS
  3.Javascript

2.HTML快速入門

1.什麼是HTML？

HTML：Hyper Text Markup Language
      超文字標記語言
ex:
  普通文字 a：英文首字元
  超級文字 a：超連結
  普通文字 b：英文第二個字元
  超級文字 b：加粗
  language:語言，有自己的語法結構
特點：
  1.以.html或.htm為字尾
  2.由瀏覽器解析執行
  3.可以巢狀指令碼語言（javascript）
  4.用帶有尖括號的標記來標識

2.HTML的基礎語法

1.標記
  標記又稱為"元素"，或"標籤"，在網頁中，主要表示一些功能。
  標記在使用時，必須用<>括起來
  標記分類：
    1.封閉型別
  又稱為雙標記
  語法：
    <標記>內容</標記>
     ex：<a>百度</a>
     <b>加粗</b>
      注意：必須有開始就有結束。
2.非封閉型別
  又稱為單標記
  語法：<標記>或<標記/>
      ex:<img>或<img/>
         <br>或<br/>
2.標記巢狀
  1.什麼是巢狀？
    在一對標記中出現另外一對（個）標記，從而形成功能的層疊。
  2.語法
    <標記>
   <標記>
      <標記/>
   </標記>
</標記>
ex：
<a>
   <b>這是演示文字</b>
</a>
ex：
 <a><b>這是演示文字</b></a> 正確，不推薦
ex:
 <a><b>dfdsfsdfs</a></b> 錯誤
注意：
  1.換行縮排，如果是雙標記必須成對出現
3.元素（標記）屬性
  作用：修飾元素
  語法：
   1.必須宣告在開始標記中
     <標記 屬性名></標記>
   2.屬性名與值之間用"="連線
     <標記 屬性名=值></標記>
   3.元素允許有多個屬性，每個屬性之間用空格隔開
     <標記 屬性名1=值1 屬性名2=值2 ...></標記>
 ex:
 p標記的align屬性的值為center,title屬性的值為"這是段落"
     <p align=center title="這是段落"></p>
    標準屬性(通有屬性)：
  id:定義元素的唯一標識（名稱）
  title:定義滑鼠懸停在元素上時所提示的文字
  style:css中,定義行內樣式
  class:css中,引用類選擇器
   4.註釋
     語法：<!--註釋內容-->
 注意：
   1.註釋本身不能巢狀
   2.不能巢狀在標記中

3.HTML文件結構

1.HTML文件結構

1.文件型別宣告
  作用：告訴瀏覽器HTML的版本型別
  語法：<!doctype html>
  在網頁的最頂端編寫
2.HTML頁面
  在文件型別宣告的下面寫上一對根標記
  <html></html>
  在根標記中包含兩部分：
     檔案頭：<head></head>
         定義網頁的全域性資訊
 檔案主體：<body></body>
         定義網頁中顯示的內容
2.搭建網頁結構
  1.文件型別的宣告
  2.HTML頁面結構
    在主體內容（body）位置處顯示“我的第一個網頁”
3.head元素
  head是其它頭元素的容器
  1.<meta> 定義基本資訊:編碼格式，關鍵詞，描述內容等
    <meta charset="utf-8">
<meta name="keywords" content="關鍵詞">
<meta name="description" content="描述內容">
  2.<title></title> 定義網頁的標題
  3.<style></style> 定義內部樣式
  4.<script></script>定義或引用javascript檔案
  5.<link>          引入外部樣式
4.body元素
  顯示網頁的主要內容
  1.特殊字元
    &nbsp; 表示空格
&lt;   表示一個<
&gt;   表示一個>
&copy; 版權
    &yen;  ￥
  2.文字標記
    1.文字樣式
  <b></b>:加粗
  <i></i>:斜體
  <u></u>:下劃線
  <s></s>:刪除線
  <sup></sup>:上標
  <sub></sub>:下標
2.標題元素
  語法：在網頁中以醒目的方式來顯示文字
  語法：
    <hn>內容</hn> n:1-6
    <h1>內容</h1> 一級標題
      ...
    <h6>內容</h6> 六級標題
      特點：
    1.字型大小可變
    2.加粗
    3.上下文之間有垂直空白間距
   屬性：align
   作用：標記內容的水平對齊方式
   取值：left/center/right
3.段落元素
  作用：以突出的形式表示一段文字
  語法：<p></p>
  屬性：align
  取值：left/center/right
4.換行元素
  語法：<br>或<br/>
5.分隔線元素
  語法:<hr>或<hr/>
  屬性：
    1.size 表示水平線的尺寸（高度），取值為px或%的數字
    2.width 寬度，取值為px或%的數字
    3.align 水平對齊方式 left/center/right
    4.color 水平線的顏色，取值為合法顏色值
    6.預格式化
  作用：保留html程式碼中的回車和空格
  語法：<pre>內容</pre>
7.分割槽元素
  1.塊分割槽元素
    作用：用於頁面中元素的佈局
    語法：<div></div>
  2.行分割槽元素
    作用：處理同一行文字中的不同樣式
    語法：<span></span>
8.行內元素和塊級元素
  1.塊級元素
    在網頁頁中獨佔一行的元素就是塊級元素
    常見的塊級元素：
       1.標題元素 h1-h6
       2.段落元素 p
       3.div
       4.結構標記(header...)
  2.行內元素
    多個元素位於同一行顯示，從左往右排列
    常見的行內:
       span,b,i,u,s,sup,sub,a,img
  3.行內塊
    顯示方式如同行內元素，但具備塊級元素的特徵
  4.table ...

4.影像和連結

1.URL

1.目錄結構
  檔案目錄：資料夾巢狀結構
2.URL
  URL:Uniform Resource Locator統一資源定位器，俗稱路徑。
  作用：用於表示網路中任意一個資源的位置。
3.路徑的表現形式
  1.絕對路徑
    絕對路徑就是完整路徑，一定可以找到你想找的資源。
1.網路資源
      通訊協議+伺服器主機+檔案目錄結構+檔名稱
  ex:
2.本地資源
  從最高磁碟機代號處開始查詢
  C:\xampp\htdocs\1801-02\01-HTML\Day02\day.txt
  2.相對路徑
     1.什麼是相對路徑
   從當前檔案所在的位置處開始查詢資原始檔所經過的路徑，就是相對路徑。
       1.同級目錄
     直接引用 
     ex:Koala.jpg
   2.子級目錄
     先進入，再引用 
     ex:img/Koala2.jpg
   3.父級目錄
     先返回，再引用
     ex:../Koala1.jpg
  3.根相對路徑
    從伺服器所在的根目錄位置處開始查詢
表現：/
/codeboy/img/logo.png

5.影像

1.影像格式
  1.jpg 壓縮比率較大
  2.png 背景透明
  3.gif 動圖
2.影像標記
  標記：<img>或<img/>
  屬性：
     1.src 源，要顯示的影像的url
 2.width 寬度，取值以px或%為單位的數字
 3.height 高度，取值以px或%為單位的數字
 4.alt 圖片出錯時顯示的提示文字

6.連結

1.語法
  <a>內容</a>
2.屬性
  1.href 連結的url
  2.target 目標，指定開啟網頁的方式
    取值：
   _blank 在新的標籤頁中開啟
   _self 預設值，在當前頁面中開啟新的網頁
 2.給一張圖片設定超級連結，開啟Tmooc網站（）
3.其它表現形式
  1.資源下載
    讓連結的URL，連結到rar/zip檔案即可
    href="*.zip/*.rar"
  2.電子郵件連結
    href="mailto:合法的郵箱地址"
  3.返回頁面的頂部
    href="#"
  4.連結到javascript
    href="javascript:js指令碼"

7.錨點

  1.什麼是錨點？
    就是網頁中的一個記號，可以透過超級連線調整到記號的位置處。
  2.使用錨點
    1.定義錨點
  1.使用a標記的name屬性定義錨點
    <a name="錨點名稱"></a>
  2.使用任意標記的id屬性定義錨點
    <ANY id="錨點名稱"></ANY>
2.連結到錨點
  <a href="#錨點名稱"></a>
  <a href="url#錨點名稱"></a>

8.表格

1.表格的語法

1.表格
  <table></table>
2.行
  <tr></tr> --->table row
3.單元格/列
  <td></td> --->table data

2.表格的屬性

1.table屬性
  width:寬度
  height:高度
  border:設定表格邊框
  align:設定表格的水平對齊方式 
        取值：left/center/right
  cellpadding:設定單元格的內邊距（內容與td之間的間距）
  cellspacing:設定單元格的外邊距（td邊框外的距離）
  bgcolor:背景顏色
2.tr屬性
  align 設定當前行的水平對齊方式
        取值：left/center/right
  valign 設定當前行的垂直對齊方式
        取值：top/middle/bottom
  bgcolor 設定當前行的背景顏色
3.td屬性
  width:寬度
  height:高度
  align:水平對齊
  valign:垂直對齊
  bgcolor:列的背景顏色
  colspan:跨列
  rowspan:跨行

3.可選標記

1.表格標題
  標記：<caption></caption>
        如果設定表格標題，則必須位於<table>下的第一個子元素位置處
2.行/列標題
  標記：<th></th>
  所有的td都可以用<th>取代

4.表格複雜應用

可以將連續的幾個行，劃分到一組中，進行統一管理。
1.行分組
  1.表頭行
    <thead></thead>
表格中最上面的一行進行分組的話，可以放在表頭行中
  2.表主體行
    <tbody></tbody>
允許將若干行放在tbody中進行統一管理
  3.表尾行
    <tfoot></tfoot>
表格中最後一行進行分組的話，可以放在表尾行中
2.不規則表格
  1.跨行
    rowspan
從指定單元格的位置處開始，縱向向下合併幾個單元格（包含自己），被合併的單元格要刪除。
  2.跨列
    colspan
從指定單元格的位置處開始，橫向向右合併幾個單元格（包含自己），被合併的單元格要刪除。

9.列表

1.列表的作用

按照從上到下(從左往右)的方式來顯示所有的資料，並且可以在資料前增加顯示的標識。

2.列表的組成

列表都是由"列表型別"和"列表項"來組成
1.列表型別
  有序列表：<ol></ol> order list
  無序列表：<ul></ul> unorder list
2.列表項
  用於表示列表中的資料(巢狀在列表中)
  <li></li> list item
3.有序列表
  1.type 作用：指定列表的排序型別
         取值：
        1 預設值，以數字排序
    a 小寫字母 
    A 大寫字母
    i 小寫羅馬數字
    I 大寫羅馬數字
  2.start 作用：指定起始編號是從第 幾 開始
          取值：數字

4.無序列表

 1.type 作用：指定列表的標識型別
        取值：
        disc:實心圓
    circle:空心圓
    square:實心方塊
    none:不顯示標識

5.列表巢狀

 在一個列表中又出現另一個列表
 被巢狀的列表只能出現在li中
 ex:
   <ol>
     <li>
   這是有序列表內容
   <ul>
     <li>內容</li>
   </ul>
 </li>
   </ol>

10.定義列表

1.什麼是定義列表
  定義列表常用於給出一類事物或對名詞的解釋說明等。
2.語法
  1.<dl></dl> 表示一個定義列表
  2.<dt></dt> 表示定義列表中要解釋說明的名詞
  3.<dd></dd> 表示定義列表中對名詞解釋的內容
  ex:
    <dl>
   <dt>名詞</dt>
   <dd>解釋具體內容</dd>
</dl>
  使用場合：圖文混排時使用

11.結構標記

1.結構的作用

用於描述整個網頁的結構（取代div做佈局）
提升標記的語義性

2.常用的結構標記

1.<header></header>
  作用：定義網頁或某區域的頭部
2.<nav></nav> 
  作用：定義網頁的導航連結
3.<section></section>
  作用：主體內容
4.<aside></aside>
  作用：定義頁面中的側邊欄資訊，靠近邊緣。
5.<footer></footer>
  作用：定義網頁偏底部資訊，比如：網站的備案號，解釋說明，版權。
6.<article></article>
  作用：定義與文字描述相關的內容，比如：論壇帖子，微博條目，使用者評論等

12.表單（重點&難點）

1.表單的作用

1.提供可以與使用者互動的視覺化介面
2.收集使用者資訊並提交給伺服器

2.表單的組成部分

1.前端部分 
  表單控制元件，與使用者互動的視覺化控制元件
2.伺服器端部分
  對提交的資料的處理,***.php

3.表單標記

<form></form>
屬性：
  1.action 
    作用：定義表單提交時發生的動作，通常定義的是伺服器上處理程式的url地址，
ex:action="login.php"
  2.method
    作用：指定表單資料的提交方式
取值：
    1.get(預設值)
      1.明文提交，待提交的資料會顯示在位址列中
      2.安全性較低
      3.提交資料有大小限制，限制為2KB
      4.向伺服器要資料時，使用get方式
    2.post
      1.隱式提交，提交的資料不會顯示
      2.安全性較高
      3.提交資料大小無限制
      4.要傳遞資料給伺服器時，使用post方式
    3.delete
    4.put
  3.enctype  
    作用：指定表單資料的編碼方式，允許將什麼樣的資料提交給伺服器
1.application/x-www-form-urlencoded
  預設值，允許將任意字元提交給伺服器（檔案無法提交）
2.multipart/form-data
  允許將檔案提交給伺服器
3.text/plain
  只能將普通字元提交給伺服器

4.表單控制元件

能夠與使用者進行互動的視覺化元素
1.分類：
  1.input元素
  2.textarea多行文字域元素
  3.select和option 選項框元素
  4.其它元素
2.input元素
  1.作用：在頁面中提供各種各樣的輸入控制元件，如：文字框，密碼框，單選按鈕，核取方塊等。
  2.語法
    標記：<input>或<input/>
屬性：
   1.type 指定建立輸入控制元件的型別
   2.name 為控制元件定義名稱，提交給伺服器端使用（必須）
   3.value 控制元件的值，提交給伺服器端使用
       4.disabled 禁用控制元件，不能操作並不能提交給伺服器使用
     該屬性無值，只要出現在標記中，就是禁用。
  3.input元素詳解
    1.文字框和密碼框
  文字框：<input type="text">
  密碼框：<input type="password">
  屬性：
    1.maxlength 指定限制輸入的字元數
    2.readonly 只讀，只能看，不能改，但允許提交。
    3.placeholder 佔位符，即預設顯示在控制元件上的文字。

13.按鈕

  1.提交按鈕
    type="submit"
    作用：將表單的資料提交給伺服器上指定的程式
  2.重置按鈕
    type="reset"
    作用：將表單的內容恢復到初始化的狀態
  3.普通按鈕
    type="button"
    沒有功能
  屬性：
    value:顯示在按鈕上的文字
    3.單選按鈕和核取方塊
  單選按鈕：type="radio"
  核取方塊：type="checkbox"
  屬性：
    name 除定義控制元件名稱之外，還能起到分組的作用
    checked 設定預設選中項，無值屬性
    4.隱藏域和檔案選擇框
  1.隱藏域
    type="hidden"
    想要提交給伺服器，但不想展示給使用者的資料可以放在隱藏域中。
  2.檔案選擇框
    type="file"
        注意：
      1.method的值必須為post
      2.enctype的值必須為multipart/form-data
3.textarea元素
  1.作用
    允許錄入多行文字
  2.語法
    標記：<textarea></textarea>
屬性：
   1.name 定義控制元件名稱，提供給伺服器使用
   2.readonly 只讀
   3.cols 指定文字域的列數，即一行能顯示多少個英文字元（中文減半）
   4.rows 指定文字域的行數，即預設顯示多少行的資料，超出rows的話會出現捲軸。

14.選項框

  1.語法
    1.<select></select> 
作用：在頁面中表示一個選項框
    2.<option></option>
作用：顯示選項框中的內容項
  2.屬性
    1.select屬性
  1.name 定義選項框的名稱
  2.size 定義顯示選項的數量，預設值為1
  3.multiple 設定多選，無值的屬性
    注意：只有滾動列表支援多選
2.option屬性
  1.value 定義選項的值
  2.selected 設定預設選中項，無值屬性
5.其它元素
  1.label元素
    作用：關聯文字域表單控制元件
語法：<label></label>
屬性：for 要與表單控制元件關聯的id值
  2.為控制元件分組
    <fieldset></fieldset>為控制元件定義分組
<legend></legend>為分組指定標題
  3.浮動框架
    作用：允許在一個網頁中，再引入另外一個網頁。
語法：<iframe></iframe>
屬性：
    1.src 要引入頁面的url路徑
    2.width 寬度
    3.height 高度
    4.frameborder 浮動框架的邊框，預設值1

15.單位轉換

1px=0.025rem;

前端知識點總結——HTML

前端知識點總結——HTML

1.web的基礎知識

2.HTML快速入門

3.HTML文件結構

4.影像和連結

5.影像

6.連結

7.錨點

8.表格

9.列表

10.定義列表

11.結構標記

12.表單（重點&難點）

13.按鈕

14.選項框

15.單位轉換

相關文章