day02--html基础标签

发布于:2023-01-21 ⋅ 阅读:(346) ⋅ 点赞:(0)

一、html标签的学习

1、列表标签

  1. 无序标签

    ul 表示无序列表的整体,用于包裹li标签

    li 表示无序列表的每一项,用于包含每一行的内容

    注意:ul标签中只允许包含li标签,li标签可以包含任意内容

    特点:列表的每一项前默认显示原点标识

  2. 有序标签

    ol 表示有序列表的每一项 ,用于包裹li标签

    li 表示有序列表的每一项,用于包含每一行的内容

    注意:ol标签中只允许包含li标签,li标签可以包含任意内容

    列表的每一项前默认显示序号标识

  3. 自定义标签

    dl 表示自定义列表的整体,用于包裹dt/dd标签

    dt 表示自定义列表的主题

    dd 表示自定义列表的针对主题的每一项内容

    注意:dl标签中只允许包含dt/dd标签,dt/dd标签可以包含任意内容

    特点:dd前会默认显示缩进效果

2、表格标签

  • 表格的基本标签

    标签名 说明
    table 表格整体,可用于包裹多个tr
    tr 表格每行,可用于包裹td
    td 表格单元格,可用于包裹内容

    注意:标签的嵌套关系:table>tr>td

  • 表格相关属性

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

    注意:实际开发是针对样式效果推荐用CSS设置

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

    标签名 名称 说明
    caption 表格大标题 表示表格整体大标题
    th 表头单元格 表示一列小标题,通常 用于表格第一行,默认内部文字加粗并居中显示

    注意:

    caption标签书写在table标签内部

    th标签书写在tr标签内部(用于替换td标签)

  • 表格的结构标签(了解)

    标签名 名称
    thead 表格头部
    tbody 表格主体
    tfoot 表格底部

    注意:

    表格结构标签内部用于包裹tr标签

    表格的结构标签可以省略

  • 合并单元格

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

    注意:

    只有同一个结构标签中的单元格才能合并,不能跨结构合并

3、表单标签

  • input系列标签

    标签名 TYPE属性值 说明
    input text 文本框,用于输入单行文本
    input password 密码框,用于输入密码
    input radio 单选框,用于多选一
    input checkbox 多选框,用于多选多
    input file 文件选择,用于之后上传文件
    input submit 提交按钮,用于提交
    input reset 重置按钮,用于重置
    input button 普通按钮,默认无功能,知乎配合js 添加功能

    一、input标签中-文本框text

    常用属性:placeholder——占位符。提示用户输入内容的文本

    name的属性值=value的属性值

    二、input标签中-密码框password 常用属性:placeholder——占位符。提示用户输入内容的文本

    三、input标签中-单选框radio

    常用属性:

    name 分组。同一组中只能有一个被选中

    checked 默认选中

    四、input标签中-复选框checkbox

    常用属性:

    checked 默认选中

    五、input标签中-文件选择file

    常用属性:

    multiple 文件选择

    六、input标签中-按钮

    常用属性:

    submit 提交按钮

    reset 重置按钮

    button 普通按钮

    注意点:如果需要使用功能:需要配合form标签一起使用(使用form标签把表单标签一起包裹起来即可)

  • button按钮标签

    常用属性:

    submit 提交按钮

    reset 重置按钮

    button 普通按钮

  • select下拉菜单标签

    <select>   //下拉菜单的整体
        <option></option>    //下拉菜单的每一项
    </select>
  • textarea文本域标签

    <textarea cols="规定了文本域可见宽度" rows="可见行数"></textarea>

    注意:

    右下角可以改变大小,推荐用CSS设置样式

  • label标签

4、语义化标签

div标签:独占一行

span标签:一行显示多个

5、字符实体

 二、相关的思维导图

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到