博主信息
博文 3
粉丝 0
评论 0
访问量 2356
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
入门HTML (一)html文档结构,布局元素,图文的语义化解决方案等
良药
原创
1033人浏览过

入门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>
  16. <!-- 页面主体 -->
  17. <body>
  18. <h1>这是大标题的样式</h1>
  19. </body>
  20. </head>
  21. </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> -->
  7. <!-- 语义化 -->
  8. <header>页眉</header>
  9. <main>主体</main>
  10. <footer>页脚</footer>
  11. <!-- 标签权重更低更好,一目了然,直观 -->

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

  1. <!-- 优化: 但 tag + class 目前是主流 -->
  2. <div class="header">页眉</div>
  3. <div class="main">主体</div>
  4. <div class="footer">页脚</div>
  5. <!-- emmet: . 表示class,默认标签就是div,可不写 -->
  6. <!-- .header{页头} -->
  7. <!-- <div class="header">xxxx</div> -->
  8. <!-- 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>
  2. <!--提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 如图像链接,锚点链接,空链接,图像热区链接,E-mail链接,JavaScript链接等-->
  3. <!--通过按钮访问-->
  4. <a href="链接地址" target="_blank">
  5. <button>按钮文本</button>
  6. </a>
  7. <!--通过图片点击-->
  8. <a a href="链接地址" target="_blank">
  9. <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>
批改老师:PHPzPHPz

批改状态:合格

老师批语:完成的不错,整理排版看上去很舒服,继续加油
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学