Web前端：HTML~CSS~JS

時間 2019-11-16

標籤 web 前端 html css 欄目 HTML 简体版

原文原文鏈接

網頁主要由3部分組成：結構、表現、行爲。目前網頁的新標準是W3C，模式是HTML、CSS、JavaScript，這是前端開發最核心的3個技術。前2個技術的最新版本分別爲HTML五、CSS3。javascript

「HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行爲」

Ajaxcss

異步JavaScript和XML，Asynchronous Javascript And XML，一種建立交互式網頁應用的網頁開發技術。經過在後臺與服務器進行少許數據交換，Ajax可使網頁實現異步更新，即在不從新加載(刷新)整個網頁的狀況下，僅更新網頁的某部分。
Ajax是先後端交互的技術，主要實如今前端。html

SEO
搜索引擎優化，Search Engine Optimization，專門利用搜索引擎的搜索規則使網站在搜索結果的前面，提升訪問量。前端

HTML

超文本標記語言，Hyper Text Markup Language，爲「網頁建立和其它可在網頁瀏覽器中看到的信息」設計的一門描述性標記語言，超級文本標記語言是萬維網(Web)編程的基礎。HTML 使用標記標籤(HTML 標籤，HTML tag)來描述網頁。
java

頭Head部分：提供關於網頁的(公共)信息。<head>元素是全部頭部元素的容器，包含腳本、指示瀏覽器在何處能夠找到樣式表、提供元數據(metadata)信息等，<title>、<base>、<link>、<meta>、<script> 以及 <style>能夠添加到 head 部分。

主體Body部分：提供網頁的具體內容；

<html> 與 </html> 描述網頁，定義HTML文檔 
<body> 與 </body> 可見的頁面內容，文檔主體 
<h1> 與 </h1> 顯示標題，有h1-h6 
<p> 與 </p> 顯示段落

簡單易擴展：版本升級採用超集方式；
平臺無關性：網絡的通用語言；

樣式
根據樣式表對文檔進行格式化，插入樣式表的3種方法：
a. 外部樣式表：一表多用，經過更改一個文件來改變整個站點(多個頁面)的外觀。　css3

<head>
　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

b. 內部樣式表：針對單個文件(頁面)須要特別的樣式。git

<head>
　<style type="text/css">
　　body {background-color: green}
　　p {margin-left: 20px}
　</style>
</head>

c. 內聯樣式：特殊的樣式須要應用到個別元素，在相關的標籤中使用樣式屬性。　github

<p style="color:blue; margin-left:20px">This is a Paragraph.</p>

URL - 統一資源定位器編程

Uniform Resource Locator，URL 不能包含空格，用+代替，遵循如下語法規則：後端

<a href="scheme://host.domain:port/path/filename">自定義文本</a>

scheme：定義因特網服務的類型，最多見的類型是 http
host：定義域主機（http 的默認主機是 www）
domain:port：定義因特網域名和主機上的端口號（http 的默認端口號是 80）
path：定義服務器上的路徑（若是省略則文檔必須位於網站的根目錄中）
filename：定義文檔/資源的名稱

XHTML

可擴展超文本標籤語言（EXtensible HyperText Markup Language），XML+HTML，XML 描述數據，HTML 顯示數據。與 HTML 4.01 幾乎相同，是一個 W3C 標準，XHTML 是更嚴格更純淨的 HTML 版本，目標是取代 HTML，是做爲一種 XML 應用被從新定義的 HTML。

元素必須被關閉且要正確嵌套；　　
XHTML 文檔必須擁有根元素，嵌套於<html> 根元素中，<html> 標籤內的 xmlns 屬性是默認必需的；　
屬性不能簡寫，屬性名稱(標籤)必須小寫，屬性值必須加引號，id 屬性能夠代替 name 屬性；　
XHTML DTD 定義了強制使用的 HTML 元素；

全部 XHTML 文檔必須進行文件類型聲明（DOCTYPE declaration）。文件類型聲明並不是 XHTML 文檔自身的組成部分，不是 XHTML 元素，也沒有關閉標籤。在 XHTML 文檔中必須存在html、head、body元素， title 元素必須位於 head 元素中。

!DOCTYPE ：文檔類型聲明，用於驗證XHTML文檔。
head
body

HTML-5

CSS

層疊樣式表，Cascading Style Sheets，一種用來表現HTML或XML等文件樣式的計算機語言，真正能夠作到網頁表現與內容分離的一種樣式設計語言，是目前基於文本展現的最優秀的表現設計語言。

表現與內容「解耦合」，後期易維護和改版；
精簡代碼，減少網頁文件大小，加快網頁加載速度；
對象位置排版像素級的精確控制；
層疊性和繼承性；

默認狀況下，元素的寬度與高度計算方式以下：

width(寬) + padding(內邊距) + border(邊框) + margin(外邊距) = 元素實際寬度
height(高) + padding(內邊距) + border(邊框) + margin(外邊距) = 元素實際高度

