2. 程式人生 > >【web複習】WEB開發技術基礎知識整理（1）

【web複習】WEB開發技術基礎知識整理（1）

阿新 • • 發佈：2019-01-21

WEB開發技術基礎知識整理（1）

第一部分——HTML

簡介

  • 全稱超文字標記語言，有一系列標籤組成，文件包含標籤以及文字內容。
  • 允許嵌入影象，物件，表單，結構化資訊；允許引入css，js影響網頁。
  • 網頁由瀏覽器讀取html並選安誠視覺化介面。

一般格式

  • H5一般宣告為<！DOCTYPE html>
<！DOCTYPE html><!--   宣告文件為h5         -->
<html><!--       描述文件     -->
<head><!--            -->
<meta
 
 charset="utf-8"><!--   宣告字符集元資料         -->
<title></title><!--  宣告文件標題          -->
</head>
<body>
html<!--     描述視覺化內容       -->
</body><!--            -->
</html>
  • 所有文件必須先宣告文件型別，統一編碼格式
  • 標籤格式：

    <標籤名稱> </標籤名稱>

元素與空元素

  • 元素：從開始標籤至結束標籤，包括開始標籤中宣告的屬性，以及標籤之間內容的，全部部分
  • <br/> ——換行
  • <hr/> ——分割線
  • 沒有描述內容的元素統一稱作空元素

###屬性

  • html元素提供的附加資訊，聲明於開始標籤。
  • 鍵值對形式出現：name=“value”
  • 不區分大小寫
  • 示例
<p title=“what?!”> <p>

標題

  • 自動在前後新增空行

註釋

<!--這是  註釋 -->

段落

  • 自動在段落前後新增空行
  • br換行
  • 忽略多餘空格和換行
  • pre元素保留換行和空格

製表符

&nbsp 空格
&lt &gt <>

連結

普通連結

<a href="www.baodi.com"
 
 >12345</a>

圖片連結：

<a href="www.baodi.com" >
<img src="1.gif">
</a>

書籤用法

<a id="1" href="www.baodi.com" >
<img src="1.gif">
</a>
<a  href="#1" >111</a>
  • 允許在不同介面

絕對路徑和相對路徑

  • 絕對路徑從協議開始。
  • 相對路徑不包含協議。
  • …/返回上一層目錄。
  • 預設為伺服器根目錄而非網站根目錄，通過base屬性宣告全域性相對目錄。

input元素

  • 預設為text
  • password為密碼
  • checkbox為多選
  • radio為單選，用name分組，checked表示選中
  • file表示上傳檔案，accept可以指定屬性
  • button無提交功能的按鈕
  • hidden 原始碼可見
  • date輸入日期
  • datetime-local日期和時間
  • number ，具有min，max，step屬性
  • textera 多行輸入

label

  • label元素不會呈現任何特殊效果，它為滑鼠使用者改進了可用性
  • 點選label 元素文字，瀏覽器會將焦點轉到和標籤相關的表單元素上。for 屬性指定關聯元素id屬性值，實現聯動操作
  • for屬性聯動checkbox

表格

  • th，tr，td
  • 先排滿行，再排列
  • th直接替換td就行
  • tr包含td

塊級元素和內聯元素

  • 塊級元素，始終在新行開始，儘可能的向左向右佔用全部可用寬度，div,h1,p,form,table等
  • div，塊級元素，元素本身無特殊意義，與CSS同時使用，用於對大的內容塊設定樣式屬性，通過定義多div，佈局整個文件結構，其他HTML元素的容器
  • 內聯元素，不以新行開始，只佔用所需寬度。span,a,img等。
  • span元素，內聯元素，元素本身無特殊意義，與 CSS 同時使用，用於為部分文字設定樣式屬性，用作文字的容器。

button

  • 分為button，submit，reset三種type

head

  • meta為元資料，元資料會被瀏覽器解析，通常用於指定網頁的字符集、描述、關鍵詞，作者等。

