必看，系統(tǒng)說明前端 HTML與CSS的基礎(chǔ) 知識(shí)點(diǎn)
發(fā)表時(shí)間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]前端1 什么是前端前端即網(wǎng)站前臺(tái)部分，運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5，CSS3，前端框架的應(yīng)用，跨平臺(tái)響應(yīng)式網(wǎng)頁設(shè)計(jì)能夠適應(yīng)各種屏幕分辨率，完美的動(dòng)效設(shè)計(jì)，給用戶帶來極高的用戶體驗(yàn)。前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站...
前端
1 什么是前端
前端即網(wǎng)站前臺(tái)部分，運(yùn)行在PC端，移動(dòng)端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，HTML5，CSS3，前端框架的應(yīng)用，跨平臺(tái)響應(yīng)式網(wǎng)頁設(shè)計(jì)能夠適應(yīng)各種屏幕分辨率，完美的動(dòng)效設(shè)計(jì)，給用戶帶來極高的用戶體驗(yàn)。
前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺(tái)代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript
2 前端開發(fā)的技術(shù)棧
HTML
超文本標(biāo)記語言 Hyper Text Markup Language
“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素
負(fù)責(zé)完成頁面的結(jié)構(gòu)
CSS
JavaScript
瀏覽器腳本語言，可以編寫運(yùn)行在瀏覽器上的程序
妥妥的編程語言
負(fù)責(zé)編寫頁面特效、調(diào)用瀏覽器的API(BOM)、操作改變頁面內(nèi)容(DOM)，從后端獲取數(shù)據(jù)(Ajax),渲染頁面等
jQuery是JavaScript的一個(gè)庫
Vue、Angular、React 等是JavaScript 框架
HTML5 基礎(chǔ)
1.HTML
1.1 什么是HTML
HTML是用來制作網(wǎng)頁標(biāo)記語言的
HTML 是Hypertext Markup Language 的英文縮寫，即超文本標(biāo)記語言
HTML語言是一種標(biāo)記語言，不需要編譯，直接用瀏覽器執(zhí)行
HTML文件時(shí)一個(gè)文本文件，包含了一些HTML元素，標(biāo)簽等
HTML文件必須使用.html 或 .html 問文件名后綴
HTML是對(duì)大小不敏感的，建議用小寫
HTML是有W3C（萬維網(wǎng)聯(lián)盟）維護(hù)的
HTML是通向WEB 技術(shù)世界的鑰匙
1.2 發(fā)展歷史
HTML是從2.0版本開始的，實(shí)際上沒有1.0的官方規(guī)范,在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)） HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)
HTML 3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)
HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)
HTML 4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)
HTML 5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)（我們現(xiàn)在用的就是HTML5）
1.3 HTML5的由來
HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石�！�
2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。在這個(gè)版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。
2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。
1.4 HTML5的優(yōu)點(diǎn)
1、提高可用性和改進(jìn)用戶的友好體驗(yàn)；
2、有幾個(gè)新的標(biāo)簽，這將有助于開發(fā)人員定義重要的內(nèi)容；
3、可以給站點(diǎn)帶來更多的多媒體元素(視頻和音頻)；
4、可以很好的替代FLASH和Silverlight；
5、當(dāng)涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO（搜索引擎）很友好；
6、將被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲；
7、可移植性好。
1.5 HTML5的兼容性
2 HTML基本語法
2.1 HTML標(biāo)簽
* 標(biāo)簽是HTML 中最基本的單位，也是重要的組成部分
* 通常用兩個(gè)角的括號(hào)：<和>
* 標(biāo)簽都是閉合的（兩種形式：成對(duì)與不成對(duì)）
* 雙標(biāo)簽（成對(duì)）：<標(biāo)簽名> 可以加內(nèi)容</標(biāo)簽名> 如：`<table>內(nèi)容</table>` 顯示開始結(jié)束
* 單標(biāo)簽（不成對(duì)）：<標(biāo)簽名/> 兩個(gè)單標(biāo)簽內(nèi)不可加內(nèi)容 如： `<br/>` , `<hr/>` 里面的左斜杠可以省略
* 標(biāo)簽大小寫都可以，推薦使用小寫
* 對(duì)與HTML標(biāo)簽來將，最重要的是語義
2.2 HTML標(biāo)簽屬性
HTML屬性一般都出現(xiàn)在HTML的開始標(biāo)簽中, 是HTML標(biāo)簽的一部分。
標(biāo)簽可以有屬性,它包含了額外的信息.屬性的值一定要在雙引號(hào)中。
標(biāo)簽可以擁有多個(gè)屬性。
屬性由屬性名和值成對(duì)出現(xiàn)。
語法格式如下：
<標(biāo)簽名 屬性名1="屬性值" 屬性名2="屬性值" ... 屬性名N="屬性值">
<!-- 輸出內(nèi)容… -->
</標(biāo)簽名>
單標(biāo)簽<img src="圖片的地址">
雙標(biāo)簽<table width="100" height="200"></table>
2.3 HTML代碼格式
任何回車或空格在源代碼中都是不起作用，一般標(biāo)簽嵌套用縮進(jìn)所以在編寫HTML代碼時(shí)，都可以使用回車或者空格進(jìn)行代碼排版，這樣可以使代碼清晰，也便于團(tuán)隊(duì)合作。必須保持嚴(yán)格的縮進(jìn)規(guī)則，以Tab鍵為準(zhǔn)。
2.4 HTML 注釋
<!-- 注釋內(nèi)容 -->
<!--
這里全是注釋
都是注釋
-->
可以在里面寫單行注釋，也可以寫多行
注釋里的！符號(hào)和-- 要連起來不能空格
2.5 HTML實(shí)體
注意：用來表示特殊符號(hào)，跟轉(zhuǎn)義字符有像
3 HTML常用標(biāo)簽
文檔聲明 <!doctype html>
3.1 主體結(jié)構(gòu)
<html></html> 此元素可告知瀏覽器其自身是一個(gè) HTML 文檔。
<head></head>用于定義文檔的頭部，它是所有頭部元素的容器,對(duì)文件的描述。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
<body></body>代表文件內(nèi)容,定義文檔的主體
3.2HEAD頭部標(biāo)簽
<title></title> 雙標(biāo)簽內(nèi)寫標(biāo)題，網(wǎng)頁標(biāo)題
<base>標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)
<meta>寫在最上面，因?yàn)橄旅嬗休斎胱址�，指定網(wǎng)頁的元信息可指定字符編碼，關(guān)鍵字，描述信息屬性：charset , name ,content
<meta charset="utf-8"> 指定編碼
<meta name="keyword" content=" 指定搜索關(guān)鍵字
同志交友,同志,同志相親">
<meta name="description" content=" 指定描述信息
全國最大的同志交友平臺(tái)">
<link rel="stylesheet" type="text/css" href="./01.css"> 從文件導(dǎo)入css
<link rel="shorcut icon" type=" 導(dǎo)入網(wǎng)頁標(biāo)題圖標(biāo) ico格式可以
image/x-icon" href="./os.ico">
<style type="text/css"> 可以直接在頭部運(yùn)用自己定義的css來修飾
h1{
color: red;
}
</style>
<script type="text/javascript" src="script.js"></script>
<script>
alert('OK')
</script>
3.3 格式排版標(biāo)簽
<hn></hn> 1~6 標(biāo)題
<p></p> 段落
<pre></pre> 原樣輸出
<br> 換行
<hr> 分隔
<p></p> 沒有任何語義的標(biāo)簽
3.4 文本標(biāo)簽
<em></em> 強(qiáng)調(diào) 表現(xiàn)為斜體
<strong></strong> 強(qiáng)調(diào) 表現(xiàn)為粗體
<mark></mark> H5新增 表示被選擇
<sup></sup> 上標(biāo) 如多少次方
<sub></sub> 下標(biāo) 化學(xué)元素水
<ins></ins> 添加的內(nèi)容 內(nèi)容下面有下劃線
<del></del> 刪除的內(nèi)容 內(nèi)容中間劃了一條線
<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 默認(rèn)大小的倍數(shù)
百分比 默認(rèn)大小參照
cm
mm
pt
CSS 顏色單位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb數(shù)字 rgb(34,45,23) rgb(20%, 57%, 100%)
16進(jìn)制 #abcdef #f90 #ccc
5 CSS選擇器
#標(biāo)簽名選擇器
tagName {
}
# 類名
.className {
}
#ID選擇器
#idName {
}
# 全局選擇器
* {
}
# 組合 后代元素
選擇器 選擇器 .list li
# 組合 子元素
選擇器>選擇器 .list>li
# 群組
選擇器,選擇器，選擇器 h1,h2,p,.list
# 多條件 .item.frist_item
p.item
6 選擇器優(yōu)先級(jí)
ID > CLASS > tagName > *
組合選擇器 數(shù)數(shù) 看優(yōu)先級(jí)的個(gè)數(shù)對(duì)比
7 CSS屬性 常用
字體
font-family 字體家族 font-family:"Arial","Helvetica","宋體",sans-serif; 或者襯線字體serif
font-size 字體大小 10px 1.3em 都可以
font-weight normal/bold 字體寬度 默認(rèn) 以及加粗
font-style normal/italic 字體風(fēng)格 默認(rèn) 斜體
font-variant normal/small-caps 字體變形 默認(rèn) 小型大寫字母
font 復(fù)合屬性
font:[weight style variant] size family
顏色
文本
word-spacing 單詞 空格
letter-spacing 字母 空格 1px 2em 2個(gè)字的空格
text-align: left / center /right 文本水平對(duì)齊 左邊 中間 左邊
vertical-align: baseline / middle .... 垂直對(duì)齊方式 默認(rèn) 圖片和文字時(shí)在中間
line-height 行高 一行的情況下 高度和行高一樣的情況下 左居中
text-decoration ： none/overline/underline/line-through 文本裝飾 默認(rèn) 上劃線 下劃線 刪除線
text-indent: 2em 文本首行縮進(jìn)
word-wrap: break-word 單詞過長或者url 可以換行
overflow-wrap word-wrap的別名 CSS3
white-space pre pre-wrap 保留輸入原樣 當(dāng)文字碰到邊界換行
相關(guān)文章：
前端基礎(chǔ)(零)CSS基礎(chǔ)
前端新人學(xué)習(xí)筆記-html/css/js基礎(chǔ)知識(shí)點(diǎn)
相關(guān)視頻：
html與CSS基礎(chǔ)入門視頻教程-免費(fèi)在線視頻教程
以上就是必看，系統(tǒng)介紹前端 HTML與CSS的基礎(chǔ) 知識(shí)點(diǎn)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
