HTML

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

HTML 结构

<!-- DOCTYPE文档类型 结构是html-->
<!DOCTYPE html>
<!-- 根元素html标签 lang语言 zh-CN 中文 en英文-->
<html lang="zh-CN">
  <!-- html 根元素只有两个子元素 head,body -->
  <!-- 页面编码 -->
  <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>标题</title>
</html>

1. 元素：demo 2. 标签 '
<div>
  ' 3. 属性 class id style 通用属性浏览器内置样式
  <div class="box" id="box" style="color: darkblue;">demo</div>
</div>

布局元素

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

图文语义化

<figure>
  <!-- 图文 -->
  <img
    src="https://img.php.cn/upload/aroundimg/000/000/001/62fdcfb67b3b8383.png"
    alt=""
  />
  <!-- 标题 -->
  <figcaption>大前端开发课程</figcaption>
</figure>

图像,链接与列表元素

<!-- 图像 -->
<img
  src="https://img.php.cn/upload/aroundimg/000/000/001/62fdcfb67b3b8383.png"
  alt=""
/>
<!-- 链接 -->
<!-- 
        可以是文字 图片 按钮 等等...
        _blank:新窗口 
    -->
<a target="_blank" href="https://baidu.com">百度一下</a>
<!-- 列表 -->
<!-- ul: 无序列表 比较常用-->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>
<!-- 自定义列表  多级菜单，友情链接，关于我们信息-->
<dl>
  <dt>标题</dt>
  <dd>文字</dd>
</dl>

HTML页面的基本构成

HTML

HTML 结构

布局元素

图文语义化

图像,链接与列表元素

相关文章