入门HTML（一）

内容

html文档结构
演示布局元素,重点是 tag+class
演示图文的语义化解决方案
演示图像,链接与列表元素
一、HTML文档包含文档类型元素、根元素、头元素、页面主题

<!-- 1. 文档类型元素 -->
<!DOCTYPE html>
<!-- 2. 根元素: 浏览器渲染html的起点,入口 -->
<!-- 键(lang),值(zh-CN)，是语言是中文的意思 -->
<html lang="zh-CN">
  <!-- 2.1 头元素: 浏览器, 搜索引擎SEO-->
  <head>
    <!-- 页面编码 -->
    <meta charset="utf-8" />
    <!-- 适配的网页浏览器版本-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口设置: 视口(可视窗口)-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- 页面标题 -->
    <title>html结构</title>
    <!-- 页面主体 -->
    <body>
      <h1>这是大标题的样式</h1>
    </body>
  </head>
</html>

二、布局元素

tag + class 目前是主流

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

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

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

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

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

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

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

4.1插入图像

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

4.2插入链接

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

4.3 列表元素

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

有序列表

    <!-- 有序 ol+li -->
    <ol>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ol>

无序列表

    <!-- 无序 ul+li  -->
    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <li>列表3</li>
    </ul>

自定义列表

<!-- 自定义列表: 由dl、dt、dd三部分组成，一般用在多级菜单, 友情链接, 关于我们等方向 -->
<dl>
  <!-- 标题 -->
  <dt>第一课</dt>
  <!-- 内容描述 -->
  <dd>结构化标记语言</dd>
</dl>

入门HTML (一)html文档结构，布局元素，图文的语义化解决方案等