search

Home >Web Front-end >HTML Tutorial >html basics set sail_html/css_WEB-ITnose

html basics set sail_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:371260browse

Without further ado, let’s go straight to examples!

To do a good job with a tool, you must first sharpen it

  1. Browser You must have it ~ For example: IE, Chrome, Firefox...
  2. Plain text editing software is indispensable~ For example: the simplest Notepad is enough
  • Open Notepad and enter the following sample code: 

    •  1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="big5"> 5 <title>背包客旅行札记</title> 6 </head> 7 <body> 8 <header id="header"> 9     <hgroup>10         <h1>背包客旅行札记</h1>11         <h4>旅行是一种休息，而休息是为了走更长远的路</h4>12     </hgroup>13     <nav>14         <ul>15             <li><a href="#">关于背包客</a></li>16             <li class="current-item"><a href="#">国内旅游</a></li>17             <li><a href="#">国外旅游</a></li>18             <li><a href="#">与我联络</a></li>19         </ul>20     </nav>21 </header>22 <article id="travel">23     <section>24         <h2>Hello World!</h2>25         <p>?四季都是适合旅行的季节。?</p>26         <p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>27     </section>28     <aside>29         <figure>30             <img src="photo.png" alt="?盯" />31         </figure>32     </aside>33 </article>34 <footer>35  HTML5网页练习 36 </footer>37 38 </body>39 </html>

  • Save, note the suffix is ​​htm
  • Preview HTML page

    • Open the browser, drag the file into the browser, and you can see the result, hoohoo!

    The sample web page is as follows:

    This seems not beautiful enough, adding CSS syntax will become like this:

    CSS It will be introduced later, but I will skip it here for now... 　　

    The code is only for reference: 

      1 <!DOCTYPE html>  2 <html>  3 <head>  4 <meta charset="big5">  5 <title>背包客旅行札记</title>  6 <style type="text/css">  7 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }  8 html {  9     background-color: #F1F0DF; 10 } 11 body { 12     border: 3px solid #660000; 13     background-color: #FFF; 14     font: 15px Helvetica, "??タ堵砰", Sans-Serif; 15     margin: 20px auto; 16     padding: 5px 10px; 17     width: 750px; 18 } 19 a { 20     color: #996600; 21     text-decoration: none; 22 } 23 h1, h2, h4 { 24     margin: 0; 25 } 26 a:hover { 27     color: #cc3300; 28 } 29 #header { 30     margin-bottom: 15px; 31 } 32 #header hgroup h4 { 33     font-style: italic; 34     font-weight: normal; 35     margin-bottom: 18px; 36     text-indent: 10px; 37 } 38 #header nav { 39     border-bottom: 1px solid #DDDCCC; 40     font-size: 16px; 41 } 42 #header nav ul { 43     overflow: hidden; 44     padding: 0 0 5px 0; 45     margin: 0; 46 } 47 #header nav li { 48     float: left; 49     list-style: none; 50     padding: 0 5px; 51 } 52 #header nav li.current-item a { 53     color: #765C07; 54 } 55 #travel { 56     overflow: hidden; 57     text-align: justify; 58 } 59 #travel section { 60     float: left; 61     width: 350px; 62 } 63 #travel aside { 64     margin-left: 400px;     65 } 66 #travel aside figure { 67     margin: 0; 68 } 69 footer { 70     margin: 15px 0 10px; 71     text-align: center; 72 } 73 </style> 74  75 <!--[if lte IE 8]> 76 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 77 <![endif]--> 78  79 </head> 80  81 <body> 82  83 <header id="header"> 84  85     <hgroup> 86         <h1>背包客旅行札记</h1> 87         <h4>旅行是一种休息，而休息是为了走更长远的路</h4> 88     </hgroup> 89  90     <nav> 91         <ul> 92             <li><a href="#">关于背包客</a></li> 93             <li class="current-item"><a href="#">国内旅游</a></li> 94             <li><a href="#">国外旅游</a></li> 95             <li><a href="#">与我联络</a></li> 96         </ul> 97     </nav> 98  99 </header>100 101 <article id="travel">102 103     <section>104         <h2>Hello World!</h2>105         <p>四季都是适合旅行的季节。</p>106         <p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>107     </section>108 109     <aside>110         <figure>111             <img src="photo.png" alt="?盯" />112         </figure>113     </aside>114 115 </article>116 117 <footer>118     HTML5网页练习119 </footer>120 121 </body>122 </html>

    Summary : This is just a simple example, designed to start my learning journey and put theory into practice. When I see the beautiful page displayed in front of my eyes, it is a great satisfaction! It's time to go read again, let's withdraw first...

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：HTML project code writing specifications_html/css_WEB-ITnoseNext article：HTML project code writing specifications_html/css_WEB-ITnose

    Related articles

    See more