CSS-3

最重要CSS3模塊

選擇器
盒模型
背景和邊框
文字特效
2D/3D轉換
動畫
多列布局
用戶界面

具體概覽信息，僅供參考

// 邊框
border-radius
box-shadow: 四周環繞陰影框：0 0 2px 1px rgba(100, 80, 88, 0.5);
border-image
box-sizing: 在一個元素的width和height中包含padding(內邊距)和border(邊框)
            保證相同的width和height下，界面展現同樣
            推薦默認全局設置 * {box-sizing: border-box;}
// 按鈕
cursor: not-allowed;：禁用狀態
border: none;float: left;：經過移除外邊距設置按鈕組
// 背景
background-image
background-size
background-origin: content-box, padding-box, border-box
background-clip
// 漸變
Linear Gradients: 線性漸變，向下/向上/向左/向右/對角方向
Radial Gradients: 徑向漸變，由它們的中心定義
transparent: 透明度，輔助用rgba()函數定義顏色結點
// 文本效果
text-shadow
box-shadow
text-overflow
word-wrap: break-word，強制拆分單詞換行
word-break: break-all 和 keep-all
卡片式文本：box-shadow
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}
div.container {
    padding: 10px;
}
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>
  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>
// 2D轉換
translate(): 位移
rotate(): 旋轉，正順負逆
scale():放大縮小
skew(): 傾斜
matrix(): 2D方法通用方法
// 3D轉換
rotateX()
rotateY()
// 過渡
transition: 指定過渡樣式屬性
// 動畫 @keyframes規則
animation: 指定動畫規則
// 多列-分欄
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule: column-rule-* 全部屬性
column-span
column-width
// 分頁、導航條
利用 ul 和 li 實現
// 圖片 http://www.runoob.com/css3/css3-images.html
響應式圖片：img {max-width: 100%; height: auto;}
卡片式圖片：box-shadow
div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}
div.container {
  text-align: center;
  padding: 10px 20px;
}
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>
圖片濾鏡：filter
響應式圖片相冊
圖片Modal(模態)
// 用戶界面
resize: 元素尺寸可調
box-sizing
outline-offset
// 多媒體查詢：@media
viewport(視窗) 的寬度與高度
設備的寬度與高度
朝向(智能手機橫屏，豎屏) 
分辨率

window.matchMedia()

用來將CSS的MediaQuery條件語句，轉換成一個MediaQueryList實例。

根據mediaQuery是否匹配當前環境，加載相應的 CSS 樣式表，示例代碼：

var result = window.matchMedia("(max-width: 700px)");
if (result.matches){
  var linkElm = document.createElement('link');
  linkElm.setAttribute('rel', 'stylesheet');
  linkElm.setAttribute('type', 'text/css');
  linkElm.setAttribute('href', 'small.css');

  document.head.appendChild(linkElm);
}

彈性盒子

Flexible Box，css3新的佈局模式（Flex佈局）

當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式
提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間
爲盒裝模型提供最大的靈活性

組成：彈性容器(Flex container)和彈性子元素(Flex item)

圖左是盒子模型：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

具體參見：Introduction to the CSS basic box model；

// container屬性
/// 子元素在父容器中的排列位置
flex-direction: row | row-reverse | column | column-reverse
/// 應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊
justify-content: flex-start | flex-end | center | space-between | space-around
/// 設置或檢索彈性盒子元素在交叉軸（縱軸）方向上的對齊方式
align-items: flex-start | flex-end | center | baseline | stretch
/// 指定彈性盒子的子元素換行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit
/// 修改 flex-wrap 屬性的行爲。相似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊
align-content: flex-start | flex-end | center | space-between | space-around | stretch
/// flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap
flex-flow: <flex-direction> || <flex-wrap>

// item屬性
/// 彈性子元素的排序屬性
order: <integer>
/// 放大|縮小比例
flex-grow|flex-shrink: <number>
/// 分配多餘空間以前，項目佔據的主軸空間
flex-basis: <length> | auto
/// 自動獲取彈性容器中剩餘的空間，並對齊（居中）
margin: auto
/// 設置彈性元素自身在交叉軸（縱軸）方向上的對齊方式
align-self: auto | flex-start | flex-end | center | baseline | stretch
/// 指定彈性子元素如何分配空間, flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto
flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Flex佈局默認首行左對齊：display: flex;
垂直水平居中對齊：justify-content: center; align-items: center;
基本網格佈局：平均分佈
百分比佈局
流式佈局：每行項目數固定，自動分行
聖盃佈局：Holy Grail Layout，常見網站佈局

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 兩個邊欄的寬度設爲12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 導航放到最左邊 */
  order: -1;
}

具體參見：

Flex佈局教程: 語法篇 - 阮一峯； Flex佈局教程: 實例篇 - 阮一峯；

Flex佈局示例 - demo - github；