前端HTML与CSS

w_小温
99 阅读10分钟

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

一、前端与HTML

PPT链接：前端与HTML (slides.com)

1.1 什么是前端

前端是为了解决GUI人机交互问题，具有跨终端的特点。

跨终端：

  • PC/移动浏览器
  • 客户端/小程序
  • VR/AR等

前端技术栈：

  • HMTL（内容）
  • CSS（样式）
  • JavaScript（行为）
  • 网络协议

前端应该关注：功能、无障碍浏览、美观、体验、性能、安全、兼容性

1.2 HTML

Hyper Text Markup Language - 超文本标记语言

image-20220723112630524.png

HTML执行时会被解析为DOM树

1.3 HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如 required、readonly
  • 标题h1~h6
  • 有序清单ol（ordered list）、无序清单ul（unordered list），自定义清单dl、dd、dt
  • 链接 <a href="" target="_blank">
  • 图片<img src="" alt="图面替代文字" title="图片说明（鼠标悬浮文字）"/>
  • 音频<audio src="" controls ></audio>
  • 视频<video src="" controls></video>
  • 表单<input type="" placeholder="提示文字" />
  • 文本框<textarea> 文字 </textarea>
  • 段落<p></p>
  • 标签<label></label>
  • 下拉菜单<select><option></option></select>
  • 引用
    • 段落引用<blockquote cite=""> </cite>
    • 行内引用<cite>
    • 引号引用<q> </q>
  • 代码<pre><code> </code></pre>

1.4 标签语义化

image-20220723152854634.png

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML，比如：

    • 有序列表用 ol；无序列表用 ul

    • lang 属性表示内容所使用的语言

HTML页面的用户：

  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键词、排序
  • 屏幕阅读器：给盲人阅读页面内容

语义化的好处：

  • 代码的可读性
  • 代码可维护性
  • 搜索引擎优化SEO
  • 提升无障碍性

如何做到语义化？传达内容，而不是样式

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生产代码

二、了解CSS

PPT链接：了解 CSS (slides.com)

2.1 CSS是什么

Casading Style Sheets — 级联样式表

用来定义页面元素的样式（设置字体、颜色、位置、大小、动画效果等）

image-20220723153153311.png

在HTML页面中使用CSS：

  • 外链 <link rel="stylesheet" href="/assets/style.css">
  • 嵌入（用style标签嵌入）
  • 内联<p style="margin:1em 0">Example Content</p>

CSS如何工作？

image-20220723153429587.png

2.2 CSS选择器

作用：找出页面中的元素，以便给他们设置样式。

选择器种类：

  • 通配选择器 *

  • 标签选择器 div

  • id选择器 #id

  • 类选择器 .class

  • 属性选择器 [disabled]

    a[href^="#"]{
    ......
}
a[href$=".jpg"]{
    ......
}

  • 伪类选择器（pseudo-classes）

    • 结构性伪类 :first-child :last-child
    • 状态伪类 :hover :active :focus :visited :link

image-20220723153537973.png 选择器组：通过逗号隔开即可。

2.3 颜色表示

表示方法：

  • RGB rgba(0,0,0,1)
  • 十六进制 #12eeff
  • HSL hsl(360, 100%, 50%)

2.4 字体的表示

属性：font-family

image-20220723154523548.png

使用建议：

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

可以使用Web Fonts

字体属性：

  • 行高： image-20220723154745344.png
h1 {
  /* 斜体 粗细 大小/行高 字体族 */
  font: bold 14px/1.7 Helvetica, sans-serif;
}

p {
  font: 14px serif;
}

  • 对齐text-align: left/center/right/justify（justify表示两端对齐）

  • 间隔spaceing：

    {
    letter-spacing:2px;
    word-spacing:3px;
}

  • 文本缩进text-indent:60px;

  • 文本修饰text-decoration: none/underline/line-through/over-line（下划线、中划线、上划线）

  • white-space：normal/nowarp/pre/pre-wrap/pre-line

三、深入CSS

