• 简单了解html常用的标签

    HTML

    一、基础认知

    1、注释

    1.1、注释的作用和写法
    1.1.1、作用

    为代码添加解释性，描述性的信息，主要用来帮助开发人员理解代码，浏览器执行代码时回忽略所有注释。

    1.1.2、注释的快捷键

    在VS Code中：Ctrl + /

    2、HTML标签的结构

    2.1、结构说明
    1. 标签由<、>、/、英文单词或者字母组成。并且把标签中<>包括起来的英文单词或者字母称为标签名
    2. 常见的标签由两部分组成，我们称之为双标签。前半部分叫做开始标签，后半部分叫做结束标签，两部分之间包裹内容
    3. 少数标签由一部分组成，我们称之为：单标签，自成一体，无法包裹内容
    2.2、HTML标签与标签之间的关系
    2.2.1、父子关系（嵌套关系）
    <head>
    <title>title>
head>
    2.2.2、兄弟关系（并列关系）
    <head>head>
<body>body>

    二、HTML标签学习

    1、排版标签

    1.1、标题标签
    场景

    在新闻和文章页面中，都离不开标题，用来突出显示文章主题

    代码

    h系列标签

    <h1>一级标签h1>
<h2>二级标签h2>
<h3>三级标签h3>
<h4>四级标签h4>
<h5>五级标签h5>
<h6>六级标签h6>

    在这里插入图片描述

    语义

    一到六级标题，重要程度一次递减

    特点
    • 文字都有加粗
    • 文字都有变大，从h1到h6逐渐变小
    • 独占一行
    1.2、段落标签
    场景

    在新闻文章页面中，用于分段显示

    代码
    <p>第一个段落p>