屬性和標籤大全

  • p 段落

    • 屬性： title——工具條提示

  • img 圖片

    • 屬性：alt無法顯示的時候顯示文字替代
    • style
      • width
      • height

  • h1-h6 標題（由大到小）

  • a 連結

  • table表格

    • tr行
    • th標題
    • td列
    • border屬性定義表格的邊寬
    • colspan定義跨列數
    • rowspan定義跨行數

  • ul 無序列表

    • style=“list-style-type：（disc，circle，square，none）”

  • ol有序列表（1，A，a，I，i）

  • dl自定義說明列表

    • dd註釋
    • dt內容

  • pre預格式文字，保留換行和空格

  • fieldset劃實線框

  • legend表示框名

  • select下拉選單，option表示各個選項，optgroup表示分組，屬性selected表示選中

  • button按鈕

  • datalist預定義列表

  • form表單

    • 屬性action，enctype，method

  • 文字格式：

    • b strong 加粗
    • em i 傾斜
    • small 小號
    • mark 標記
    • del 刪除線
    • ins 下劃線
    • sub 上標
    • sup 下標
    • abbr 縮寫定義
    • address 地址
    • bdo 文字方向
    • blockquote 長引用
    • q 短引用
    • cite 引證
    • kbd鍵盤輸入
    • samp 程式系統輸出
    • code 程式碼
    • var 變數

常見屬性：

  • readonly只讀
  • placeholder輸入提示
  • disabled不可操作
  • required 必須填寫
  • Data-*屬性，自定義資料屬性，允許在所有HTML元素中嵌入自定義的資料屬性，用於將資料儲存在頁面，可在JS中使用這些資料，從而創建出更具吸引力的使用者體驗
  • input hidden型別：可將值傳遞到伺服器
  • Data-*屬性：值僅儲存在前端，為JS提供服務

相關推薦

【web複習】WEB開發技術基礎知識整理（1）

WEB開發技術基礎知識整理（1） 第一部分——HTML 簡介 全稱超文字標記語言，有一系列標籤組成，文件包含標籤以及文字內容。 允許嵌入影象，物件，表單，結構化資訊；允許引入css，js影響網頁。 網

java基礎知識整理（1）

一、學習的前提          (1)目標要明確          (2)興趣是最好的老師    

【資料結構】基礎知識點整理（1）

1.線性是線性,順序是順序,線性是邏輯結構，順序是儲存結構，兩者不是一一個概念,線性是指一一個元素後繼只有唯一的一一個元素或節點，非線性是一一個元素後面可以有多個後繼或前繼節點,順序是指儲存結構連續，例如陣列是順序的,連結串列不是順序的,但他們都是線性的。當然順序也可以是非線

【計算機網路】第五章 資料鏈路層（1）

一．資料鏈路層服務 1. 概述 （1）術語 　　·主機和路由器：結點 　　·連線相鄰結點的通訊通道：鏈路（有線、無線、區域網） 　　·鏈路層資料分組：幀 （2）資料鏈路層主要任務：通過一條鏈路從一個結點向另一個物理鏈路直接相連的相鄰結點傳送資料報 2. 鏈路層服務 （1）組幀 　　·封裝資料

計算機軟體技術基礎的學習（1）：資料結構

本文為大三下學習《計算機軟體技術基礎》的知識點一、------------資料結構：研究非數值運算（資料元素之間的關係）的程式設計------------------------------------（1）線性表：            順序儲存和鏈式儲存         

【linux學習】建立虛擬機器並搭建叢集（1）

1.下載VMware Workstation 2.建立虛擬機器 其他都是預設操作，虛擬機器名字根據自己喜好。 記憶體根據電腦情況，我選擇1G的，如果自己記憶體小，可以選512M。 3.編輯虛擬機器設定 虛擬機器-設定，將CD/DVD連線設定為ISO映像檔案，我用

【實戰問題】-- 快取穿透之布隆過濾器（1）

前面我們提到，在防止快取穿透的情況（快取穿透是指，**快取和資料庫都沒有的資料**，被大量請求，比如訂單號不可能為`-1`，但是使用者請求了大量訂單號為`-1`的資料，由於資料不存在，快取就也不會存在該資料，所有的請求都會直接穿透到資料庫。）,我們可以考慮使用布隆過濾器，來過濾掉絕對不存於集合中的元素。

Java基礎知識整理（一）

顯式 sys 轉換 強制 print pri 字符 parse ger Java開發環境JDK(Java編輯器、Java運行工具（JRE作用）、Java文檔生成工具、Java打包工具) 1.Java是嚴格區分大小寫的。2.Java程序中一句連續的字符串不能分開在兩行書寫，

golong基礎知識總結（1）

