認識HTML,html5
基本架構:
1 <html> 2 <head> 3 <title>This Is Title</title> 4 </head> 5 6 <body> 7 <h1><!--一級標題--></h1> 8 <h2><!--二級標題--></h2> 9 <p>10 <!--段落-->11 </p>12 </body>13 </html>
注釋:
- <html>和</html>告訴瀏覽器檔案的內容是HTML
- 被<head>和</head>包圍的首部(head)告訴瀏覽器關於web頁面的資訊
- head標記中放入title標記,title出現在瀏覽器視窗
- 頁面的主體包括<body>和<body>標記以及他們之間的所有內容,是瀏覽器中看到的部分
- 元素 = 開始標記 + 內容 + 結束標記
style,CSS
1 <head> 2 <title>This Is Title</title> 3 4 <style type="text/css"> 5 body{ 6 background-color: #eaf; 7 margin-left: 20%; 8 margin-right: 20%; 9 border: 2px dotted black;10 padding: 10px 10px 10px 10px;11 font-family: sans-serif;12 }13 </style>14 </head>
注釋:
- style指定樣式為CSS
- background-color :背景色
- margin-left,margin-right:左右外邊距分別占頁面的20%
- border:頁面周圍邊框為虛線,顏色為黑色
- padding:在頁面主體周圍建立一些內邊距
- font-family:定義文本使用的字型
HT(hypertext)
1 <a href = "beverages/elixir.html" > elixirs </a>2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>3 <a href = "../index.html" > RETURN </a>4 <a target = "_blank" href="beverages/elixir.html"> <img src="images/j.png"> </a>
注釋:
- 使用<a>從一個頁面連結到另一個頁面
- <a>的屬性指定了連結的目標檔案
- <a>元素的內容是連結的標籤。預設的,這個標籤有底線,指示可以單擊的
- 文字和映像都可以用作連結的標籤
- 使用“..”可以連結到源檔案的上一層檔案夾的一個檔案,".."代表父資料夾。
- “/”用來分隔路徑的映像
示圖:
<p>,<blockquot><br>
1 <blockquote>2 Passing cars, <br>3 when you can't see, <br>4 A glimpse, <br>5 </blockquote>6 7 <p>8 <q> passing car </q>,when you can't see.9 </p>
注釋:
- <q>:雙引號,短引號,作為現有段落的一部分
- <blockquote>:較長引用,單獨顯示,為塊元素
- <br>:分行符號
<ol>,<ul>,<li>
1 <ol> 2 <li> one </li> 3 <li> two </li> 4 <li> three </li> 5 <li> four thing 6 <ul> 7 <li> one </li> 8 <li> two </li> 9 <li> three </li>10 </ul>11 </li>12 </ol>
注釋:
- <ol>:ordered list 有序
- <ul> : unordered list 無序
- <li> : 用來標識每個元素
- <ol>和<li> 或者 <ul>和<li>總是要一起使用
URL
1 URL: 2 http://www.cnblogs.com/JJ-kelion/ 3 4 <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a> 5 6 <!--為標題的開始增加標記--> 7 <h2 id="chai"> Chai Tea </h2> 8 <!--用可用ID連結到元素--> 9 <a href="top.html/#chai" title="read chai"> Chai tea </a>10 <!--開啟新視窗-->11 <a target="_blank" href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>
注釋:
- URL:網域名稱,用來唯一標識網站
- 為了便於訪問,在<a>元素中使用title元素
- 使用target屬性在另一個瀏覽器視窗中開啟連結。
使用映像:
幕後步驟:
常用圖片格式:
格式分析:
- JPEG:適合連續色調影像,可以表示千萬種顏色,有損格式,不支援透明和動畫
- PNG:適合單色和線條構成圖,是一種無損格式,允許透明,
- GIF:最適合單色圖和線條圖,最多256種顏色,支援透明,無損格式,支援動畫。
總結:
- JPEG和PNG擅長表示logo和文本映像;
- JPEG擅長照片
- 需要透明和多種顏色:選擇PNG
<img>
1 <img src="images/jj.png">
2 <img src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg">
3 <img src="images/jj.png" alt="a picture">
4 <img src="images/jj.png" width="48" height="10">
<!--使用縮圖-->5 <a href="big picture"> <img src="small picture" alt="a picture"> </a>
注釋:
- src不只是用於相對連結,還可以放入URL
- 相同網站上的連結和映像,最好使用相對連結
- 如果映像未能顯示,就會用alt屬性指定的描述映像的文本代替映像
建立縮圖步驟:
HTML5
指南:
- <!doctype html> 首行
- alt屬性為必要的
- 指定字元編碼,在<head>首部中的首行,<meta charset = "utf-8">
- 驗證代碼工具:http://validator.w3.org