1 什么是前端

前端即網站前臺部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML5，CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。

前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript

2 前端開發的技術棧

HTML

超文本標記語言 Hyper Text Markup Language

“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素

負責完成頁面的結構

CSS

級聯樣式表 Cascading Style Sheet

負責頁面的風格設計，樣式、美觀

JavaScript

瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序

妥妥的編程語言

負責編寫頁面特效、調用瀏覽器的API(BOM)、操作改變頁面內容(DOM)，從后端獲取數據(html' target='_blank'>Ajax),渲染頁面等

jQuery是JavaScript的一個庫

Vue、Angular、React 等是JavaScript 框架

HTML5 基礎

1.HTML

1.1 什么是HTML

HTML是用來制作網頁標記語言的

HTML 是Hypertext Markup Language 的英文縮寫，即超文本標記語言

HTML語言是一種標記語言，不需要編譯，直接用瀏覽器執行

HTML文件時一個文本文件，包含了一些HTML元素，標簽等

HTML文件必須使用.html 或 .html 問文件名后綴

HTML是對大小不敏感的，建議用小寫

HTML是有W3C（萬維網聯盟）維護的

HTML是通向WEB 技術世界的鑰匙

1.2 發展歷史

HTML是從2.0版本開始的，實際上沒有1.0的官方規范,在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（并非標準） HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854于2000年6月發布之后被宣布已經過時

HTML 3.2——1997年1月14日，W3C推薦標準

HTML 4.0——1997年12月18日，W3C推薦標準

HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準

HTML 5——2014年10月28日，W3C推薦標準（我們現在用的就是HTML5）

1.3 HTML5的由來

HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團隊。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。

2012年12月17日，萬維網聯盟（W3C）正式宣布凝結了大量網絡工作者心血的HTML5規范已經正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素互操作性。

2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于制定完成。

1.4 HTML5的優點

1、提高可用性和改進用戶的友好體驗；

2、有幾個新的標簽，這將有助于開發人員定義重要的內容；

3、可以給站點帶來更多的多媒體元素(視頻和音頻)；

4、可以很好的替代FLASH和Silverlight；

5、當涉及到網站的抓取和索引的時候，對于SEO（搜索引擎）很友好；

6、將被大量應用于移動應用程序和游戲；

7、可移植性好。

1.5 HTML5的兼容性

Internet Explorer 9 以及 以上版本

chrome、Safari、opera、Firefox和各種以wekkit為內核的國產瀏覽器

2 HTML基本語法

2.1 HTML標簽

* 標簽是HTML 中最基本的單位，也是重要的組成部分

* 通常用兩個角的括號： 和

* 標簽都是閉合的（兩種形式：成對與不成對）

* 雙標簽（成對）： 標簽名 可以加內容 /標簽名 如：` table 內容 /table ` 顯示開始結束

* 單標簽（不成對）： 標簽名/ 兩個單標簽內不可加內容 如： ` br/ ` , ` hr/ ` 里面的左斜杠可以省略

* 標簽大小寫都可以，推薦使用小寫

* 對與HTML標簽來將，最重要的是語義

2.2 HTML標簽屬性

HTML屬性一般都出現在HTML的開始標簽中, 是HTML標簽的一部分。

標簽可以有屬性,它包含了額外的信息.屬性的值一定要在雙引號中。

標簽可以擁有多個屬性。

屬性由屬性名和值成對出現。

語法格式如下：

標簽名 屬性名1= 屬性值 屬性名2= 屬性值 ... 屬性名N= 屬性值

!-- 輸出內容… --

/標簽名

單標簽 img src= 圖片的地址

雙標簽 table width= 100 height= 200 /table

2.3 HTML代碼格式

任何回車或空格在源代碼中都是不起作用，一般標簽嵌套用縮進所以在編寫HTML代碼時，都可以使用回車或者空格進行代碼排版，這樣可以使代碼清晰，也便于團隊合作。必須保持嚴格的縮進規則，以Tab鍵為準。

2.4 HTML 注釋

!-- 注釋內容 --

!--

這里全是注釋

都是注釋

--

可以在里面寫單行注釋，也可以寫多行

注釋里的！符號和-- 要連起來不能空格

2.5 HTML實體

注意：用來表示特殊符號，跟轉義字符有像

nbsq; 表示一個空格

表示特殊符號

表示符號

copy;表示版權符號 ?上海公安 版權號333333455

yen;表示人民幣符號 ￥1000

amp;表示實體本身 如果是空格則就顯示 如果是符號 則 符號

3 HTML常用標簽

文檔聲明 !doctype html

3.1 主體結構

html /html 此元素可告知瀏覽器其自身是一個 HTML 文檔。

head /head 用于定義文檔的頭部，它是所有頭部元素的容器,對文件的描述。 head 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。

body /body 代表文件內容,定義文檔的主體

3.2HEAD頭部標簽

title /title 雙標簽內寫標題，網頁標題

base 標簽為頁面上的所有鏈接規定默認地址或默認目標

meta 寫在最上面，因為下面有輸入字符，指定網頁的元信息可指定字符編碼，關鍵字，描述信息屬性：charset , name ,content

meta charset= utf-8 指定編碼

meta name= keyword content= 指定搜索關鍵字

同志交友,同志,同志相親

meta name= description content= 指定描述信息

全國最大的同志交友平臺

link 導入css 文檔，或者指定的網頁圖標 屬性 src ， type ，rel

link rel= stylesheet type= text/css href= ./01.css 從文件導入css

link rel= shorcut icon type= 導入網頁標題圖標 ico格式可以

image/x-icon href= ./os.ico

style /style

style type= text/css 可以直接在頭部運用自己定義的css來修飾

h1{

color: red;

}

/style

script /script 標簽用于定義客戶端腳本，比如 JavaScript。script 元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。

script type= text/javascript src= script.js /script

script

alert( OK )

/script

3.3 格式排版標簽

hn /hn 1~6 標題

p /p 段落

pre /pre 原樣輸出

br 換行

hr 分隔

p /p 沒有任何語義的標簽

3.4 文本標簽

em /em 強調 表現為斜體

strong /strong 強調 表現為粗體

mark /mark H5新增 表示被選擇

sup /sup 上標 如多少次方

sub /sub 下標 化學元素水

ins /ins 添加的內容 內容下面有下劃線

del /del 刪除的內容 內容中間劃了一條線

ruby /ruby / rt /rt 加拼音 H5新增

ruby 你好 rt nihao /rt /ruby 在你好上方加上nihao的顯示

CSS基本語法

使用CSS

link 引入外部的CSS文件

style /style 在html中寫

使用html元素的style屬性

格式

選擇器 {

CSS屬性: 值;

CSS屬性: 值;

}

選擇器 {屬性:值;屬性:值}

注釋

/* */

CSS長度單位

px 像素

em 默認大小的倍數

百分比 默認大小參照

cm

mm

pt

CSS 顏色單位

colorName： red/green/bue/purple/orange/yellow/pink/skyblue

rgb數字 rgb(34,45,23) rgb(20%, 57%, 100%)

16進制 #abcdef #f90 #ccc

5 CSS選擇器

#標簽名選擇器

tagName {

}

# 類名

.className {

}

#ID選擇器

#idName {

}

