HTML基础知识——学习记录

Jayson
2022-10-24 / / 8 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年10月24日,已超过38天没有更新,若内容或图片失效,请留言反馈。

标题标签

  • 场景:在文章页面中,都离不开标题,用来突出显示文章的主题
  • 代码:h系列标签
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
  • 语义:1~6级标题,重要程度依次递减
  • 特点:

    • 文字加粗
    • 文字变大,h1->h6文字逐渐减小
    • 独占一行

段落标签

  • 场景:在文章页面中,用于分段显示
  • 代码: <p>内容</p>
  • 语义:段落
  • 特点:

    • 段落之间存在间隙
    • 独占一行


换行标签

  • 场景:让文字强制换行显示
  • 代码: <br>
  • 语义:换行
  • 特点:

    • 单标签
    • 让文字强制换行

文本格式化标签

  • 场景:需要让文字加粗,下划线,倾斜,删除线等效果
  • 代码:
    |标签|详细名称|说明|
bstrong加粗
uins下划线
iem倾斜
sdel删除线
  • 语义:突出重要性强调语境


图片标签

  • -场景:在网页中显示图片
  • 代码: <img src="" alt="">
  • 特点:

    • 单标签
    • img标签需要展示对应的效果,需要借助标签的属性进行设置
    • 属性
      |属性|说明|
alt单图片加载失败显示alt内容
title当鼠标停留在图片时,才会显示title的内容(可用于其他标签)
width/height图片的宽度和高度,当只设置一项的时候,图片会等比例缩放


水平线标签

  • 场景:分割不同主题内容的水平线
  • 代码: <hr>
  • 语义:主题的分割转换
  • 特点:

    • 单标签
    • 在页面中显示一条水平线


音频标签介绍

  • 场景 在页面插入音频
  • 代码 <audio src="music.mp3" controls></audio>
  • 属性
    |属性名|功能|
src音频的路径
controls显示播放的控件
autoplay自动播放(部分浏览器不支持)
loop循环播放
  • 注意:
    视频标签目前支持三种格式:MP3,Wav,Ogg


视频标签介绍

  • 场景 在页面插入音频
  • 代码 <video src="music.mp4" controls></video>
  • 属性
    |属性名|功能|
src音频的路径
controls显示播放的控件
autoplay自动播放(谷歌浏览器支持需要配置muted)
loop循环播放
  • 注意:
    视频标签目前支持三种格式:MP4,WebM,Ogg

超链接

  1. 场景 点击之后,从一个页面跳到另一个页面
  2. 代码 <a href="目标网页">名字</a>
  3. 特点:
  4. 双标签,内部可以包裹内容
  5. 如果需要a标签点击后去指定页面,需要设置a标签的href属性
  6. 属性
    属性名:target

属性值:目标网页的打开方式

取值功能
_self默认值,在当前窗口中跳转(覆盖原网页)
_blank在新窗口中跳转(保留原网页)

代码:<a href="#" target="_blank">JaysonBLog</a>


列表标签

无序列表

  • 场景:
    在网页中表示一组无顺序的列表
  • 代码:
<ul>
    <li>内容</li>
</ul>
  • 标签组成:
    |标签名|说明|
ul表示无序列表的整体,用于包裹li标签
li表示无序标签的每一项,用于包含每一行的内容
  • 显示特点:
    • 列表的每一项前默认显示圆点
  • 注意点:
    • url标签中只允许包含li标签
    • li标签可以包含任意内容


有序列表

  • 场景:

    • 在网页中表示一组有顺序的列表
  • 代码:
<ol>
    <li>内容</li>
</ol>
  • 标签组成:
    |标签名|说明|
ol表示有序列表的整体,用于包裹li标签
li表示有序列表的每一项,用于包含每一项的内容
  • 显示特点:
    • 列表的每一项前默认显示圆点
  • 注意点:
    • url标签中只允许包含li标签
    • li标签可以包含任意内容


自定义列表

  • 场景:

    • 在网页的底部导航中通常会使用自定义列表
  • 代码:
<dl>
    <dt>主题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
</dl>
  • 标签组成:
    |标签名|说明|
