简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML页面的基本构成
Blogger Information
Blog 37
fans 0
comment 1
visits 28408
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页面的基本构成
kong
Original
290 people have browsed it

HTML

Web 开发者指南：https://developer.mozilla.org/zh-CN/docs/Web

HTML 结构

  1. <!-- DOCTYPE文档类型 结构是html-->
  2. <!DOCTYPE html>
  3. <!-- 根元素html标签 lang语言 zh-CN 中文 en英文-->
  4. <html lang="zh-CN">
  5.   <!-- html 根元素只有两个子元素 head,body -->
  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>标题</title>
  14. </html>
  1. 1. 元素：demo 2. 标签 '
  2. <div>
  3.   ' 3. 属性 class id style 通用属性浏览器内置样式
  4.   <div class="box" id="box" style="color: darkblue;">demo</div>
  5. </div>

布局元素

  1. <!-- 使用主流写法 div + class-->
  2. <div class="header">页眉</div>
  3. <div class="main">主体</div>
  4. <div class="footer">页脚</div>

图文语义化

  1. <figure>
  2.   <!-- 图文 -->
  3.   <img
  4.     src="https://img.php.cn/upload/aroundimg/000/000/001/62fdcfb67b3b8383.png"
  5.     alt=""
  6.   />
  7.   <!-- 标题 -->
  8.   <figcaption>大前端开发课程</figcaption>
  9. </figure>

图像,链接与列表元素

  1. <!-- 图像 -->
  2. <img
  3.   src="https://img.php.cn/upload/aroundimg/000/000/001/62fdcfb67b3b8383.png"
  4.   alt=""
  5. />
  6. <!-- 链接 -->
  7. <!-- 
  8.         可以是文字 图片 按钮 等等...
  9.         _blank:新窗口 
  10.     -->
  11. <a target="_blank" href="https://baidu.com">百度一下</a>
  13. <!-- 列表 -->
  14. <!-- ul: 无序列表 比较常用-->
  15. <ul>
  16.   <li>1</li>
  17.   <li>2</li>
  18.   <li>3</li>
  19. </ul>
  21. <!-- 有序列表 -->
  22. <ol>
  23.   <li>1</li>
  24.   <li>2</li>
  25.   <li>3</li>
  26. </ol>
  27. <!-- 自定义列表  多级菜单，友情链接，关于我们信息-->
  28. <dl>
  29.   <dt>标题</dt>
  30.   <dd>文字</dd>
  31. </dl>
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！