<p>第二个段落p>

    在这里插入图片描述

    语义

    段落

    特点
    • 段落之间有间隙
    • 独占一行
    1.3、换行标签
    场景

    让文字强制换行显示

    代码
    <br>
    语义

    换行

    特点
    • 但标签
    • 让文字强制换行
    1.4、水平线标签
    场景

    分割不同主题内容的水平线

    代码
    <hr>
    语义

    主题的分割转换

    特点
    • 但标签
    • 在页面中显示一条水平线

    2、文本格式化标签

    2.1、介绍
    场景

    需要让文字加粗、下划线、倾斜、删除线等效果

    代码
    标签说明
    b或者strong加粗
    u或者ins下划线
    i或者em倾斜
    s或者del删除线
    语义

    突出重要性的强调语境

    3、媒体标签

    3.1、图片标签
    场景

    在网页中显示图片

    代码
    <img src="" alt="">
    图片标签的alt属性
    属性值：替换文本
    • 当图片加载失败时，才显示alt文本
    • 当图片加载成功时，不会显示alt文本
    图片标签的title属性
    属性值：提示文本

    当鼠标悬停时才显示文本

    图片标签的width和height属性
    属性值：宽度和高度
    注意点
    • 如果只设置width和height中的一个，另一个没有设置的会自动等比例缩放（此时图片不会变形）
    • 如果同时设置了，且比例不当时图片就会变形
    属性注意点：
    1. 标签的属性写在开始标签内部
    2. 标签可以同时存在多个属性
    3. 属性之间以空格隔开
    4. 标签名与属性名必须以空格隔开
    5. 属性之间没有顺序之分
    特点
    • 单便签
    • img标签需要展示对应的效果，需要对标签的属性进行设置
    3.2、音频标签
    场景

    在页面中插入音频

    代码
    <audio src="" controls>audio>
    常见属性
    属性名说明
    src音频路径
    controls显示播放的控件
    autoplay自动播放
    loop循环播放
    3.3、视频标签
    场景

    在页面中插入视频

    代码
    <video src="" controls>video>
    常见属性
    属性名说明
    src视频路径
    controls显示播放控件
    autoplay自动播放
    loop循环播放

    4、链接标签

    场景

    点击之后，从一个页面跳转到另一个页面

    称呼

    a标签、超链接、锚链接

    代码
    <a href="">链接文字a>
    连接标签的target属性
    属性值

    目标网页的打开形式

    取值效果
    _self默认值，在当前窗口中跳转（覆盖原来的网页）
    _blank在新窗口中显示（保留原网页）
    特点

    双标签，可以包含内容

    如果需要a标签点击之后去指定页面，需要设置a标签的href属性

    5、列表标签

    5.1、无序列表
    场景

    在网页中表示一组无顺序之分的列表

    便签组成
    标签说明
    ul表示无序列表的整体，用于包裹li标签
    li表示无序列表的每一项，包含每一行的内容
    注意
    • ul标签中只允许包含li标签
    • li标签中可以包含任意内容
    5.2、有序列表
    场景

    在网页中，表示一组有顺序之分的列表

    标签组成
    标签说明
    ol表示有序列表的整体，用来包裹li标签
    il表示有序列表的每一项
    5.3、自定义列表
    场景

    在网页的底部导航栏中通常会使用自定义列表

    标签组成
    标签说明
    dl表示自定义列表的整体，由于包含dd/dt标签
    dt表示自定义列表的主题
    dd表示自定义列表针对主题的每一项内容

    三、表格标签

    1、表格的基本标签

    场景

    在网页中以行+列的单元格方式整齐展示数据

    基本标签
    标签说明
    table表格整体，用于包含多个tr
    tr表格每行，用于包含td
    td表格单元格，由于包裹内容

    2、表格的相关属性

    场景

    这只表格基本展示效果

    常见想过属性
    属性名属性值效果
    border数字边框宽度
    width数字表格宽度
    height数字表格高度

    3、表格的标题和表头的单元格标签

    场景

    在表格中表示整体大标题和一列小标题

    标签
    标签名名称说明
    caption表格大标题表示表格整体大标题，默认在表格顶部居中位置显示
    th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中
    注意
    • caption标签写在table标签内部
    • th标签写在tr标签内部

    4、合并单元格

    步骤

    明确合并哪几个单元格

    通过左上原则，确定保留谁删除谁

    给保留的单元格设置跨行合并（rowspan）或者跨列合并（colspan）

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

    四、表单标签

    1、input系列标签

    1.1、场景

    在网页中显示收集用户信息的表单效果，标签名为input

    1.2、type属性值
    标签名type属性值说明
    inputtext文本框，用于输入单行文本
    inputpassword密码框，用于输入密码
    inputradio单选框，用于多选一
    inputcheckbox多选框，用于多选多
    inputfile文件选择，用于上传文件
    inputsubmit提交按钮，用于提交表单内容
    inputreset重置按钮，用于重置
    inputbutton普通按钮
    1.3、文本框
    场景

    在网页中输入单行文本的表单控件

    type属性值：text
    常用属性
    属性名说明
    placeholder占位符，提示用户输入内容的文本
    1.4、单选框
    场景

    在网页中显示多选一的单选表单控件

    type属性值：radio
    常用属性
    属性名说明
    name分组，有相同name属性的单选框为一组，一组中同时只能由一个被选中
    checked默认选中
    1.5、文件选择
    场景

    在网页中显示文件选择的表单控件

    type属性值：file
    常用属性
    属性名说明
    multiple多文件选择

    2、表单标签

    2.1、select下拉菜单标签
    场景

    在网页中提供多个选则的下拉菜单表单控件

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

    selected：下拉菜单的默认选中

    2.2、testarea文本域标签
    场景

    在网页中提供可以输入多行文本的表单控件

    标签名：textarea
    常见属性

    cols：规定文本域内可见宽度

    rows：规定文本域内可见行数

    2.3、lable标签
    场景

    常用于绑定内容与表单标签的关系

    标签名：lable
    使用方法
    方法一
    1. 使用lable标签把内容包裹起来
    2. 在表单标签上添加id属性
    3. 在lable标签的for属性中设置对应的id属性

    方法二

    1. 直接使用lable标签把内容和表单标签一起包裹起来
    2. 需要把lable标签的for属性删除即可

    五、语义化标签

    1、没有语义的布局标签div和span
    场景

    实际开发网页时会大量的使用到div和span两个没有语义的布局标签

    div标签

    独占一行

    span标签

    一行可以显示多个

    selected：下拉菜单的默认选中

    2.2、testarea文本域标签
    场景

    在网页中提供可以输入多行文本的表单控件

    标签名：textarea
    常见属性

    cols：规定文本域内可见宽度

    rows：规定文本域内可见行数

    2.3、lable标签
    场景

    常用于绑定内容与表单标签的关系

    标签名：lable
    使用方法
    方法一
    1. 使用lable标签把内容包裹起来
    2. 在表单标签上添加id属性
    3. 在lable标签的for属性中设置对应的id属性

    方法二

    1. 直接使用lable标签把内容和表单标签一起包裹起来
    2. 需要把lable标签的for属性删除即可

    五、语义化标签

    1、没有语义的布局标签div和span
    场景

    实际开发网页时会大量的使用到div和span两个没有语义的布局标签

    div标签

    独占一行

    span标签

    一行可以显示多个

  • 相关阅读:
    字节技术官手码1938页LeetCode热门高解，GitHub已上榜
    面向对象设计原则之依赖倒转原则
    LabVIEW流量控制系统
    C++继承
    [羊城杯 2020]black cat - 文件隐写+RCE(hash_hmac绕过)
    未整理知识点
    什么样的客户关系管理系统最合适企业使用？
    Java面试复习体系总结（2021版,持续更新）
    【Kafka】——Producer
    Python基础之列表、元组和字典
  • 原文地址：https://blog.csdn.net/weixin_63323754/article/details/139896307