web前端知識梳理——HTML5(一)

一.Web基礎知識(瞭解)
web與Internet
1.Internet
全球性計算機網際網路絡,簡稱因特網,網際網路,互動網.
2.Internet上的應用程式
1.c/s --可執行的桌面應用程式,需要下載安裝更新
c:client客戶端
s:server伺服器
2.b/s ---類似京東
b:browser瀏覽器
s:server 伺服器
3.web
web:執行在Internet之上的一種B/S結構的應用程式,俗稱:網站
web的工作原理:基於瀏覽器和伺服器以及通訊(http)協議實現資訊的傳輸和展示
瀏覽器:chrome,IE,firefox,opera(挪威的,歐洲用的多),safari
伺服器:NODEjs,java,php,pyhton,.net
通訊協議:HTTP協議,規範資料如何打包和傳輸
4.瀏覽器技術(前端技術)
HTML,JS,CSS

二.HTML快速入門(掌握)
1.什麼是HTML
HyperText Markup Language 超文字標記語言

超文字:超出普通文字的功能 a:普通英文首字母 <a></a>超級連結
標記:<a></a>是標記,帶有尖括號
語言:都有自己的語法

2.特點
1.由瀏覽器解析執行
2.用帶有尖括號的"標記"來標識的
3.以.html或.htm為字尾
4.網頁中可以巢狀指令碼語言(js)

三.HTML的基礎語法(掌握)
1.標記
標記:又稱為元素或標籤,在網頁中,主要用來表示一些功能
標記分類:
1.封閉型別
也稱為雙標記,必須成對出現,有開始有結束標記.
語法:<標記>文字</標記>
ex:<a>百度</a>

2.非封閉型別
也稱為單標記,或空標記
語法:<標記>--<html4.01寫法>或<標記/>--<xhtml1.0寫法>---html5都相容
ex:<img>或<img/>
<br>或<br/>
<hr>或<hr/>
2.標記巢狀
1.什麼是巢狀
在一對標記中出現另外一對或一個標記,從而形成功能的層疊.
2.語法
<標記1>
<標記2>
內容
</標記3>
</標記1>
ex:
<a>
<b>
<i></i>
</b>
</a>
注意：
1.巢狀順序，成對出現
2.標記換行縮排
3.屬性和值
允許通過屬性的方式對標記進行修飾
語法:
1.屬性必須宣告在開始標記中
<標記屬性名="值"></標記>
2.多個屬性之間用空格隔開即可
<標記屬性名="值" 屬性2="值2"...></標記>
4.標準屬性（通用屬性）
id:唯一標識(名稱),id值一定不能重複
title:滑鼠懸停在元素上時所提示的文字
class:在css中使用,引用類選擇器
style:在css中使用,定義元素的行內樣式
5.註釋
語法:
注意:
1.註釋本身不能巢狀  --> 錯誤!!會多一個 -->
2.註釋不能巢狀在標記中

四.HTML文件結構(掌握)
1.HTML文件結構組成
1.文字型別的宣告
作用:告訴瀏覽器HTML的版本型別
語法:<!doctype html> -html5寫法
在最頂端編寫
2.HTML頁面
在文件型別的宣告下方緊挨著寫一對html標記
<html></html>
作用:表示整個頁面的開始與結束
在html中分兩部分:
1.<head></head>
作用:表示網頁的頭部,定義全域性資訊
2.<body></body>
作用:定義網頁的主體內容
3.<head></head>
1.head是其它頭元素的容器
①<title></title>:定義網頁的標題
②<meta> ----ex:京東例子
<meta charset="UTF-8"> //設定文件字符集
③<style></style>
④<script></script>
4.body元素
寫網頁的主體內容
body標記的屬性
text:修飾文字顏色
bgcolor:背景顏色(注意:不是background(css寫法)!!)
這兩個只能在body標籤裡用

五.文字標記
1.特殊字元
 表示一個空格
< 表示"<"
> 表示">" <p> </p> <p></p>
© 表示版權符號©
¥ 表示¥
® 表示註冊商標®
× 表示關閉×號

2.文字樣式
1.<b></b>:加粗
2.<i></i>: 斜體
3.<u></u>:下劃線
4.<s></s>:刪除線
5.<sub></sub>:下標
6.<sup></sup>:上標

3.標題元素
作用:在頁面中以醒目的方式顯示文字
語法:<hn></hn>
n:1-6
<h1>文字</h1>:一級標題
...
<h6>文字</h6>:六級標題
特點:
1.獨佔一行
2.加粗,並且字型大小可以變化
3.單獨成行,上下文之間有空白間距
屬性:
align:設定內容的水平對齊方式--取值:left/center/right
4.段落標記
語法:<p></p>
作用:以突出顯示一段文字
特點:單獨成行,上下文之間有空白間距(p的空白間距要比<div>大,div沒有額外的空白間距)
屬性:
align:left/center/right
5.換行元素
語法:<br>或<br/>
作用:讓文字換行顯示
6.水平線
語法:<hr>或<hr/>
作用:在網頁中表示一根水平線
屬性:
size:表示水平線的尺寸(高度),取值以px為單位的數字.
width:表時水平線的寬度,取值以px為單位的數字或者百分比
align:水平線的對齊方式,取值left/center/right
color:水平線的顏色,取值為合法的顏色值

7.預格式化
語法:<pre></pre>

作用:保留HTML中回車和空格 --我發現:文字要比正常的小

8.分割槽元素
1.塊分割槽元素
作用:用於頁面中佈局效果
語法:<div></div>
2.行分割槽元素
作用:在網頁中處理同一行文字的不同樣式
語法:<span></span>
9.行內元素與塊級元素
1.塊級元素
在網頁中獨佔一行,內容從上往下顯示就是塊級.
常見的塊級元素:
標題元素h1~h6
段落元素p
div (pre)
2.行內元素
在網頁中,多個元素在一行中從左往右顯示.
常見的行內元素:
a/b/u/i/s/sub/sup/span
3.行內塊顯示呈行內元素的效果,但是具備塊級的特點(比如:可設定寬高)
4.table
補充:
1.段落標記自己不能巢狀自己(p)
2.塊級中巢狀行內元素

六.影象和連結
1.URL
1.目錄結構
檔案目錄:資料夾巢狀結構
2.URL
URL:Uniform Resource Locator統一資源定位器,俗稱路徑
3.路徑的表現形式
1.絕對路徑
完整路徑,一定可以找到你想找的檔案
網路資源:
協議+主機名稱+檔案目錄結構+檔名稱
本地資源:
從最高碟符比如c:\xampp\htdocs\Day01
2.相對路徑(重點)
相對於當前某個檔案位置,從它出發所經過的路徑就是相對路徑.
(1).同級目錄
直接引用檔案
ex: "2.jpg"
(2).子級目錄
先進入資料夾,再引用
ex: img/1.jpg
(3).父級目錄
先返回上一級,再引用
ex: ../3.jpg
ps:屬性值可加引號也可以不加
3.根相對路徑
ex: /myPro/demo.html

web前端知識梳理——HTML5(一)

相關文章