搜尋

首頁  >  文章  >  web前端  >  必看，系統介紹前端 HTML與CSS的基礎 知識點

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

php是最好的语言
php是最好的语言原創
2018-07-30 09:30:461399瀏覽

前端

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标签的一部分。

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

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

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

  • 语法格式如下：

<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">

单标签

双标签

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 

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

<script></p> <p>alert('OK')</p> <p></script>

3.3 格式排版標籤

  • 1~6 標題

  • < /p> 段落

  •  原樣輸出
    • 

  • ##
     換行
    

    • 

  • ##
     換行
    • 

  • #
     分隔
    • 



 沒有任何語意的標籤


    

  • #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中文網其他相關文章！
JavaScript ruby html5 firefox jquery css ajax chrome safari css3 html angular 前端框架 break 栈 class copy JS dom bom href alert 选择器 样式表 overflow table li 搜索引擎 SEO word
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：淺析HTML Table表格的使用方法下一篇：淺析HTML Table表格的使用方法
相關文章
看更多