# 全局選擇器

* {

}

# 組合 后代元素

選擇器 選擇器 .list li

# 組合 子元素

選擇器 選擇器 .list li

# 群組

選擇器,選擇器，選擇器 h1,h2,p,.list

# 多條件 .item.frist_item

p.item

6 選擇器優先級

ID CLASS tagName *

組合選擇器 數數 看優先級的個數對比

7 CSS屬性 常用

字體

font-family 字體家族 font-family: Arial , Helvetica , 宋體 ,sans-serif; 或者襯線字體serif

font-size 字體大小 10px 1.3em 都可以

font-weight normal/bold 字體寬度 默認 以及加粗

font-style normal/italic 字體風格 默認 斜體

font-variant normal/small-caps 字體變形 默認 小型大寫字母

font 復合屬性

font:[weight | style | variant] size family

顏色

color 文字顏色

文本

word-spacing 單詞 空格

letter-spacing 字母 空格 1px 2em 2個字的空格

text-align: left / center /right 文本水平對齊 左邊 中間 左邊

vertical-align: baseline / middle .... 垂直對齊方式 默認 圖片和文字時在中間

line-height 行高 一行的情況下 高度和行高一樣的情況下 左居中

text-decoration ： none/overline/underline/line-through 文本裝飾 默認 上劃線 下劃線 刪除線

text-indent: 2em 文本首行縮進

word-wrap: break-word 單詞過長或者url 可以換行

overflow-wrap word-wrap的別名 CSS3

white-space pre pre-wrap 保留輸入原樣 當文字碰到邊界換行

相關文章：

前端基礎(零)CSS基礎

前端新人學習筆記-html/css/js基礎知識點

相關視頻：

html與CSS基礎入門視頻教程-免費在線視頻教程

以上就是必看，系統介紹前端 HTML與CSS的基礎 知識點的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。