跳到主要内容

8-CSS学习笔记-高级元素的使用

阅读需 3 分钟

下定决心还是再学一遍CSS等前端知识

1. 列表元素​

1.1 列表的实现方式​

  • 方案一：使用div
  • 方案二：使用列表元素，
  • 事实上现在很多网站对于列表元素没有很强烈的偏好，更加不拘一格，按照自己的风格来布局
    • 原因是列表元素默认的CSS样式，让他用起来不是很方便
    • 比如列表元素往往有很多的限制，ul/ol中智能存放li，li再存放其他元素，默认样式等
    • 虽然我们可以通过重置来解决，但是我们更喜欢自由的div
  • HTML提供了3组常用的展示列表的元素
    • 有序列表：ol, li
    • 无序列表：ul, li
    • 定义列表：dl, dt, dd

2. 表格元素​

  • 在网页中，对于某些内容的展示使用表格元素更为合适和方便

  • 常见元素

    • table
    • tr
    • td
    • 后增加的元素
      • thead
        • td->th
      • tbody
      • tfoot
      • caption

  • 其他已经不推荐用了

    • table元素应该使用CSS制定样式
    • 设置margin-left, margin-right为auto，来实现类似于align属性的效果

  • 案例

    • border-collapse
      • collapse折叠

  • 单元格合并

    • 跨列合并：
      • colspan
      • 在最左边的单元格使用，并省略掉合并的td
    • 跨行合并
      • rowspan
      • 在最上面的单元格使用，并省略掉合并的td

  • 案例：

    • 快捷写法：tr*12>td{数学}*6
    • 技巧
      • table tr:nth-child(-n + 2){} :n的取值，0和整数

image-20250504193314647

3. 表单元素​

  • 和用户交互的重要方式之一
  • 常见的表单元素
    • form
      • 表单，一般情况下，其他表单相关的元素都是他的后代
    • input
      • 单行文本输入框，单选框，复选框，按钮
    • textarea
      • 多行文本框
    • select，option
      • 下拉选择框
    • button
      • 按钮
    • label
      • 表单元素的标题

3.1 input​

  • input
    • 是一个行内替换元素
    • type
      • text
      • password
      • ratio
      • checkbox
      • button
      • reset
      • submit
      • file
      • readonly
      • disabled
      • checked
        • 默认选中，只有当type为ratio或checkbox的时候可以用
      • autofocus
      • name
      • value
      • time
      • date

3.1.1 布尔属性（boolean attributes)​

  • 常见的有
    • disabled, checked, readonly, multiple, autofocus, selected
  • 布尔属性可以没有属性值，写上属性名就代表使用这个属性

3.1.2 表单按钮​

  • 按钮
    • button
    • reset
    • Submit

3.1.3 input和label的关系​

  • label可以展示会input的标题
  • label可以跟某个input绑定，点击某个label就可以激活对应的input变成选中
<label for="username">
    用户：
</label>
<input id="username" type="text"/>
<label for="username">
    用户：
    <input id="username" type="text"/>
</label>

3.1.4 ratio​

  • 在类型为radio的input中，如果name一样，那么两个radio就会互斥
<label for="male">
    <input id="male" type="radio" name="sex" value="male">男
</label>

<label for="female">
    <input id="female" type="radio" name="sex" value="female">女
</label>

3.1.5 checkbox​

<label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" value="basketball">篮球
</label>

<label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
</label>

3.2 form常见的属性​

4. Emmet语法​

4.1 认识Emmet语法​

  • 前身为（Zen Coding) 是一个能大幅度提高前端开发效率的一个工具

    • vscode内置了Emmet语法，在后缀为.html/.css中输入缩写后按tab/Enter键即可自动生成相应的代码

  • 举例

    • ! == html:5

  • >（子代）和+兄弟

4.2 HTML Emmet​

4.3 CSS Emmet​

Loading Comments...
0%