溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關前端開發中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）。在這個版本中，新功能不斷推出，以幫助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; 表示一個空格
<表示特殊符號 <
> 表示符號 <
©表示版權符號 ?上海公安 版權號333333455
¥表示人民幣符號 ￥1000
&表示實體本身& 如果是空格則就顯示& 如果是符號 則&符號
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來修飾
h2{
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
# 群組
選擇器,選擇器，選擇器 h2,h3,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 保留輸入原樣 當文字碰到邊界換行
關于“前端開發中HTML與CSS基礎知識點有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