dl表示自定义列表的整体,用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容
  • 显示特点:
    • dd前会默认缩进效果
    </li>
    
    <li>注意点:
        <ul>
            <li>dl标签中只允许包含dt/dd标签</li>
            <li>dt标签可以包含任意内容</li>
        </ul>
    </li>


    表格标签

    • 场景:在网页中以行+列表的单元格的方式整齐展示和数据
    • 代码:
    <table>
        <tr>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
        </tr>
    
    </table>
    • 基本标签:
      |标签名|说明|
    table表格整体,可用于包裹多个tr
    tr表格每行,可用于包裹td
    td表格单元格,可用于包裹内容

    <dl>
    <dt>注意点:</dt>
    <dd>标签的嵌套关系:table > tr > td <dd>
    </dl>


    表格属性

    • 场景:设置表格基本展示效果
    • 常见相关属性:
    • 代码:<table border="2" width="300" height="200">
      |属性名|属性值|效果|
    border数字边框宽度
    width数字表格宽度
    height数字表格高度

    <dl>
    <dt>注意点:</dt>
    <dd>实际开发时针对样式效果推荐用css设置<dd>
    </dl>


    表格标题和表头单元格标签

    • 场景:在表格中表示整体大标题和小一列小标题
    • 代码:
    <table>
        <caption>表格标题</caption>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
    </table>
    • 其他标签:
      |标签名|名称|说明|
    caption表格大标题表示表格整体大标题,默认在表格整体顶部居中位置显示
    th表头单元格表示一列小标题,通常用于表格的第一行,默认内部文字加粗并居中

    <dl>
    <dt>注意点:</dt>
    <dd>caption标签书写在table标签内部<dd>
    <dd>th标签书写在tr标签内部<dd>
    </dl>


    表格的结构标签(了解)

    • 场景:让表格的内容结构分组,突出表格的不同部分(头部,主体,底部),使语义更加清晰
    • 结构标签
      |标签名|名称|
    thead表格头部
    tbody表格主体
    tfoot表格底部

    <dl>
    <dt>注意点:</dt>
    <dd>表格结构标签内部用于包裹tr标签<dd>
    <dd>表格结构标签可以省略<dd>
    </dl>


    合并单元格-代码实现

    • 合并步骤:
    1. 明确合并哪几个单元格
    2. 通过左上原则,确定保留谁删除谁

      • 上下合并 --> 保留最上面的单元格,删除其他的单元格
          <tr>
              <td>小哥哥</td>
              <td rowspan="2">上下合并的单元格</td>
              <td>小哥哥真帅气</td>
          </tr>
          <tr>
              <td>小姐姐</td>
              <td>小姐姐真漂亮</td>
          </tr>
      • 左右合并 --> 保留最左面的单元格,删除其他的单元格
      <tr>
          <td>总结</td>
          <td colspan="2">左右合并的单元格</td>
      </tr>
      
    3. 给保留的其他单元格设置:

      • 跨行合并(rowspan)
      • 跨列合并(colspan)
        |属性名|属性值|说明|
    rowspan合并单元格个数跨行合并,将多行的单元格垂直合并
    colspan合并单元格个数跨列合并,将多列的单元格水平合并

    <dl>
    <dt>注意点:</dt>
    <dd>只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead,tbody,tfoot)<dd>
    </dl>


    表单标签

    input系列标签基本介绍

    • 场景:在网页中显示收集用户信息的表单效果
    • 标签名:input

      • input标签可以通过type属性值的不同,展现的不同效果
    • type属性值:
      |标签名|type属性值|类型|说明|

    |---|
    |input|text|文本框|用于输入单行文本|
    |input|password|密码框|用于输入密码|
    |input|radio|单选框|用于多选一|
    |input|checkbox|多选框|用于多选多|
    |input|file|文件选择|用于上传文件|
    |input|submit|提交按钮|用于提交|
    |input|reset|重置按钮|用于重置|
    |input|button|普通按钮|默认无功能,之后配合js添加功能|


    input系列标签-文本框

    • 场景:在网页中显示输入的单行文本的表格控件
    • type属性值:text/password
    • 代码:<input type="text/password" placeholder="显示内容">
    • 常用属性:
      |属性名|说明|
    placeholder占位符,提示用户输入的内容


    input系列标签-单选框

    • 场景:在网页中显示多选一的单选表单控件
    • type属性值:radio
    • 代码:
     <body>
        <input type="radio" name="rex">
        <input type="radio" name="rex">
    </body
    • 常用属性:
      |属性名|说明|
    name通过name进行分组,有相同的name属性值的单选框为一组,一组中同时只能有一个被选中
    checked默认选中(checkbox也适用)

    <dl>
    <dt>注意点:</dt>
    <dd>name属性值对于单选框有分组功能<dd>
    <dd>有相同的name属性值的单选框为一组,一组中只能同时有一个被选中<dd>
    </dl>


    input系列标签-文件选择

    • 场景:在网页中显示文件选择的表单控件
    • type属性:file
    • 代码:<input type="file" multiple>
    • 常用属性:
      |属性名|说明|
    multiple多文件选择


    input系列标签-按钮

    • 场景:在网页中显示不同功能的按钮表单控件
    • type属性值:
      |标签名|type属性值|类型|说明|
    inputsubmit提交按钮点击之后提交数据给后端服务器
    inputreset重置按钮点击之后恢复表单默认值
    inputbutton普通按钮默认无任何功能,之后搭配js添加功能

    <dl>
    <dt>注意点:</dt>
    <dd>如果需要实现以上按钮功能,需要配合form标签使用<dd>
    <dd>form使用方法:用form标签把表单标签一起包裹起来<dd>
    </dl>


    button按钮标签

    • 场景:在网页中显示用户点击的按钮
    • 标签名:button
    • type属性值(同input的按钮一样):
      |标签名|type属性值|类型|说明|
    buttonsubmit提交按钮点击之后提交数据给后端服务器
    buttonreset重置按钮点击之后恢复表单默认值
    buttonbutton普通按钮默认无任何功能,之后搭配js添加功能

    <dl>
    <dt>注意点:</dt>
    <dd>谷歌浏览器中的button默认是提交按钮<dd>
    <dd>button标签是双标签,便于包裹其他内容:文字,图片等<dd>
    </dl>


    select下拉菜单标签

    • 场景:在网页中提供多个选择项的下拉菜单控件
    • 标签组成:

      • select标签:下拉菜单的整体
      • option标签:下拉菜单的每一项
    • 常见属性:

      • selected:下拉菜单的默认选中

    textarea文本域标签

    • 场景:在网页中提供可输入多行文本的表单控件
    • 标签名: textrea
    • 常见属性
      |属性名|说明|
    cols规定了文本域内可见宽度
    rows规定了文本域内可见行数

    <dl>
    <dt>注意点:</dt>
    <dd>右下角可以拖拽改变大小<dd>
    <dd>实际开发时针对于样式效果推荐css设置<dd>
    </dl>


    label标签

    • 场景:常用于绑定内容与标签关系
    • 标签名:label
    • 使用方法①:

      1. 使用label标签把内容(如文本)包裹起来
      2. 在表单标签添加id属性
      3. 在label标签的for属性中设置对应的id值
    <body>
        <input type="radio" name="hex" id="1"><label for="1">内容</label>
        <input type="radio" name="hex" id="2"><label for="2">内容</label>
    </body>
    • 使用方法②:

      1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
      2. 需要把label标签和for标签删掉即可
    <body>
        <label>
            <input type="radio" name="sex">内容
        </label>
        <hr>
        <label>
            <input type="radio" name="sex">内容
            <hr>
        </label>
    </body>


    语义化标签

    没有语义化布局标签-div和span

    • 场景:实际开发网页会大量频繁使用div和span这两个没有语义的布局标签
    • div标签:一行只显示一个(独占一行)
    • span标签:一行可以显示多个

    有语义化的布局标签

    • 场景:在html5新版本中,推出了一些有语义的布局标签供开发者使用(手机端使用)
    • 标签:
      |标签名|语义|
    header网页头部
    nav网页导航
    footer网页底部
    aside网页侧边栏
    section网页区块
    article网页文章

    <dl>
    <dt>注意点:</dt>
    <dd>以上标签显示特点和div一致,但是比div多了不同语义<dd>
    </dl>


    字符实体

    常见字符实体

    • 场景:在网页中展示特殊符号效果时,需要使用字符实体替代
    • 结构:&英文;
    • 常见字符实体:
      |显示结果|描述|实体名称|
    " "空格&nbsp;
    <小于号&lt;
    >大于号&gt;
    &和号&amp;
    "引号&quot;
    '撇号&apos;(IE不支持)


0