HTML&CSS | 青训营笔记

SyrupFight2021
92 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第一天。

本课堂重点内容：

HTML部分

  • HTML作用详解
  • HTML语义化

CSS部分

  • CSS各部分构成
  • CSS使用方法
  • CSS选择器组
  • CSS继承
  • CSS求值过程解析
  • CSS布局方式及相关技术
  • CSS盒模型

HTML

  1. HTML是什么？

HTML是一个标签语言，类似下面这样

<h1>这是一个标签</h1>

标签内部还可以使用它的属性，如下

<img src="photo.jpg"/>

以上是使用图片标签，然后图片的链接通过给src属性赋值

完整的HTML代码例子如下

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

!doctype标记了当前使用的HTML文件的版本，浏览器会根据这个决定选用哪种渲染模式

html标签是根标签，head标签里面放入页面的元数据，是页面需要的信息又不需要直接呈现给用户的，比如页面的编码等。

body里面是我们真正呈现给用户的，比如上面例子里面的一个一级标题和段落内容。

image.png

我们的浏览器会解析html生成DOM树。

  1. HTML语义化

语义化是什么？

  • HTML中元素、属性和属性值都有某些含义
  • 开发者遵循语义来编写HTML
    • 有序列表用ol，无序列表用ul
    • lang属性表示内容所使用的语言

语义化的作用是什么？

  • 开发者方便修改、维护页面，缩减阅读的成本
  • 即使没有css也能拥有很好的排版
  • 利于SEO
  • 辅助屏幕阅读器功能

CSS

  1. CSS代码构成

如下面代码所示，其中h1是css中的选择器，指向html中的标签h1，大括号中的color以及font-size都是h1标签的不同的样式的属性名，给他们赋上指定的值可以更改h1对应的样式；而这种[属性：属性值]的形式我们称之为声明。

h1{
    color:white;
    font-size:14px;
}
  1. css使用方法

在页面中使用CSS有三种方法，如下代码所示：

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css"

<!-- 嵌入 -->
<style>
    li { margin: 0; list-style: none;}
    p { margin: 1em 0; }
</style>

<!-- 内联 -->
<p style="margin:1em 0">example content</p>

css的工作方法如下图所示：

image.png

  1. css选择器

css选择器的功能方便设置页面中的指定元素的样式。包括通配选择器，id选择器，类选择器，标签选择器，属性选择器，伪类选择器等等。

我们可以使用选择器组来批量的设置样式，如下所示：

body, h1, h2, h3, h4, h5, h6, ol, li {
    margin:1em 0;
}

如此我们就修改了多个标签的margin属性值。

  1. CSS继承

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

显示继承：针对不会自动继承的属性，可以显示的赋值为inherit;也可以配合通配选择器等方式来实现批量继承。

初始值：CSS中，每个属性都有一个初始值，使用initial可以显示重置为初始值。

  1. CSS求值过程

image.png

image.png

image.png

  1. CSS布局及相关技术

布局相关技术：

常规流：行级、块级、表格布局、FlexBox、Grid布局

另外有浮动、绝对定位布局。

  1. 盒模型

块级：不和其他盒子并列摆放，在常规文档流中由上往下排列，自动占满父盒模型 行级：和其他行级盒子一起放在一行或拆分成多行，且height、width不适用

avatar
文章
阅读
粉丝