xiaoqiyan 的个人博客

HTML概念

• 超文本标记语言
• 专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

HTML组成

• html标签：网页的整体
• head标签：网页的头部
• body标签：网页的身体
• title标签：网页的标题

HTML标签与标签的关系

• 父子关系(嵌套)
• 兄弟关系(并列)

标题标签(h1,h2,h3.......)

• 数字越大重要程度就递减
• 特点：
  • 文字加粗
  • 文字变大
  • 独占一行

段落标签(p)

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

换行标签(br)

• 特点：
  • 单标签
  • 让文字强制换行

水平线标签

• 特点
  • 单标签
  • 在页面中显示一行水平线

文本格式化标签

• strong 加粗
• ins 下划线
• em 倾斜
• del 删除线

图片标签

• 特点：
  • 单标签
  • 需要借助标签的属性进行设置
• 属性

  • alt 替换文本

    • 图片加载失败时显示该文本

  • title 提示文本

    • 鼠标悬停时，显示该文本

  • width和height

    • 设置高度和宽度

音频标签(audio)

• 常见属性
  • src 路径
  • controls 显示播放的控件
  • autoplay 自动播放
  • loop 循环播放
• 注意
  • 只支持mp3，wav，ogg

视频标签(video)

• 常见属性
  • 和audio标签一样
• 注意
  • 只支持MP4、webm，ogg

链接标签(a)

• 属性
  • target属性
    • 目标网页的打开方式
      • 默认覆盖
      • 覆盖原网页 _self
      • 保留原网页 _blank
  • 空链接
    • href="#"
    • 可以用来回到页面顶部

无序列表

• 组成

  • ul标签
    • 表示无序列表的整体，用于包裹li标签
  • li标签
    • 表示无序列表的每一项

• 特点

  • 前面有一个圆点

• 注意

  • ul标签只能包含li
  • li可以包含全部

有序列表

• 组成

  • ol表示整体
  • li表示每一行

• 注意

  • 和无序的一样

• 特点

  • 每一行有顺序

自定义列表

• 组成

  • dl

    • 自定义列表的整体用于包裹dt/dd

  • dt

    • 表示自定义列表的主题

  • dd

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

• 特点

  • dd前会默认显示缩进效果

• 注意点

  • dl只能包含dd/dt
  • dt/dd可以包含任意内容

基本标签

• table 表格整体，可包裹多个tr

• tr 表格每行，可包裹id

• td 表格单元格 可包裹内容

• 注意

  • 嵌套关系 table > tr > td

属性

• border 边框宽度
• width 表格宽度
• height 表格高度

标题和表头标签

• 标题

  • caption

• 表头标签

  • th

• 注意

  • caption写在table里面
  • th写在tr里面

表格的结构标签

• thead 头部

• tbody 主体

• tfoot 底部

• 注意

  • 用于包裹tr标签

合并单元格

• 跨行合并 rowspan

• 跨列合并 colspan

• 注意

  • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

input

• 属性：根据type值不同展示不同效果

  • text 文本框

    • placeholder 提示用户输入什么

  • password 密码框

    • placeholder 提示用户输入什么

  • radio 单选框

    • name 相同name属性的单选为一组，一组只能选一个
    • checked 默认选中

  • CheckBox 多选框

    • checked 默认选中

  • file 文件选择

    • multiple 多文件选择

  • 按钮系列

    • 注意：要配合form标签使用
    • submit 提交按钮
    • reset 重置按钮
    • button 普通按钮，默认无功能

  • value

    • 用户输入的内容，提交之后会发送给后端服务器

  • name

    • 当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

button

select

• select 下拉菜单的整体
• option 下拉菜单的每一项
• selected 下拉菜单默认选中

textarea

• 属性
  • cols 规定可见宽度
  • rows 规定可见行数
• 注意
  • 右下角可以拖拽改变大小

label

• 绑定内容与表单标签的关系
• 1.使用label标签把内容（如：文本）包裹起来
• 2.在表单标签上添加id属性
• 3.在label标签的for属性中设置对应的id属性值

• div 独占一行
• span 一行可以显示多个

• header 网页头部
• nav 网页导航
• footer 网页底部
• aside 网页侧边栏
• section 网页区块
• article 网页文章