前端知識點總結——HTML

時間 2019-11-07

標籤前端知識總結 html 欄目 HTML 简体版

原文原文鏈接

前端知識點總結——HTML

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

1.web的基礎知識

web與Internet
1.Internet:全球性的計算機互聯網絡，因特網，互聯網，交互網
2.提供服務php

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

3.Internet上的應用程序css

1.C/S程序
  C：Client客戶端
  S：Server服務器端
  表明：QQ，微信，網絡遊戲
2.B/S程序
  B：Browser 瀏覽器
  S：server 服務器
  表明：網站

4.webhtml

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的基礎語法java

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文檔結構web

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.URLchrome

1.目錄結構
  文件目錄：文件夾嵌套結構
2.URL
  URL:Uniform Resource Locator統一資源定位器，俗稱路徑。
  做用：用於表示網絡中任意一個資源的位置。
3.路徑的表現形式
  1.絕對路徑
    絕對路徑就是完整路徑，必定能夠找到你想找的資源。
1.網絡資源
      通訊協議+服務器主機+文件目錄結構+文件名稱
  ex:http://www.jd.com/index/logo.png
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網站（www.tmooc.cn）
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