Without further ado, let’s go straight to examples!
To do a good job with a tool, you must first sharpen it
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>
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...
Solution to socket error 10054
What should I do if chaturbate is stuck?
Introduction to the main work content of the backend
Commonly used mysql management tools
What are the methods to implement operator overloading in Go language?
informix function usage
Which mobile phones does Hongmeng OS support?
Characteristics of the network
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
