前端与HTML（下） ｜ 青训营

用户3580340922851
76 阅读3分钟

知识点梳理

DOM树

  • 解析HTML代码，生成DOM树结构。

  • DOM树是树形结构，包含根节点（document）以及各种元素节点。

  • HTML代码的结构映射到DOM树中，包括html、head、body等标签和内容。

HTML语法

  • 标签不区分大小写，推荐使用小写，但自定义组件常用大写（如React）。

  • 空标签（如img、input、meta）可省略结束标签，或在开始标签最后加斜杠。

  • 属性值用双引号包裹，有些属性可省略值，如输入框的"required"属性。

标题

  • 标题标签有H1到H6六个级别，表示不同标题级别。

  • 默认样式中，H1最大，H6最小。

  • 浏览器内置样式会简单排版标题。

列表

  • 有序列表用<ol>表示，每项用<li>表示，有顺序。

  • 无序列表用<ul>表示，每项用<li>表示，顺序不重要。

  • 定义列表用<dl>表示，每个条目用<dt>表示标题，用<dd>表示具体描述，多对多。

链接

  • 互联网实现互联互通，通过链接（超链接）跳转到其他页面。

  • 使用<a>标签表示链接，即"anchor"的缩写，属性中最重要的是href（Hyper Reference）。

  • href属性指定链接的目标地址，点击后进行页面跳转。

  • 使用target属性控制链接的打开方式，如在新窗口中打开。

多媒体

  • 图像使用<img>标签，可以加上alt属性提供替代文本以处理加载失败等情况。

  • 音频和视频使用<audio>和<video>标签，可以添加controls属性以显示默认的播放控件。

表单

  • 表单元素用于用户输入和选择数据。

  • 基本的输入框使用<input>标签，可以添加placeholder属性作为输入框的占位文本。

  • 不同的type属性可以创建不同类型的输入框，如文本、范围、数字等。

  • 使用<input type="range">表示范围输入，<input type="number">表示数字输入。

  • 日期选择使用<input type="date">，这些输入可以带有最小值和最大值等限制。

  • 使用箭头按钮可以增加或减少数值，比如<input type="number" step="1">。

  • 单选和多选选项使用<input type="radio">和<input type="checkbox">，通过name属性进行分组。

  • 使用<select>标签创建下拉选择框，内部使用<option>标签定义选项。

  • 可以使用<input list>结合<datalist>来提供输入提示和自动补全功能。

代码示例

<!DOCTYPE html>
<html>
<head>
  <title>标题、列表、链接、多媒体和表单示例</title>
</head>
<body>
  <!-- 标题示例 -->
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

  <!-- 有序列表示例 -->
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ol>

  <!-- 无序列表示例 -->
  <ul>
    <li>项目A</li>
    <li>项目B</li>
    <li>项目C</li>
  </ul>

  <!-- 定义列表示例 -->
  <dl>
    <dt>标题1</dt>
    <dd>描述1</dd>
    <dt>标题2</dt>
    <dd>描述2</dd>
  </dl>

  <!-- 链接示例 -->
  <a href="https://www.example.com">前往示例网站</a>

  <!-- 图像示例 -->
  <img src="example.jpg" alt="示例图片">

  <!-- 音频示例 -->
  <audio controls>
    <source src="example.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
  </audio>

  <!-- 视频示例 -->
  <video controls>
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持视频播放。
  </video>

  <!-- 表单示例 -->
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <br>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="0" max="120" step="1">
    <br>
    <label>性别：</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <br>
    <label for="country">国家：</label>
    <select id="country" name="country">
      <option value="china">中国</option>
      <option value="usa">美国</option>
      <option value="uk">英国</option>
    </select>
    <br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

理解感受

HTML作为构建网页的基础语言，通过标签和属性的组合，实现了丰富多样的内容展示和交互功能。通过标签的嵌套和属性的设定，能够清晰地描述出网页的结构和内容组织，使得页面的各个元素有了有序的排列和层次感。

avatar
文章
阅读
粉丝