認識HTML,html5

來源:互聯網
上載者:User

認識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

格式分析:

  • 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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.