Blogger Information
Blog 11
fans 0
comment 0
visits 4690
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文档结构与布局元素图文链接的介绍
昊森
Original
305 people have browsed it

0113作业

HTML文档结构

  1. <!-- 表达文档类型为:html -->
  2. <!DOCTYPE html>
  3. <!-- 文件起点,浏览器渲染根元素 -->
  4. <!-- lang表示当前页面的语言,en为英文 zh-CN代表中文 -->
  5. <!-- 根元素只有两个子元素,分别为head和body -->
  6. <html lang="zh-CN">
  7. <!-- 头元素 内容利于seo优化-->
  8. <head>
  9. <!-- 元标签,描述其他元素,他是一个单标签 -->
  10. <!-- UTF-8为当前页面字符集编码 -->
  11. <meta charset="UTF-8" />
  12. <!-- 兼容模式,兼容IE浏览器 -->
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  14. <!-- 视口设置用户可视化窗口 -->
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  16. <!-- 页面标题 -->
  17. <title>Document</title>
  18. </head>
  19. <!-- 页面主体,用户可看内容 -->
  20. <body>
  21. </body>
  22. </html>

布局元素的演示

  1. <!-- 布局元素为标签+class常用 -->
  2. <!--布局元素也可以使用w3c优化的-->
  3. <!--但是这样的内容会容易造成页面混乱,对用户和seo好点,但对开发者来说很容易分不清,但是也可以使用,看个人实际开发需求-->
  4. <header>页头</header>
  5. <main>内容</main>
  6. <footer>页脚</footer>
  7. <div class="zidingyi">内容</div>

图文与链接的跳转及使用方法

  1. <!-- 图像与链接的显示方式 -->
  2. <!-- 这个是图片显示 -->
  3. <img
  4. src="https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png"
  5. alt=""
  6. />
  7. <!-- 链接跳转方式 -->
  8. <a href="https://php.cn">点我跳转php中文网</a>
  9. <!-- 点击图片跳转到php中文网 -->
  10. <a href="https://php.cn"><img src="https://img.php.cn/upload/aroundimg/000/000/001/63997a4d5d9fd596.png"alt=""/></a>
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