import 調用 一個 需要 文件中 一個數 col 遍歷 print go語言結構 　　go語言的基礎組成：包聲明，引入包，函數，變量，語句和表達式，註釋 　　包聲明：一個文件夾下只能聲明一個包，否則就會報錯（即同一個文件夾下，可以有多個go文件，但這些文件聲明的包的名

基礎知識概念（1）：Socket 長連線和短連線的概念

1.短連線 連線->傳輸資料->關閉連線     HTTP是無狀態的，瀏覽器和伺服器每進行一次HTTP操作，就建立一次連線，但任務結束後就中斷連線。短連線是指SOCKET建立連線後 ，傳送後或接收完資料後，就馬上斷開連線。 2.長連線

Docker入門基礎學習整理（1）

Docker入門基礎學習整理 維基百科docker 基礎理論知識學習 維基百科docker 基礎理論知識學習 容器是一種基礎工具；泛指任何可以用於容納其他物品的工具，可以部分或完全封閉，被用於容納、儲存、運輸物品

JavaSE基礎知識總結（1）

注：在此僅彙總Java基礎部分對我來說比較新奇和重要的知識點，主要靠回憶，陸續再進行補充 JDK的安裝和環境變數 JDK的安裝版本建議選擇8，而不是最新的10和11，因為需要考慮到真實環境下多數

CCNA學習筆記 基礎知識回顧（1）

OSI參考模型：國際標準化組織（ISO）在1979年建立了一個分委員會來專門研究一種用於開放系統互連的體系結構（Open Systems Interconnection），簡稱OSI。  “開放”這個詞表示：只要遵循OSI標準，一個系統可以和位於世界上任何地方的、也遵循OSI標準的其他

java基礎知識整理（7）——繼承與抽象

一、繼承 1、概述          多個類中存在相同屬性和行為時，將這些相同的內容抽取到單獨一個類中，那麼多個類無需再定義這些屬性和行為，只要繼那個類即可。多個類可以稱為子類，單獨這個類稱為父類或者超類。子類可

儲存相關基礎知識總結（1）

儲存是雲端計算平臺管理的一種重要資源，儲存資源池是基礎架構資源池中的重要組成部分。軟體開發人員一般對儲存知識的瞭解非常有限，這對於深入理解雲端計算或做雲端計算平臺的研發是很大的障礙。本系列文章是我剛接觸雲端計算時整理的儲存相關基礎知識，並做了完善和豐富，內容不一

java初學者基礎知識積累---（1）深拷貝和淺拷貝

本人是新手，為了以後的厚積薄發，也為了把自己的一些學習經驗寫下來與需要的朋友們分享，今兒特地早起理理！   定義：     淺拷貝：只複製一個物件，物件內部存在的、指向其他物件的陣列或者引用則不復制。     深拷貝：物件、物件內部的引用都複製。     為了更好的理解它們

Ardupilot基礎知識儲備（1）毫米波雷達仿地模組(NRA24)

目錄 摘要 本文件主要記錄毫米波雷達仿地模組的作用，算一次知識點掃盲。不在做小白！ 簡介 1.毫米波雷達仿地模組是做什麼用的？ 測試地形高度用的，說白了，就是輔助定高

計算機網路基礎知識整理（一）

1 IP地址的四大型別？ IP地址根據網路號和主機號來分，分為A、B、C三類及特殊地址D、E。全0和全1的都保留不用。 A類：第一個位元組為網路號，後三個位元組為主機號。該類IP地址的最前面為”0”，地址範圍從1.0.0.0到126.0.0.0。預設網路掩碼

C++入門課程系列：基礎知識篇（1）

錯誤 輸出 控制 保時捷 基本類 blue val prim ets C++是一種靜態數據類型語言。 ? 在C++語言中，變量是計算機編程的一個重要概念，它是一個存儲值的字母或名稱? 有幾種基本類型的變量：string (“一組詞”)、chars(‘a’)、floats(1

【SQL】- 基礎知識梳理（四） - 存儲過程

var isp spl 更改 option fault 結果 特定 num 存儲過程的概念 存儲過程Procedure是一組為了完成特定功能的SQL語句集合，經編譯後存儲在數據庫中，用戶通過指定存儲過程的名稱並給出參數來執行 存儲過程的好處 A、 存儲過程允許標準組件式編