【综合】html+css基础

发表于 更新于 分类于 阅读次数： Changyan： 本文字数： 1k 阅读时长 ≈ 2 分钟

1. 行级元素和块级元素

行级元素

  1. 不会独占一行
  2. 不能包括块级元素
  3. 宽高由内容决定，无法设置
  4. 上下margin和上下padding 不起作用

特殊<a>， 它的祖先元素可以放块级元素，那么它也可以放块级元素

块级元素

  1. 独占一行
  2. 可以包含块级和行级元素
    • p标签除外，不可以包括块级元素

行内块

  1. 不独占一行
  2. 可以设置width、height、padding、margin
  3. 宽高默认由内容决定

常见包括: <input>``<img>``<td>``<hr>

行内块元素之间有空隙，怎么解决？

  1. 移除代码标签之间的空格
  2. 负margin
  3. font-size: 0
  4. letter-spacing: - px
  5. word-spacing: - px

垂直居中

  • 行内+行内块
    • vertical-align: middle 可以对其图片和表格单元内容
    • line-height 单行文本
  • flex
    • align-items: center
    • align-self: center
  • grid
    • align-items: center
    • align-self: center
  • 定位+translate

HTML5 新特性

一、html5新特性之用于绘画的canvas元素
二、html5新特性之更加丰富强大的表单
三、html5新特性之用于媒介的video和audio元素
四、html5新特性之html5地理定位
五、html5新特性之html5拖放
六：html5新特性之html5 Web存储
七、html5新特性之html5应用程序缓存
八、html5新特性之html5 Web Workers
九、html5新特性之html5服务器发送事件
十、html5新特性之html5 WebSocket

HTML 语义化标签

  1. article
  2. section
  3. aside
  4. hgroup
  5. header - main - footer
  6. nav
  7. time
  8. mark
  9. figure - figcation
  • figure代表一段独立的内容
  • figcation 定义说明内容
  1. menu
  • 与ul没有区别
  • <menu-item> 已经被完全弃用
  1. details - summary
  • 展开和折叠
  1. fieldset - legend
  • <fieldset> 元素将一个 HTML 表单的一部分组成一组，内置了一个 <legend> 元素作为 fieldset 的标题

dl - dt - dd

  • 包含术语定义以及描述的列表
    track
  • 可以当作媒体元素的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