Web前端基礎

一. HTML基礎

1 .HTML官方的說法是“超文本標記語言”，它使用一系列的標籤將一些文檔總合成一個整體，最常見的就是我們的網頁，通過將文字、音頻、視頻、圖片、表格還有鏈接通過HTML命令寫的。

HTML它是一種描述性語言，用來描述頁面內容的顯示方式，如：我們要寫一個標題，通過對標題內容加屬性來實現，就如同給遊戲任務加裝備加各種裝飾來實現我們想要達到的各種效果；

HTML文件是純文本文件，以".html"或".htm"爲後綴，HTML它的基本組成單位是元素，語法結構如下：

<標籤>
	    內容
<標籤>

2. HTML文檔的結構是由<html>、<head>和<body>這三大元素組成

以<html>元素來界定文檔的開始和結束，所有的內容都要放在這兩個標籤之間
<head>元素，顧名思義，頁面頭部信息，用於向瀏覽器提供整個頁面的基本信息，一般包括：頁面的標題，css樣式，JavaScript腳本元素等等；除了標題會顯示在瀏覽器窗口上，其他的不會顯示在界面上；
<body>元素：網頁的正文，是我們在瀏覽器主窗口中看到的信息，包括但不限於文字、音頻、視頻、圖片、表格等等；但不是所有的<body>內部標籤都是可見的。

<head>中可以包含以下子元素：<title>、<meta>、<base>、<link>、<script>以及<style>等
頁面標題位於<title>中，可以包含任何字符

meta元素用於向客戶的瀏覽器傳遞信息和命令，而不是用來顯示內容的。
一個<head>標籤中可以包含一個或多個<meta>標籤。
meta的常用屬性名有 name,http-equiv,content

<meta>標籤主要分爲兩大類：

對頁面的設置，通過http-equiv屬性進行指定
對搜索引擎的設置，通過name屬性進行指定

<head> 
   <title>漫步時尚廣場 E&amp;S</title> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   <meta http-equiv="Refresh" content="5;url=http://www.itshixun.com" /> 
   <meta name="keywords" content="漫步時尚廣場,時尚,購物,影視,餐飲"/> 
   <meta name="description" content="遊客漫步在時尚廣場,可漫步湖畔步行街,可在國際名品店、時尚精品店徜徉,在電影區感受視聽震撼,在咖啡、酒吧一條街放鬆身心,在世界特色餐廳享受美味。 "/> 
   <meta name="author" content="QST青軟實訓"/> 
   <meta name="robots" content="all"/> 
</head>

HTML文檔中的文本元素包括：內容標題（設置標題0、文本修飾（對文本樣式進行修飾)以及特殊字符（用引用的方式實現無法直接使用的特殊字符）。（這個主要靠多用）
列表元素分爲：有序列表

<ol>
   <li>列表項<li>
   <li>列表項<li>
<ol>

無序列表

<ul>
   <li>列表項<li>
   <li>列表項<li>
<ol>

定義列表

<dl>
<dt>購物區<dt>
<dd>購物區介紹<dd>
<!--第一項--!>
<dl>

H1/H2/H3 表現大綱級別
div/span/p 表現佈局
使用帶語義的標籤可以讓搜索引擎快速的進行收錄
雖然不同的標籤也許能夠達到相同的顯示效果，但是強烈建議使用語義化標籤+CSS樣式去控制

<style>
.hstyle {
display: block;
font-size: 2em;
font-weight: bold;
}
</style>
<h1>標題1</h1>
<span class="hstyle">標題1</spa

二頁面佈局

HTML中常見的佈局有三種：表格佈局，框架佈局，以及css來佈局

1.表格佈局

表格將數據組織在一起用網格的方式進行顯示，也常用於頁面的排版與佈局
表格使用行與列的方式組織信息，它主要由行、列、表頭單元格、正文單元格、標題、表頭行、正文行、表尾行等構成。

在HTML中，用<table>標籤來創建表格元素,常見標籤有:

<td> 單元格,表格的基本元素
<th> 表頭單元格，定義表格頭部信息 ,內容通常粗體並水平居中
<tr> 行標籤,表格的水平元素
<thead> 界定表頭，
<tfoot> 定義表尾，創建腳註
<tbody> 表格主體
<caption> 表格標題，顯示在表格上方

表格可以包含多個<tbody>標籤，用於對錶格主體部分的數據進行橫向分組；而<thead>和<tfoot>標籤在表格中只能出現一次。

