xiaoqiyan 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
15 文章
0 评论
7238 浏览
0 当前访客
ღゝ◡╹)ノ❤️

Java学习之第7章网页开发基础(HTML基础)

  • HTML
    • 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 网页文章


标题:Python
作者:肖祺彦
地址:url

评论
取消