HTML+CSS | 青训营笔记

Q7Q
137 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、本堂课重点内容

  1. HTML的简单介绍：常用的标签及其属性
  2. HTML5的语义化标签
  3. CSS选择器及特异度
  4. CSS常见属性：文字、颜色、text-align、spacing、text-indent……
  5. 块级元素和内联元素的区别
  6. 布局：浮动、定位、flex、grid

二、详细知识点笔记

HTML

1.DOM树

image.png

2.HTML常见标签

  • 标题h1~h6
  • 有序列表ol/li和无序列表ul/li
  • 链接a：target属性值为"_blank"时，即在新的窗口打开链接
  • 输入input：type值有range、number、date、checkbox…
<!--复选框-->
<p>
  <label><input type="checkbox" />apple </label>
  <label><input type="checkbox" />pear </label>
<p>

<!--单选框，相同的name来绑定-->
<p>
  <label><input type="radio" name="sport" />badminton </label>
  <label><input type="radio" name="sport" />basketball </label>
<p>

<p>
  <select>
    <option>pear</option>
    <option>apple</option>
    <option>banana</option>
  </select>
</p>

<input list="countries" />
<datalist id="countries">
  <option>China</option>
  <option>UK</option>
  <option>US</option>
</datalist>
  • p标签、cite标签、q标签、code标签、em标签

3.HTML5语义化标签

image.png

  • 语义化是指HTML中的元素、属性及属性值都拥有某些含义
  • 语义化的好处是：代码可读性、可维护性、搜索引擎优化、提升无障碍性

CSS

1.引入CSS的三种方式

  • 外链（更常用）
  • 嵌入
  • 内联

2.CSS的工作方式

image.png

3.CSS选择器

  • 通配选择器
  • id选择器
  • 标签选择器
  • 类选择器
  • 属性选择器
<label>用户名：</label>
<input value="name" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>
  • 伪类：不基于标签和属性定位元素；分为状态伪类和结构性伪类
  • 组合选择器

image.png

4.继承与初始值

  • 继承：某些属性会自动继承其父元素的计算值，如color、font-size
  • CSS中，每个属性都有一个初始值，如margin-left的初始值为0
  • 可以用initial关键字显式重置为初始值

5.块级排版上下文BFC

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display:flow-root

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

6.flex

  • flex-direction：轴的排列方向，取值有row、row-reverse、column、column-reverse
  • justify-content：主轴的排列方式
  • align-items
  • flexibility：可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
    • flex-grow 有剩余空间时的伸展能力
    • flex-shrink 容器空间不足时收缩的能力
    • flex-basis 没有伸展或收缩时的基础长度
avatar
文章
阅读
粉丝