简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 学习了HTML结构与标签的用法、网页的布局、图文方案
Blogger Information
Blog 7
fans 0
comment 0
visits 2287
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结构与标签的用法、网页的布局、图文方案
阿辉
Original
259 people have browsed it

作业/20230113

一、HTMl文档结构

  1. <!--文档类型-->
  2. <!DOCTYPE html>
  3. <!--html根元素，渲染起点入口-->
  4. <!--根据lang属性设置不同语言-->
  5. <html lang="zh-cn"> 
  6. <!--头元素-->
  7. <head>
  8.     <!--页面编码-->
  9.   <meta charset="UTF-8">
  10.   <!--设置兼容模式-->
  11.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.   <!--可视窗口代码-->
  13.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.   <!--网页的标题-->
  15.   <title>Document</title>
  16. </head>
  17. <!--页面主体-->
  18. <body>
  19.   <p>
  20.   内容
  21.   </p>
  22. </body>
  23. </html>

二、布局元素

  1. <div class="article header">标题</div>
  2. <p class="article main">内容</p>

三、图文语义化方案

  1. <figure>
  2. <a href="https://php.cn">
  3.   <img src="https://img.php.cn/xxx.png" alt="二十二期前端开发" />
  4. </a>
  5.   <figcaption>第二十二期前端开发</figcaption>
  6. </figure>

四、图像、链接、列表元素

  1. <!--1.图像-->
  2. <img src="https://xxxx.com/1.jpg" alt="xxx">
  3. <!--2.链接-->
  4. <a href="https://php.cn" target="_blank">php中文网</a>
  5. <!--3.列表、无序、有序-->
  6. <ul>
  7.     <li>无序列表</li>
  8. </ul>
  10. <ol>
  11.     <li>有序列表</li>
  12. </ol>

总结

通过本次学习了解了HTML的结构文档，标签div、img、p、a、ul、ol、dl+dt+dd标签
但是疑惑的是（演示布局元素,重点是 tag+class）不知道该如何演示它，能了解其中的意思

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！