HTML的文件結構與語法
一、走進Web開發
Web執行的原理:
二、HTML
1.1什麼是html
HTML是用來描述網頁的一種語言
HTML指的是超文字標記語言(Hyper Text Markup Language)
超文字就是網頁上不光有文字,還有圖片,音樂,視訊等
標記語言是一套標記標籤(markup tag) div,span,font,i等標記
HTML使用標記標籤來描述網頁
HTML文件包含了HTMl標籤及文字內容
HTML文件也叫WEB頁面
HTML的主要目的:通過一系列標籤,來顯示網頁的不同效果,不同部分
2.html的核心標記
2.1 html的文件結構
2.2 html的註釋
<!--註釋內容-->
2.3 程式碼的規範
HTML標記不分大小寫,建議小寫。如:<font>,<Font>,<fOnt>
HTML標記屬性可有可無,有的標記沒有屬性。如:<html>,<head>,<title>等
雙標籤的內容在開始和結束標籤之前,單標籤沒有內容
HTML標籤可以互相巢狀,但一定要注意順序巢狀,外層套內層,一層套一層
2.4 標記分類
單標記:標記只有一個,不是修飾內容的而是顯示某個功能的,如果有圖片,設定編碼,設定關鍵字等。
語法: <標記名稱 屬性=”值” 屬性2=”值2”/>
例: <img src=”圖片在伺服器的地址,碟符/資料夾/檔名”/>
<ing src=”d:/php07/images/01.jpg”/>
雙標記:是修飾內容的標記,有開始有結束標記,中間要寫修飾內容。
語法:<標記名稱 屬性=”值”>要修飾的內容</標記名稱>
例: <div>內容</div><font color=”red”>文字</font>
2.5 body的屬性
Bgcolor:背景的顏色 例:<body bgcolor=”顏色”>
顏色:十六進位制、單詞、rgb方式
<body bgcolor=”green”> (單詞)
<body bgcolor=”#ba06be” (十六進位制,由0~f字元組成的六個字元)
<body bgcolor=”rgb(0,0,0) (rgb,三原色,從0-255組合)
Background:背景圖片 例:<body background=”圖片的地址”>
用background設定的圖片必須與背景相同大小
2.6 文字修飾標記
<font></font>:文字的修飾 例:<font>文字</font>
Font的標記屬性:
Color:文字的顏色 值:顏色
Size:文字的大小 值:1~6
<i></i>: 斜體
<b></b>: 加粗
<u></u>: 下劃線
<s></s>: 刪除線
<sub></sub>: 下標
<sup></sup>: 上標
2.7 排版標記
<br>:換行,在需要換行的標記後面新增br標記就可以了。
<hr>:水平線
Hr常用的屬性
Size:粗細 值:1~100
Color:顏色 值:顏色
Width:寬度 值:數值(固定)或百分比(根據瀏覽器視窗大小自動調整) 百分比一般用於響應式網站開發。
<h1>~<h6>標題標記:--->自動換行和加粗
<p></p>:段落標記
<pre></pre>:預排班標記--->程式碼怎麼寫,顯示出來就是一樣的。
2.8 div和span標記
div:是雙標記,沒有任何意義的塊元素,用的最多和css配合使用,一般為“div+css”
語法:<div>任何元素</div>
span:是雙標籤,沒有任何意義的行內元素,用的最多和css配合使用。
語法:<span>要放入的元素</span>
塊元素:不管內容有多少,都會佔整個瀏覽器的一行,一般都是用塊元素佈局
行內元素:內容多少就佔多少,一般都是行內元素巢狀到塊元素中
例:<div>我是<font color="red">div</font></div>
3.0 無序列表
語法:<ul>
<li></li>
<li></li>
<ul>
屬性:type 值型別:diss square circle
3.1 無序列表
語法:<ol>
<li></li>
<li></li>
</ol>
屬性:type :A,a,i,I,1
static:數值
例:<ol type="a" static="3">
3.2 圖片標記
語法:<img 屬性="值" 屬性="值" 屬性="值"/>
常用屬性:
src:圖片的地址
Alt:來代替圖片沒有顯示時的描述
width:圖片的寬度
Height:圖片的高度
border:圖片的邊框
Align:圖片的對其方式
Hspace:圖片與文字的左右距離
Vspace:圖片與文字的上下距離
3.3 圖片的熱點
功能:在圖片中新增可以點選的連結
Rect:矩形 座標:右上角,左下角
circle:圓形 座標:中心點和座標半徑
poly:多邊形 座標:每兩個數字為一點
Href:跳轉的地址
Target:開啟新連結的方式 值:_blank 新視窗 _self原視窗 _parent父視窗 _top頂級視窗
3.5 滾動標記
語法:<marquee>要滾動的元素</marquee>
常用屬性:
Direction:滾動的方向
width:滾動寬度
height:滾動高度
Bgcolor:背景顏色
Scrollamount:滾動步長值,值越大,滾動越快
Scrolldelay:兩步的停留時間,以毫秒為單位,一秒=1000毫秒
Loop:滾動的次數
3.6 多媒體標記
語法:<embed></embed>
常用的屬性:
src:多媒體地址 值:路徑
width:調整多媒體寬度 值:數字
height:調整高度 值:數字