简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html文档结构详解、html结构基础、html元素基础
Blogger Information
Blog 7
fans 0
comment 0
visits 2458
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文档结构详解、html结构基础、html元素基础
alex
Original
359 people have browsed it

1 写出html文档结构,并解释每个成员的功能与作用

  1. <!DOCTYPE html> 
  2. <!-- H5标准声明 -->
  3. <html lang="en">
  4.     <!-- 根元素 文档入口-->
  5. <head>
  6.     <!-- 头元素 -->
  7.     <meta charset="UTF-8">
  8.     <!-- 页面编码 -->
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <!-- 兼容模式 -->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.     <!-- 可视窗口设置 -->
  13.     <title>Document</title>
  14.     <!-- 页面标题 -->
  15. </head>
  16. <body>
  17. <!-- 页面主体 -->
  18. </body>
  19. </html>

2 演示布局元素,重点是 tag+class

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <h1 style="color: yellowgreen;">hello php中文网</h1>
  11.     <girl style="color: blueviolet;" >hi girl</girl>
  12. </body>
  13. </html>

3 演示图文的语义化解决方案

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <header style="color: aqua;">头部区域</header>
  11.     <main style="color: blue;">显示区</main>
  12.     <footer style="color: brown;">脚部区域</footer>
  13.     <figure>
  14.         <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="">
  15.         <figcaption>语义化图文</figcaption>
  16.     </figure>
  17. </body>
  18. </html>

4 演示图像,链接与列表元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <a href="http://bing.com">bing</a>
  11.     <br>
  12.     <a href="https://www.php.cn" target="_blank">php中文网</a>
  13.     <br>
  14.     <img src="https://img.php.cn/upload/article/000/000/001/631713fe824fc974.png" alt="" width="180px" >
  15.     <br>
  16.     <ul>
  17.         <li>item1</li>
  18.         <li>item2</li>
  19.         <li>item3</li>
  20.         <li>item4</li>
  21.         <li>item5</li>
  22.     </ul>
  23.     <ol>
  24.         <li>nihao1</li>
  25.         <li>nihao2</li>
  26.         <li>nihao3</li>
  27.         <li>nihao4</li>
  28.         <li>nihao5</li>
  29.     </ol>
  30. </body>
  31. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的不错，坚持下去，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！