later-zc notes

Appearance

一. HTML高级元素 ​

1. 列表元素 ​

1.1 认识列表元素 ​

  • 在开发一个网页的过程中，很多数据都是以列表的形式存在的

    image-20220406143850833

1.2 列表的实现方式 ​

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

1.3 有序列表 ol - li ​

  • ol（ordered list）

    • 有序列表，直接子元素只能是li

  • li （list item）

    • 列表中的每一项

      image-20220406150416556

1.4 无序列表 ul - li ​

  • ul （unordered list）

    • 无序列表，直接子元素只能是li

  • li（list item）

    • 列表中的每一项

      image-20220406150538028

1.5 定义列表 dl - dt - dd ​

  • dl （definition list）

    • 定义列表，直接子元素只能是dt、dd

  • dt (definition term)

    • term是项的意思，列表中每一项的项目名

  • dd（definition description）

    • 列表中每一项的具体描述，是对dt的描述、解释、补充

    • 一个dt后面一般紧跟1个或者多个dd

      image-20220406150834450

1.6 所有案例的思路 ​

  1. 先完成HTML元素结构
  2. 重置CSS样式（如body、a、ul等）
  3. 先整体，再局部
    • 顺序：按照从外往里，从上到下
  4. 去除重复的代码（css)
    • 讲重复的样式放到一个单独的class中（.icon）
    • 不同的样式抽到不同的class（.new、.hot）

2. 表格元素 ​

2.1 认识表格 ​

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

    image-20220406165827473

2.2 表格常见的元素 ​

  • table

    • 表格

  • tr （table row）

    • 表格中的行

  • td （table data)

    • 行中的单元格

  • 另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

    image-20220406170006676

2.3 表格中合并边单元格的边框 ​

  • border-collapse
    • 用来决定表格的边框是分开的还是合并的
      • separate（默认值）
        • 每个单元格拥有独立的边框
      • collapse
        • 相邻的单元格共用同一条边框
  • 合并单元格的边框
    • table { border-collapse: collapse}

2.4 表格的其他语义化元素 ​

  • thead表格的表头

  • tbody表格的主体

  • tfoot表格的页脚

  • caption表格的标题

  • th表格的表头单元格

    html
    <table>
  <caption>热门股票</caption>
  <thead>
    <tr>
      <th>排名</th>
      <th>股票名称</th>
      <th>股票代码</th>
      <th>股票价格</th>
      <th>股票的涨跌</th>
    </tr>
  </thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

2.5 单元格合并 ​

  • 在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的

    • 一个单元格可能会跨多行或者多列来使用

  • 比如下面的表格

    image-20220406173612445

  • 这个时候我们就要使用单元格合并来完成

  • 单元格合并分成两种情况:

    • 跨列合并：使用colspan

      • 在需要跨列的单元格写上colspan属性, 并且省略掉合并的td

    • 跨行合并：使用rowspan

      • 在需要跨行的单元格写上rowspan属性, 并且省略掉后面tr中的td

        image-20220406173832057

3. 表单元素 ​

3.1 认识表单 ​

image-20220406184401564

3.2 常见的表单元素 ​

表单元素含义
form表单，一般情况下，其他表单相关元素都是它的后代元素
input单行文本输入框、单选框、复选框、按钮等元素
textarea多行文本框
select、option下拉选择框
button按钮
label表单元素的标题

3.3 input元素的使用 ​

  • 表单元素使用最多的是input元素（行内替换元素）

  • input有如下常见的属性：

    属性含义
    typeinput的类型
    readonly只读
    disabled禁用
    checked默认被选中，只有当type为radio或checkbox时可用
    name名字，在提交数据给服务器时，用于区分数据类型
    value取值

  • type属性的值

    input的类型含义
    text（默认）文本输入框（明文输入）
    password文本输入框（密文输入）
    radio单选框
    checkbox复选框
    button按钮
    reset重置
    submit提交表单数据给服务器
    file文件上传
    checkbox当页面加载时，自动聚焦

  • type类型的其他取值和input的其他属性, 查看文档:

3.4 布尔属性 ​

  • 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected

  • 布尔属性可以没有属性值，写上属性名就代表使用这个属性

    • 如果要给布尔属性设值，值就是属性名本身

      html
      <input type="text" readonly="readonly" disabled="disabled" autofocus="autofocus">
<!-- 等价于上面的写法 -->
<input type="text" readonly disabled autofocus>

3.5 表单按钮 ​

  • 表单可以实现按钮效果：

    • 普通按钮（type=button）：使用value属性设置按钮文字

    • 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）

    • 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

      image-20220406213224927

    • 也可以通过按钮来实现：

      image-20220406213254723

3.6 input和label的关系 ​

  • label元素一般跟input配合使用，用来表示input的标题

  • label可以跟某个input绑定，点击label就可以激活对应的input变成选中

    image-20220406214738489

3.7 radio的使用 ​

  • type类型设置为radio，变成单选框：

    • name值相同的radio才具备单选（互斥）功能

    • 默认选中：checked

      html
      <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.8 checkbox的使用 ​

  • type类型设置为checkbox，变成多选框：

    • 属于同一种类型的checkbox，name值要保持一致

    • 默认选中：checked

      html
      <div>
  您的爱好:
  <label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
  </label>
  <label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
  </label>
