html基礎zs知識

標籤：製作   字元   標記   文檔   劃線   body   括弧   circle   圖片   

【網站定義】

什麼是網站？

網站就是由多個網頁聯絡在一起構建出來的一個整體；

什麼網頁？

網頁就是由文字，圖片和超連結組成的html文檔。

 

製作網頁的技術是什麼技術？製作網頁的技術是web前端標準。

 

【web前端標準】

web前端標準又稱之為web前端技術，它是由W3C組織發布以及維護的一套技術規範。

 

web前端標準的官方定義：

它不是一項技術，而是一系列技術，包括如下三項：

1、結構標準 --- html；

2、樣式標準 --- css;

3、行為標準 --- javascript；

 

解釋：行為可以理解為功能（動畫）； 樣式可以理解為裝飾，美觀；

 

【網頁基本結構】 《認識html》

什麼是html？

html超文字標記語言 (HTML)，（Hyper Text Markup Language）,它是寫給瀏覽器看的一項語言，注意：不是程式設計語言。

 

html的作用？

html是負責網頁的結構搭建，布局排版，對網頁中資訊進行控制；

 

《html標籤文法》

html標籤語言又稱之為html標記語言，書寫html標籤需要遵循相關的文法：

1、html標籤成對出現，並且區分首尾，尾標籤加上關閉符號： /  斜杠；

2、html語言必須寫在標籤符號裡面： < 大小於符號，俗稱為“角括弧”  >   ；

 

《網頁的基本結構》

網頁的基本結構由4對標籤組成：

html --- 表示網頁的整體；

head --- 表示網頁的頭部；這裡面的內容都是給瀏覽器去看的；

body --- 表示網頁的主體，這裡面的內容都是給使用者去看的；

title --- 表示網頁的標題，需要寫在head裡面；

《標籤關係》

在html中，所有的標籤之間只有兩種關係： 一種是並列關係，一種嵌套關係；

 

【開發工具】 《開發工具初始化設定》

dw初始化設定快速鍵： ctrl+u 

 

【html標籤】

 

h1 --- 標題標籤； 一共有6級，h1—h6

 

p --- 段落標籤； 瀏覽器會將它內部的資訊編譯成一個段落；

 

 

 

《語義標籤》

 

語義標籤讓不同的內容賦予了不同的語義；

 

 

 

《文字控制標籤》

 

在文字控制中，修改需求最大的是：顏色，字型大小，字型，這三個需求都是通過一個標籤進行控制：font 標籤； 修改哪部分內容就用font標籤選中，然後設定它的標籤屬性；

 

 

 

標籤屬性的基本結構:

 

k=”v”   例如：color=”red”

 

注意事項：標籤屬性採用索引值對的基本結構；多個屬性之間用空格隔開；

 

索引值對翻譯過來就是： 什麼是什麼的意思。

 

 

 

font標籤的文字控制三屬性：

 

color --- 顏色；（它的值可以是英文名稱，也可以是拾色器擷取的顏色值）

 

size --- 字型大小大小；1-7級,最大是7；

 

face --- 字型設定；

 

 

 

 

 

《水平分割線標籤》

 

hr表示水平分割線，它是一個單標籤；<hr />

 

標籤屬性：

 

size --- 粗細大小； 沒有限制；

 

color --- 顏色

 

width --- 寬度；

 

align --- 水平對齊，它的值有三個：left center right 左中右 ；

 

 

 

注意事項：在html中，誰的屬性給誰寫，不能隨便加！ 標題和段落是接受align屬性的；

 

 

 

《body的屬性》

 

bgcolor --- 設定背景顏色；

 

background --- 設定背景圖片；

 

 

 

注意事項: 在web前端標準中，背景顏色永遠是在背景圖的下面；

 

 

 

《bui標籤和空格換行》

 

b --- 給文字加粗標籤

 

u --- 底線；

 

i --- 斜體；

 

 

 

<br /> 表示換列標籤； 快速鍵： shift+enter(斷行符號鍵)

 

 

 

表示空格的特殊字元:      快速鍵： ctrl+shift+space(空格鍵)

 

【圖片控制標籤】

 

圖片的控制是通過img標籤；

 

標籤屬性：

 

src --- 指定圖片的檔案路徑； （必備）

 

width --- 圖片寬度；

 

height --- 圖片高度；

 

 

 

border --- 邊框；

 

title --- 設定滑鼠移片顯示的提示文本（圖片的標題）；

 

alt -- 設定圖片不能正常顯示的替換文本；

 

 

 

設定圖片等比例縮放的方式： 寬度或高度只修改其中一個，另外一個讓電腦自動計算；

 

 

 

【列表標籤】

 

《無序列表》

 

無序列表基本結構: ul>li

 

ul 表示無序列表的整體； li 表示清單項目； ul的內部可以有無數個li;

 

 

 

修改列表的樣式是通過type屬性:

 

disc --- 小圓點（預設）

 

circle --- 小圓圈；

 

square --- 小矩形；

 

 

 

《有序列表》

 

有序列表的基本結構：

 

ol>li  

 

ol表示列表整體，li表示清單項目；

 

列表樣式值: 1，a，A，i，I

 

html基礎zs知識