使用工具:Sublime text 編輯器
自學(xué)網(wǎng)站:http://edu.zzfriend.com/html/html5-browsers.html
1.固定格式:
<!doctype html> <!--必須要寫的-->
<html><!--必須要寫的-->
<head><!--聲明html的頭文件,關(guān)聯(lián)css,java的文件。-->
<meta charset=”UTF-8”> <!--聲明中文顯示,以后關(guān)聯(lián)文件也在這里面寫-->
</head>
<body>
</body> <!--包含h5內(nèi)容, 具體標(biāo)簽,段落在此設(shè)置。-->
</html><!--除了doctype外,其余所有<>開始,必須已<!>結(jié)束,固定格式-->
2.顯示H5頁面
了解了h5基礎(chǔ)設(shè)置可以進(jìn)行顯示我們的第一次做的h5了。
試著輸出一句hello word。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>這是一個(gè)標(biāo)題,不會(huì)顯示在頁面上 </title>
</head>
<body>
<h1>hello word </h1>
<h2>再來一個(gè)標(biāo)題 </h2>
<h3>哈哈,可以一直這樣設(shè)置下去 </h3>
<p>再來一個(gè)段落顯示一下</p>
</body>
</html>
h5通過h1---hn來設(shè)置標(biāo)題 進(jìn)行顯示,<h1></h1>為標(biāo)題顯示,<p></p>為段落設(shè)置顯示。這樣就能顯示一個(gè)h5頁面了。
3.添加超鏈接
<a >打開個(gè)百度看看</a>
<a></a>添加超鏈接
4.設(shè)置字體大小顏色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 style="background-color:red">在Mac文本編輯器上試試</h1>
<p style="font-family:arial;color:brown;font-size:10px;">看看好使不
<br>演示一下分行效果<br>
</p>
<p style="text-align:center">再來一段<p>
<p>哈哈哈<p>
<img src="image/fenlei.png" alt="分類" width="74" height="74">
<a >打開個(gè)百度看看</a><!----- 寫個(gè)注釋看看-------->
</body>
</html>
style 為樣式設(shè)置,固定格式記住就行。
</br>為分行設(shè)置,添加在標(biāo)簽中間。
<img src="image/fenlei.png" alt="分類" width="74" htight="74">
添加圖片,fen lei.png為圖片在工程目錄中的名字。alt:當(dāng)圖片加載失敗時(shí)顯示的提示文字。width為圖片寬度,height為圖片高度。