HTML基礎(1)

時間 2019-12-16

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

1.認識網頁

網頁的構成：文字，圖片，超連接，音頻，視頻以及flash等構成javascript

網頁中的代碼須要由瀏覽器來渲染和解析css

2.常見的瀏覽器

1.IE瀏覽器html

2.谷歌瀏覽器前端

3.火狐瀏覽器java

4.safari瀏覽器web

5.Opear瀏覽器瀏覽器

每一個瀏覽器內核都包括兩部分：渲染引擎(用來渲染html+css)和解析引擎(用來解析javascript代碼)服務器

3.WEB標準(重點)

WEB頁面具體組成有三部分：網絡

結構： html 標籤頁面的骨架webstorm

樣式： css樣式讓頁面看起來更加的美觀

行爲： javascript 簡稱js 讓頁面能夠有動態的效果，還能夠和服務器端進行數據的交互

也稱爲前端頁面三層：結構層，樣式層，行爲層

4.書寫第一個web頁面

1.在桌面或是某個文件夾中單擊鼠標右鍵新建一個index.txt記事本文件

2.雙擊打開這個記事本文件

3.在此文件中書寫基本內容

4.將此index.txt文件修改成index.html，此時會發現這個普通文本文件變成了一個html頁面

5.雙擊這個html頁面,就能夠在瀏覽器中打開查看了

5.網站的編碼

國際通用的是"UTF-8" 幾乎包含世界上全部的文字語言

國內通用的通常是「GBK" ,"GB2312" 對國內的文字解析更加友好

記住：之後咱們的網站就統一使用"UTF-8"這個編碼格式就能夠了

6.經常使用的編輯器

sublime

webstorm

HBuilder

vscode 當前基礎班階段主要是使用vscode這款編輯器，插件很是方便，開源，免費的

7.基本的頁面骨架結構

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

8.爲何用標籤?

爲了頁面更加的美觀，及良好的排版和後期的維護，須要使用標籤對頁面中的文本，圖片和超連接進行一個控制。

9.h系列的標籤

h系列的標籤通常是用於設置標題內容

h1通常用於最大的標題或是logo，一個頁面中只能有一個h1

h系列的標籤只有h1---h6

h系列的標籤都是塊級標籤，特色就是在瀏覽器中本身獨佔一行。

10.段落標籤p

頁面中用於分段的標籤是p標籤，這是一個雙標籤，是成對存在的

若是想在段落中對某句話，進行換行還能夠加入<br/>

<br />

11.水平分割線

<hr />

12.標籤間的關係

1.嵌套關係當前標籤裏面還有子標籤，這就是一個嵌套關係

<body>
    <p>這是一個段落標籤</p>
</body>

2.並列關係二者標籤是同級並列的

<head></head>
<body></body>

13.標籤分類

根據書寫來進行的分類：

雙標籤

<head></head>
<body></body>

單標籤

<br/>
<hr/>

文本格式化標籤通常用於頁面中的修飾做用，好比顯示一個精靈圖

<b></b>　　<strong></strong>      能夠將文本內容加粗顯示
<i></i>　　<em></em>                        將文本內容以斜體來顯示
<s></s>　　<del></del>                        將文本內容加入中劃線或刪除線
<u></u>　　<ins></ins>                      將文本內容加下劃線

根據頁面的顯示效果來分類：

塊級元素: 本身獨佔一行,不容許別的標籤在本行內顯示好比: h系列標籤 p 標籤 div 列表 ul li ol li dl dt dd

行內元素: 一行內能夠顯示多個好比：b ,strong,em,s, span a

行內塊元素: input button img

14.標籤語義化

歸納的說，就是在頁面合適的位置放置合適的標籤。

好處：

方便代碼的閱讀和維護
同時讓瀏覽器或是網絡爬蟲能夠很好地解析，從而更好分析其中的內容
使用語義化標籤會具備更好地搜索引擎優化

兩個重要可是沒有語義的標籤：

div 用於標註頁面中的一個大塊的內容，裏面能夠有文本，圖片，還有段落，超連接，視頻...

span span通常用於標註小範圍的文本內容能夠對這塊文本內容設置必要的樣式，好比，文本大小，顏色...

15.超連接a標籤的使用

a標籤用於跳轉到另外一個頁面，不但能夠跳轉到網絡中的任意一個頁面，還能夠跳轉到咱們本項目中的任意一個頁面

基本語法結構：

<a href="要跳轉的目標URL" target="_self">連接內容</a>

target屬性默認的取值是：_selft 還有另一個屬性 _blank 是在新的頁面打開

16.圖片標籤img

頁面中的圖片要使用img標籤來顯示

<img src="圖片地址的路徑" alt="圖片加載失敗時的描述" title="圖片的普通描述">

alt：只有圖片加載失敗的時候，纔會顯示內容，若是圖片正常顯示的話，則alt的內容不會顯示

title: 無論圖片加載失敗與否,都會顯示title的內容

17.圖片的路徑

相對路徑：

以./ ../ 開頭的路徑稱爲相對路徑是相對於當前的.html文件所在的目錄而查找的路徑;

相對路徑會由於.html文件的位置變化而變化

絕對路徑：

以系統盤符開頭或是以域名或IP地址這樣的路徑設置的，稱爲絕對路徑;

絕對路徑的好處是無論.html文件位置如何變化，都會顯示圖片

vscode中經常使用的快捷鍵

ctrl + c 複製當前內容

ctrl + x 剪切當前內容

ctrl + v 粘貼當前內容

ctrl + / 註釋某段內容

ctrl + z 撤銷當前操做

ctrl + shift + d 複製當前行內容到下一行

vscode經常使用插件

1. Auto Close Tage 自動閉合HTML/XML標籤

2. Auto Rename Tag 自動重命名配對的HTML / XML標籤

3. AutoFileName 文件路徑提示

4. EaseServer 讓打開的文件以http的方式打開，location的前綴，而再也不是file 快捷鍵：ctrl+shift+enter

5. open in brower 在瀏覽器中打開，安裝後在左側目錄中右鍵點擊會出現 open in browser 選項

6. Path Autocomplete 路徑完成提示

7. Path Intellisense 文件路徑智能提示

8. Sublime Material Theme sublime主題風格

9. Sublime Text Keymap and Settings Importer 相似sublime的快捷鍵設置

10. vscode-icons 文件圖標

11. Material Icon Theme vscode圖標主題,支持更換不一樣色系的圖標

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。