<table border="1">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>內容1</td>
            <td>內容2</td>
        </tr>
    </tbody>
</table>

在嵌套表格時，內部表格應該位於外層表格的標籤之間。表格雖然允許多重嵌套，但在頁面設計時，當嵌套層次太多時不利於搜索引擎對頁面內容的檢索；因此，表格嵌套的層次不能過深，一般不要超過3~4層。

框架佈局

在HTML中，使用框架集標籤來劃分頁面的框架，使用屬性rows（或cols）說明框架的行數（或列數）以及所佔窗口的比例; 框架集主要負責整個頁面的佈局，屬性包括行、列、邊框、邊框顏色、空白距離等屬性標籤用於指示框架集中每個框架的內容。

	<frameset rows="60,*,70" frameborder="yes" framespacing="8" 
	                 bordercolor="#0033FF"> 
	        <frame src="topFrame.html" /> 
	        <frame src="mainFrame.html" /> 
	        <frame src="bottomFrame.html" /> 
	    </frameset>

單個框架集只能實現具有行和列（類似網格）的固定結構的佈局，當希望更加複雜的結構時，就需要通過嵌套框架集來實現，同table一樣，框架佈局也不要嵌套的太多

 <frameset rows="50,*,50" > 
        <frameset cols="1*,1*"> 
            <frame name="topFrame1" src="topFrame.html"  /> 
            <frame name="topFrame2" src="topFrame.html"  /> 
        </frameset>
        <frameset cols="100,*,120">
            <frame name="leftFrame" src="leftFrame.html" /> 
            <frame name="mainFrame" src="mainFrame.html" / > 
            <frame name="rightFrame" src="rightFrame.html" /> 
        </frameset>
        <frame name="bottomFrame" src="bottomFrame.html" /> 
</frameset>

內聯框架是嵌入到頁面中的一個區域，通過<iframe>標籤引入另外一個頁面資源，無需<frameset >標籤協助。

css頁面佈局

CSS（層疊樣式表）將頁面內容與樣式徹底分離，極大改善了HTML在頁面顯示方面的缺陷。
它可以控制HTML標籤的顯示樣式，如頁面的佈局、字體、顏色、背景和圖文混排等效果
本身HTML 元素是不具備樣式的，但是在不定義樣式的情況下，不同的標籤也能表現不同的顯示樣式，原因是瀏覽器對不同的標籤是有個默認樣式的。

樣式是CSS的基本單元，每個樣式包含兩部分內容：

選擇器（Selector）：用於指明網頁中哪些元素應用此樣式規則。瀏覽器解析該元素時，根據選擇器指定的樣式來渲染元素的顯示效果；
聲明（Declaration）：每個聲明由屬性和屬性值兩部分構成，並以英文分號（;）結束css基本格式

CSS基本格式

其中，一個選擇器可以包含有一個或多個聲明。

在CSS樣式聲明中，書寫格式可能有所不同，但應遵循以下規則：

第一項必須是選擇器或選擇器表達式
選擇器之後緊跟一對大括號
每個聲明是由屬性和屬性值組成，且位於大括號之內
聲明之間需以英文分號進行間隔
最後一個聲明後面的英文分號可以省略

CSS樣式有以下三種格式：內嵌樣式、內部樣式和外部樣式

（1）內嵌樣式（Inline Style Sheet）又稱行內樣式，將CSS樣式嵌入到HTML標籤中可以很簡單的對某個標籤單獨定義樣式。

<p style="color:red; background: yellow;">內嵌樣式-style屬性</p>

<h4 style=“border:dotted thin blue; text-align:center;”>內嵌樣式的使用</h4>
<span style=“color:red; font-weight:bold;”>內嵌樣式</span>是混合在HTML標記裏使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式。

（2）內部樣式表（Internal Style Sheet）將CSS樣式從HTML標籤中分離出來，使得HTML代碼更加整潔，而且CSS樣式可以被多次使用。

內部樣式表是一種寫在<style>標籤中的樣式聲明，僅對當前頁面有效。
在<style>標籤中定義CSS樣式，然後在頁面中使用CSS樣式。
一般情況下，<style>標籤位於<head>標籤之內；
在頁面加載過程中，先加載樣式後加載頁面元素，瀏覽器根據元素的順序加載、渲染並在頁面中顯示出來。

（3）外部樣式表是將CSS樣式以獨立的文件進行存放，然後在頁面中引入該樣式文件。

