简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 入门HTML (一)html文档结构，布局元素，图文的语义化解决方案等
Blogger Information
Blog 3
fans 0
comment 0
visits 1074
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文档结构，布局元素，图文的语义化解决方案等
良药
Original
362 people have browsed it

入门HTML（一）

内容

  • html文档结构
  • 演示布局元素,重点是 tag+class
  • 演示图文的语义化解决方案
  • 演示图像,链接与列表元素

    一、HTML文档包含文档类型元素、根元素、头元素、页面主题

  1. <!-- 1. 文档类型元素 -->
  2. <!DOCTYPE html>
  3. <!-- 2. 根元素: 浏览器渲染html的起点,入口 -->
  4. <!-- 键(lang),值(zh-CN)，是语言是中文的意思 -->
  5. <html lang="zh-CN">
  6.   <!-- 2.1 头元素: 浏览器, 搜索引擎SEO-->
  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>html结构</title>
  17.     <!-- 页面主体 -->
  18.     <body>
  20.       <h1>这是大标题的样式</h1>
  22.     </body>
  23.   </head>
  24. </html>

二、布局元素

tag + class 目前是主流

布局一般包含页眉、正文和页脚三个板块
页眉一般使用header、正文一般使用main、页脚一般使用footer表示

  1. <!-- 传统 div + id -->
  2. <div id="header">页眉</div>
  3. <div id="main">主体</div>
  4. <div id="footer">页脚</div>
  5. <!-- # : 表示 id，输入div#header{页头} 后按Tab键-->
  6. <!-- 得到<div id="header">页头</div> -->
  9. <!-- 语义化 -->
  10. <header>页眉</header>
  11. <main>主体</main>
  12. <footer>页脚</footer>
  13. <!-- 标签权重更低更好,一目了然,直观 -->

<!-- 但ID的唯一性不能被浏览器保证，只能由自己来保证，权重过高。 而且语义化标签,数量有限,且会导致元素的层级过深 --> 

  1. <!-- 优化: 但 tag + class 目前是主流 -->
  2. <div class="header">页眉</div>
  3. <div class="main">主体</div>
  4. <div class="footer">页脚</div>
  6. <!-- emmet: . 表示class，默认标签就是div,可不写  -->
  7. <!-- .header{页头} -->
  8. <!-- <div class="header">xxxx</div> -->
  9. <!-- class权重要小于id -->

三、图文的语义化解决方案

演示图文一般包含两种解决方案，一种是利用div的传统标签，另一种是使用figure语义化标签，figure可创建带标题的内容，而div操作起来比较麻烦

  1. <!-- 语义化 -->
  2. <!-- figure: 创建带有标题的内容 -->
  3. <figure>
  4.   <!-- 图片 -->
  5.   <a href="">
  6.     <img src="https://img.php.cn/upload/course/000/000/068/6396fa6140e14800.png" alt="" />
  7.   </a>
  8.   <!-- 文字 -->
  9.   <figcaption>第二十二期</figcaption>
  10. </figure>

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

4.1插入图像

  1. <img src="图像地址" alt="图像的名称" width="图像的宽度" />

4.2插入链接

  1. <a href="链接地址" target="打开窗口的方式">链接文本</a>
  3. <!--提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 如图像链接，锚点链接，空链接，图像热区链接，E-mail链接，JavaScript链接等-->
  5. <!--通过按钮访问-->
  6. <a href="链接地址" target="_blank">
  7.   <button>按钮文本</button>
  8. </a>
  10. <!--通过图片点击-->
  11. <a a href="链接地址" target="_blank">
  12.   <img src="图像地址" alt="图像名称"/>/a>

4.3 列表元素

HTML 支持有序、无序和自定义列表。

  • 有序列表
  1.     <!-- 有序 ol+li -->
  2.     <ol>
  3.       <li>列表1</li>
  4.       <li>列表2</li>
  5.       <li>列表3</li>
  6.     </ol>
  • 无序列表
  1.     <!-- 无序 ul+li  -->
  2.     <ul>
  3.       <li>列表1</li>
  4.       <li>列表2</li>
  5.       <li>列表3</li>
  6.     </ul>
  • 自定义列表
  1. <!-- 自定义列表: 由dl、dt、dd三部分组成，一般用在多级菜单, 友情链接, 关于我们等方向 -->
  2. <dl>
  3.   <!-- 标题 -->
  4.   <dt>第一课</dt>
  5.   <!-- 内容描述 -->
  6.   <dd>结构化标记语言</dd>
  7. </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！