必看，系統介紹前端 HTML與CSS的基礎 知識點

前端

1 什麼是前端

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

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

2 前端開發的技術堆疊

HTML

• 超文本標記語言Hyper Text Markup Language

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

• #負責完成頁面的結構

CSS

• 級聯樣式表Cascading Style Sheet

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

JavaScript

• 瀏覽器腳本語言，可以編寫執行在瀏覽器上的程式

• 妥妥的程式語言

• 負責撰寫頁面特效、呼叫瀏覽器的API(BOM)、操作改變頁面內容(DOM)，從後端取得資料(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）。在這個版本中，新功能不斷推出，以幫助網路應用程式的作者，並努力提高新元素互通性。

• 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中最基本的單位，也是重要的組成部分

* 通常用兩個角的括號：

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

* 双标签（成对）： 可以加内容标签名> 如：`

内容` 显示开始结束

* 单标签（不成对）： 两个单标签内不可加内容 如： `
`   ,   `

---

`   里面的左斜杠可以省略

* 标签大小写都可以，推荐使用小写

* 对与HTML标签来将，最重要的是语义

2.2 HTML标签属性

• HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。

• 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

• 标签可以拥有多个属性。

• 属性由属性名和值成对出现。

• 语法格式如下：

标签名>

单标签

双标签

2.3 HTML代码格式

任何回车或空格在源代码中都是不起作用，一般标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。

2.4 HTML 注释

 

可以在里面写单行注释，也可以写多行

注释里的！符号和-- 要连起来不能空格

2.5 HTML实体

注意：用来表示特殊符号，跟转义字符有像

• &nbsq; 表示一个空格

• <表示特殊符号 <

• > 表示符号

• ©表示版权符号 ©上海公安 版权号333333455

• ¥表示人民币符号 ¥1000

• &表示实体本身& 如果是空格则就显示& 如果是符号 则&符号

3 HTML常用标签

文档声明

3.1 主体结构

•  此元素可告知浏览器其自身是一个 HTML 文档。

• 用于定义文档的头部，它是所有头部元素的容器,对文件的描述。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

• 代表文件内容,定义文档的主体

3.2HEAD头部标签

• 双标签内写标题，网页标题

• 标签为页面上的所有链接规定默认地址或默认目标

• 写在最上面，因为下面有输入字符，指定网页的元信息可指定字符编码，关键字，描述信息属性：charset , name ,content

            指定编码

• 导入css 文档，或者指定的网页图标 属性 src ， type ，rel

从文件导入css 

h1{

color: red;

}

• <script></script>标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

<script></script>

alert('OK')

3.3 格式排版標籤

• 1~6 標題

• 段落

• 原樣輸出
• ##
  換行

• ##
  換行

• #

  ---

  分隔

沒有任何語意的標籤

• #3.4文字標籤

• 強調表現為斜體

• ## 強調表現為粗體

• H5新增表示被選擇

• > ; 上標如多少次方

• 下標化學元素水

• < ;/ins> 新增的內容內容下方有底線

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

# / 加拼音H5新增

你好nihao< ;/rt>     在你好上方加上nihao的顯示

CSS基本語法

• 使用CSS

• link 引入外部的CSS檔案

• 在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的基礎 知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！