</div>

3.9 textarea的使用 ​

  • textarea的常用属性
    • cols：列数
    • rows：行数
  • 缩放的CSS设置
    • resize
      • 禁止缩放：none
      • 水平缩放：horizontal
      • 垂直缩放：vertical
      • 水平垂直缩放：both

3.10 select和option的使用 ​

  • option是select的子元素，一个option代表一个选项
  • option常用属性
    • multiple：可以多选
    • size：显示多少项
  • option常用属性
    • selected：默认选中

3.11 form常见的属性 ​

  • form通常作为表单元素的父元素：

    • form可以将整个表单作为一个整体来进行操作
    • 比如对整个表单进行重置
    • 比如对整个表单的数据进行提交

  • form常见的属性如下:

    • action
      • 用于提交表单数据的请求URL
    • method
      • 请求方式(get和post)，默认get
    • target
      • 在什么地方打开URL（参考a元素的target）

  • 请求方式的对比

    image-20220406221916465

二. Emmet语法 ​

1. 认识Emmet ​

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

    • 在前端开发的过程中，一大部分的工作是写HTML、CSS代码, 如果手动来编写效果会非常低
    • VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

  • ! 和 html:5可以快速生成完整结构的html5代码

    html
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2. > (子代) 和 + (兄弟) ​

html
<!-- div>ul>li -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

<!-- div+div>p>span+i -->
<div></div>
<div>
  <p><span></span><i></i></p>
</div>

<!-- div+p+ul>li -->
<div></div>
<p></p>
<ul>
  <li></li>
</ul>

3. *（多个）和 ^（上一级） ​

html
<!-- ul>li*5 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- div+div>p>span^h1 -->
<div></div>
<div>
  <p><span></span></p>
  <h1></h1>
</div>

<!-- div+div>p>span^^h1 -->
<div></div>
<div>
  <p><span></span></p>
</div>
<h1></h1>

4.（）分组 ​

html
<!-- div>header>ul>li*2^^footer>p -->
<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

5. 属性(id属性、class属性、普通属性) {}（内容） ​

html
<!-- #header+#main>.container>a[href]+h2.title -->
<div id="header"></div>
<div id="main">
  <div class="container">
    <a href=""></a>
    <h2 class="title"></h2>
  </div>
</div>

!-- a[href="abc"]{abc} -->
<a href="abc">abc</a>

6. $（数字） ​

html
<!-- ul>li.item$*5{$} -->
<ul>
  <li class="item1">1</li>
  <li class="item2">2</li>
  <li class="item3">3</li>
  <li class="item4">4</li>
  <li class="item5">5</li>
</ul>

7. 隐式标签 ​

html
<!-- .box+.container -->
<div class="box"></div>
<div class="container"></div>

<!-- ul>.item*3 -->
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

8. CSS Emmet ​

css
/* w100 */
width: 100px;

/* dib */
display: inline-block;

/* w20+h30+m40+p50 */
width: 20px;
height: 30px;
margin: 40px;
padding: 50px;

/* m20-30-40-50 */
margin: 20px 30px 40px 50px;

/* bd1#cs */
border: 1px #ccc solid;

三. 结构伪类 ​

1. :nth-child ​

  • :nth-child(1)
    • 是父元素中的第1个子元素
    • span:nth-child(1)
      • 表示父元素中第一个子元素且名字为span的标签被选中
  • :nth-child(2n)
    • n代表任意正整数和0
    • 是父元素中的第偶数个子元素（第2、4、6、8......个）
    • 跟:nth-child(even)同义
  • :nth-child(2n + 1)
    • n代表任意正整数和0
    • 是父元素中的第奇数个子元素（第1、3、5、7......个）
    • 跟:nth-child(odd)同义
  • nth-child(-n + 2)
    • 代表前2个子元素

2. :nth-last-child ​

  • :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()是从最后一个子元素开始往前计算
    • :nth-last-child(1)，代表倒数第1个子元素
    • :nth-last-child(-n + 2)，代表最后2个子元素

3. :nth-of-type ​

  • :nth-of-type()用法跟:nth-child()类似
    • 不同点是**:nth-of-type()计数时只计算同类型的元素**
  • :nth-last-of-type用法跟:nth-of-type()类似
    • 不同点是:nth-last-of-type()是从最后一个这种类型的子元素开始往前计数

4. 其他结构伪类 ​

  • 其他常见的伪类(了解):
    • :first-child，等同于:nth-child(1)
    • :last-child，等同于:nth-last-child(1)
    • :first-of-type，等同于:nth-of-type(1)
    • :last-of-type，等同于:nth-last-of-type(1)
    • :only-child，是父元素中唯一的子元素
    • :only-of-type，是父元素中唯一的这种类型的子元素
  • 下面的伪类偶尔回使用：
    • :root，根元素，就是HTML元素
    • :empty，代表里面完全空白的元素

5. 否定伪类 ​

  • :not()的格式是:not(x)
    • x是一个简单选择器
    • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
  • :not(x)表示除x以外的元素

Released under the MIT License.

Copyright © 2024-present later-zc