课堂笔记之HTML标签 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

前言：刚开始学习，总结下一些常用标签

常见标签有：标题，列表，链接，多媒体，输入，选项，文本类

标题 h1~h6

  <h1></h1>

注意：<h1>这是顶级标题最好只使用一次

列表

• 有序列表：按数字排序

    <ol></ol>
  

• 无序列表：小圆点

    <ul></ul>
  

• py6列表：

    <dl> # 定义列表
        <dt></dt> # 标题
        <dd></dd> # 具体描述
    </dl>
  

链接

  <a href="http://www.baidu.com">百度</a>

可加入的属性：

 title="这是一个百度" # 表示当鼠标指针悬停在链接上时，标题将作为提示信息出现

  target="_blank" # 表示开启新窗口链接

多媒体

• 图片

    <img src=""/>
  

  属性：

   alt="Metal movable type" # 加载不出图片，显示文字
  

• 音频

  <audio src="" controls></audio>
  

• 视频

  <video src="" controls></video>
  

输入

<input placeholder="输入用户名"> # 占位符，没有输入时候默认显示
<input type="range"> # 范围
<input type="number" min="1" max="10"> # 指定最小值和最大值
<input type="data" min="2021-10-10"> # 日期
<textarea>hey</textarea> # 一个文本框

选项

• 单选

  <input type="radio" name="sport">
  <input type="radio" name="sport">
  

  互斥关系通过name达到，多个选项同一个名称

• 多选

  <input type="checkbox">
  

• 下拉选择

  <select>
      <option></option>
  </select>
  

• 自由输入 ：在一个输入框中给出预设词组

  列出一些提示
  <input list="countries" />
  <datalist id="countries">
      <option>Greece</option>
      <option>United Kingdom</option>
      <option>United States</option>
  </datalist>
  

文本类标签

• 段落

  <p>123</p>
  

• 引用

  • 快捷引用：表示引用文字来源与哪里

    <blockquote cite="链接">123</bockquote>
    

  • 短引用：

    cite：表示引用别人的作品或者章节

    q：表示引用到具体内容

    <cite>第一张</cite>
    <q>具体内容</q>
    

• 其他类型

  • code：引用一些关于代码的东西

    code引用之后字体会有一些变化

    • 单行

      <code>const</code>
      

    • 多行

      <pre>
          <code>
              int a = 10;
          </code>
      </pre>
      

  • 强调

    • strong：表示非常重要，严重紧急的事情

      <strong>风险评估</strong>
      

    • em：在一段话里需要重读的词语

       <em>重读</em>
      

\