3.1 样式属性的继承

  • 某些属性会自动继承其父元素的计算值，除非显式指定一个值。

  • 一般情况下，文字相关的样式可以继承，盒子相关的样式一般不能继承。对于原本不继承的属性，可以通过inherit来进行显示继承。 * { box-sizing:inherit;}

  • 样式的初始值

    • CSS 中，每个属性都有一个初始值，例如：
      • background-color 的初始值为 transparent
      • margin-left 的初始值为 0
    • 可以使用initial关键字显式重置为初始值，如：background-color: initial

3.2 CSS的求值过程

img

需要区分计算值和使用值

3.3 布局Layout

布局是确定内容的大小和位置算法。

3.3.1 基本属性

布局相关技术：

  • 常规文档流：行级、块级、表格布局、FlexBox、Grid布局
  • 浮动
  • 绝对定位

3.3.2 盒模型

参考资料：盒模型 - 学习 Web 开发 | MDN (mozilla.org)

参考视频：[CSS] Box Model 盒子模型（Padding、Border、Margin）_哔哩哔哩_bilibili

image-20220723163416641.png

  • width、height

  • margin、padding

如果属性值为一个值，则表示四边都一样

如果为两个值，则表示上下、左右

如果为三个值，则表示上、左右、下

如果为四个值，则分别表示 上、右、下、左

margin外边距重合（如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。）

标准盒模型 vs. 怪异盒模型

content-box(标准盒模型，默认值) box-sizing: content-box;img

border-box (怪异盒模型) box-sizing: border-box;img

块级盒子 vs. 行级盒子

  • 块级
    • 不和其他盒子并列摆放
    • 使用所有的盒模型属性
    • 块级元素：body、article、div、main、section、h1-6、p、ul、li等
    • dispaly: block
  • 行级
    • 和其他行级盒子一起放在一行或拆开成多行
    • 盒模型中的width和height不适用
    • 行级元素：span、em、strong、cite、code等
    • display: inline

display属性：

  • block——块级盒子

  • inline——行级盒子

  • inline-block——本身是行级，可以放在行盒子中；可以设置宽高、作为一个整体不会被拆散成多行

  • none——排版时忽略

IFC——行级排版上下文(Inline Formatting Context)

  • 只包含行级盒子的容器会创建一个IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

BFC——块级排版上下文(Block Formatting Context)

  • 某些容器会创建一个BFC：
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;
  • BFC内的排版规则：
    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin 不会与外面的合并
    • BFC 不会和浮动元素重叠

3.3.3 FlexBox布局

参考网页：弹性盒子 - 学习 Web 开发 | MDN (mozilla.org)

参考视频：Flexbox 网页布局完全解构_哔哩哔哩_bilibili

Flex布局中的两个角色：Flex Container和Flex Item

Flex Container

  • flex-direction 定义子元素的主轴方向，取值为 row | column | row-reverse | column-reverse，默认为取值row

    flex_terms.png

  • justify-content设置主轴的排序方向；image-20220724164000867.png

  • align-items设置交叉轴的排序方向。取值为flex-start/flex-end/center image-20220724164025674.png

  • flex-wrap子元素超出父元素长度时是否换行。取值为wrap、nowrap，默认值为nowrap（不换行）。

  • flex-flow是flex-direction和flex-wrap的组合缩写，示例flex-flow: row nowrap

  • align-content当内容元素多于一行时生效，设置行与行之间的对齐方式。取值为space-evenly、space-around、space-between、center

Flex Item

  • order用于确定flex item的排序位置，取值为数字。默认为0，数字越大越靠后，越小越靠前。 image-20220724164219004.png

  • align-self用于覆盖flex container的align-items设置。单独指定某个item的对齐方式。 image-20220724164239329.png

  • flex-basis设置flex item的主轴方向大小，取值为像素值

  • flex-grow是指当容器的主轴方向有剩余空间的时候，item沿主轴方向扩大比例的设定。默认值为0，表示不扩大。flex-grow:1表示当前元素除了本身长度以外，多占剩余空间中的一份，如果有多个item都制定了flex-grow值，则这几个item根据值按比例划分剩余空间。比如：主轴方向有n个item，其中2个item设置了flex-grow值为1，则这两个item平分剩余空间；如果这两个item，一个值为1，一个值为2，则值为1的占1/3，而值为2的占2/3。 image-20220724103244345.png

  • flex-shrink当flex item的总和超过了父容器的宽度，且没有换行的时候，item沿主轴方向缩小比例。flex-shrink:1表示各个元素等比缩小。值为0时表示不缩小。

  • flex是flex-grow、flex-shrink、flex-basis的组合缩写。举例：flex: 1 1 auto image-20220724164321752.png image-20220724164358502.png