網站統一引用同一外部樣式文件，使頁面的風格保持一致，有利於頁面樣式的維護與更新，從而降低網站的維護成本。
用戶瀏覽網頁時，CSS樣式文件會被暫時緩存；繼續瀏覽其他頁面時，會優先使用緩存中的CSS文件，避免重複從服務器中下載，從而提高網頁的加載速度

1. 鏈接外部樣式表

在HTML中<link>標籤用於將文檔與外部資源進行關聯，經常用於鏈接網頁的外部樣式表.

<link type="text/css" rel="stylesheet" href="url" />

其中：

type屬性用於設置鏈接目標文件的MIME類型，CSS樣式表的MIME類型是text/css
rel屬性用於設置鏈接目標文件與當前文檔的關係，stylesheet表示外部文件的類型是CSS文件

2. 在頁面的<head>標籤中使用<link >標籤關聯style.css樣式文件，然後在<body>中通過標籤選擇器引用樣式文件中預定義的樣式

3. 多重樣式（Multiple Styles）是指外部樣式、內部樣式和內嵌樣式同時應用於頁面中的某一個元素。在多重樣式情況下，樣式表的優先級採用就近原則。一般情況下，多重樣式的優先級由高到低的順序是“內嵌à內部à外部à瀏覽器缺省默認”

優先級是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下纔可以認爲離被設置元素越近優先級別越高

下列是一份優先級逐級增加的選擇器列表：

通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
僞類
ID 選擇器
內聯樣式
!important 規則例外

當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他的聲明, 無論它處在聲明列表中的哪裏. 儘管如此, !important規則還是與優先級毫無關係.使用 !important 不是一個好習慣，因爲它改變了你樣式表本來的級聯規則，從而使其難以調試。

一些經驗法則：

Never 永遠不要在全站範圍的 css 上使用 !important

Never 永遠不要在你的插件中使用 !important

解釋：

1. 內聯樣式表的權值最高 1000；

2. ID 選擇器的權值爲 100

3. Class 類選擇器的權值爲 10

4. HTML 標籤選擇器的權值爲 1

在開發過程中，一般都是通過外鏈的樣式表去定義頁面的樣式，減低代碼之間的耦合，讓美工專業去做頁面。簡單的理解就是，可以讓不同的人不在同一個頁面修改文件，自己關心自己的工作

JavaScript

對於編程語言的認識：

一門成熟的編程語言應該具備：變量、數據類型、運算符、控制語句（順序結構、分支結構、循環結構）、自成體系的 API。
JavaScript 的作用

業務邏輯處理
. 對 DOM 進行操作（DOM : Document Object Model）:通過事件驅動頁面模型發生變化（DOM 樹中元素的增刪改查，特別是改：改內容，改樣式），JavaScript 能操作 DOM 的原因在於 JavaScript 實現了 DOM 相關操作的接口，能滿足對 DOM 的操作。

JavaScript 是弱類型語言，而且書寫是比較隨意的。弱語言體現在變量是沒有準確的數據類型定義。通過 var 關鍵字定義。

弱語言體現在變量是沒有準確的數據類型定義。通過 var 關鍵字定義。

// 動態類型,隨值的變化而變化
var flag = 'abc';
flag = 12;
flag = true;
flag = {name : 'Tom'};
flag = function() {
alert("Hello,JavaScript");
}

關於 JavaScript 的判斷條件

在條件表達式中，數字0和非0也可以表現爲false和true

分支結構的三種表示方式

三目運算符是需要熟練掌握的，其本質就是個表達式

 var age=20;
 var str=age >= 18 ? '成年' : '未成年';
 console.log(str);

一. HTML基礎

二頁面佈局

1.表格佈局

框架佈局

css頁面佈局

JavaScript

爲什麼要⽤ Foundry

【筆記】動手學深度學習-預備知識

py發送email

MySQL 分庫分表方案，總結太全了。。

Qt/C++音視頻開發71-指定mjpeg/h264格式採集本地攝像頭/存儲文件到mp4/設備推流/採集推流

WPF開源輕便、快速的桌面啓動器

公司來了個新同事，把 DDD 運用得爐火純青！

學習HTML必知的小知識

java如何分辨方法重寫還是重載

Python學習-必知的表達式運算符小知識

Web前端基礎

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Web前端基礎

一. HTML基礎

二 頁面佈局

1.表格佈局

框架佈局

css頁面佈局

JavaScript

二頁面佈局