前端
1 什麼是前端
前端即網站前台部分，運行在PC端，行動端等瀏覽器上展現給使用者瀏覽的網頁。隨著網路科技的發展，HTML5，CSS3，前端框架的應用，跨平台響應式網頁設計能夠適應各種螢幕分辨率，完美的動效設計，帶給使用者極高的使用者體驗。
前端技術一般分為前端設計與前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前台程式碼實現，包括基本的HTML和CSS以及JavaScript
2 前端開發的技術堆疊
HTML
CSS
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的相容性
2 HTML基本語法
2.1 HTML標籤
##* 標籤是HTML中最基本的單位，也是重要的組成部分
* 通常用兩個角的括號：<和>
* 標籤都是閉合的（兩種形式：成對與不成對）
* 双标签（成对）：<标签名> 可以加内容 如：`
` 显示开始结束
* 单标签（不成对）：<标签名/> 两个单标签内不可加内容 如： `
` , `
` 里面的左斜杠可以省略
* 标签大小写都可以，推荐使用小写
* 对与HTML标签来将，最重要的是语义
2.2 HTML标签属性
HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
语法格式如下：
<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
单标签
双标签
2.3 HTML代码格式
任何回车或空格在源代码中都是不起作用，一般标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。
2.4 HTML 注释
可以在里面写单行注释，也可以写多行
注释里的！符号和-- 要连起来不能空格
2.5 HTML实体
注意：用来表示特殊符号，跟转义字符有像
3 HTML常用标签
文档声明
3.1 主体结构
此元素可告知浏览器其自身是一个 HTML 文档。
- 用于定义文档的头部，它是所有头部元素的容器,对文件的描述。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
- 代表文件内容,定义文档的主体
3.2HEAD头部标签
指定编码
从文件导入css
<script></p>
<p>alert('OK')</p>
<p></script>
3.3 格式排版標籤
1~6 標題
< /p> 段落
- 原樣輸出
- ##
換行
##
換行
#
分隔
沒有任何語意的標籤
#3.4文字標籤
強調表現為斜體
- ## 強調表現為粗體
- H5新增表示被選擇
- 下標化學元素水
- < ;/ins> 新增的內容內容下方有底線
#
/
加拼音H5新增
你好 在你好上方加上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:[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中文網其他相關文章！