FlexBox布局的例子

示例代码：FlexBox (codepen.io)

  1. 构建导航栏

    多个列表项横向布局，通过justify-content进行平均分配，然后分别自适应大小。
    image-20220724163757679.png

  2. 手机Header导航栏

    左右两个logo分别位于两头，中间的logo随着宽度自适应 image-20220724163612206.png

  3. 双层FlexBox布局

    先分为左右两栏，再将右边一栏分为上下两栏，最后调整flex属性进行缩放自适应。 image-20220724163413814.png

3.3.4Grid布局

FlexBox为一维的布局（控制一个方向），而Grid则是二维的布局（控制两个方向）。

Grid容器布局：

  • 布局的两个方向：row - 水平方向；column - 竖直方向。
  • 通过grid-template-rows和grid-template-columns来进行行列的划分，然后再放置元素。

Grid放置元素：

  • 默认情况下，每个div相邻布局，各占一格。

  • 通过grid-row和grid-column进行占位布局 image-20220724172044501.png

  • grid-area是grid-row和grid-column的组合缩写。

    比如：grid-row:1/3; grid-column:3/6;可以简写为：grid-area:1/3/3/6;

    即gird-area: row1/column1/row2/column2；

Grid Line：

grid-line如上图所示，从1开始索引，并且是可以命名。

命名方式（如下图）：

  • 在grid container中设置grid-line的名字；
  • 在grid item中设置元素的位置：

image-20220725221209376.png

Grid Areas

grid areas可以直接设置容器中一个或者多个空格的名称，然后可以直接在元素中进行引用。

比如：

  • 在容器中通过grid-template-rows和grid-template-columns划分之后，通过grid-template-areas进行网格命名；

  • 放置元素时，直接通过grid-area进行引用。

image-20220725224254929.png

其他设置：

  • row-gap column-gap用于设置行之间、列之间的间距。（在grid容器中进行设置）

  • fr单位，表示占容器的多少份，可以避免把网格宽度定义成绝对值。（在grid容器中进行设置）

  • repeat() 函数：第一个参数表示要重复多少次，第二个参数是重复什么。比如：grid-template-rows: repeat(5,1fr);但是，repeat()函数不适用于grid-template-areas。

3.3.5 Position定位

参考资料：定位 - 学习 Web 开发 | MDN (mozilla.org)

参考视频：[CSS] 认识 Position_哔哩哔哩_bilibili

用于定位元素，有五个取值： static、absolute、relative、fixed、sticky

static

HTML元素的所有position默认值都是static。

  • static会跟随HTML排版的文档流(flow)移动；

  • static元素对top、bottom、left、right的设定值无效；

absolute

absolute元素会固定在所设置的位置，脱离文档流，不会随HTML的排版移动。

  • 但是如果absolute元素所在容器是有滚动轴的，则它会随着滚动轴而滚动。

  • absolute元素是根据最近的非static的父元素进行定位。

relative

relative与static很相似，都不脱离文档流，会随着HTML的排版而移动。

相对于自己本应该在的位置进行定位。

  • 但是它比static多了top、bottom、left、right的设置

  • 可以让absolute子元素根据relative元素进行定位

fixed

fixed与absolute很相似，都会脱离文档流。不同的地方有两点：

  • fixed元素会定位到视口的固定位置，所以即使有滚动轴滚动页面，也会一直保持在那个位置；
  • 如果fixed元素设置了top、left、bottom、right的属性，则fixed元素会脱离relative元素，直接根据视口进行定位。

sticky

sticky是粘滞定位，当满足top、bottom、left、right的触发定位时，会粘滞在视口边缘。

一般可以用于网页的导航栏。

3.4 学习CSS的几点建议

avatar
文章
阅读
粉丝