前端基础 HTML 与 CSS ｜ 青训营笔记

Gavrain
104 阅读4分钟

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

HTML 与 CSS 是新人入门前端最先接触的基础内容，虽然只是简单的标记语言，但是平常学习工作中基本不会系统复习，难免忘记一些细节，这次趁着暑期青训营来做一次简要回顾。

1.HTML

1.1 HyperText Markup Language

HTML 全称为 HyperText Markup Language 即超文本标记语言。其中，超文本指具有超链接功能的文档，文档中的超链接可以指向其他资源。标记语言指的是这种语言将文本以及文本相关信息结合来展现文档结构。

1.2 语言组成

HTML 使用 HTML 元素来组织记录信息。

一个 HTML 元素通常包括一对开始、结束标签和包含其中的内容，如果不包含内容则可以是一个单独的开始标签或自闭和标签。

标签可以包含一些属性，用于定义行为和表现形式或者记录信息，标签与标签上的属性不区分大小写。

//示例
<p>content</p>
<br/>
<img src="/favicon.png"

1.3 文档组成

一个典型的 HTML 文档通常有如下的组织形式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" ...>
        <title>TITLE</title>
        ...
    </head>
    <body>
        ...
    </body>
</html>

<!DOCTYPE> 用于声明文档的 HTML 版本，来通知浏览器渲染的方式，现代浏览器支持 HTML5 ， 故指定为 <!DOCTYPE html> 即可。

<html> 标签为页面的开头结尾，包裹其他所有元素。

<head> 标签包含一些页面描述信息，通常用户不可见。如 <meta> <link>

<body> 标签包含用户可访问的内容。

1.4 语义化

HTML中的元素、属性及属性值都拥有某些含义，开发者应该遵循语义来编写HTML，例如：

  • <ol> 表示有序列表，<ul> 表示无序列表
  • lang 属性表示内容所使用的语言

HTML5 标准引入了一批语义化标签：article、header、footer、aside、sections等

根据标签的语义来编写文档，不仅有利于维护人员阅读与修改页面，也有利于搜索引擎和屏幕阅读器对页面信息的抓取识别。

过去通常全部使用 <div> ，页面代码的阅读性就比较差。

2. CSS

2.1 Cascading Style Sheets

CSS 全称为 Cascading Style Sheets 即层叠样式表，是一种用于定义页面元素样式的标记语言，层叠指的是相同元素的相同属性的不同声明会相互覆盖，最终展现为权重最高的声明指定的样式。

通常表现为如下的形式：

    h1{                    //选择器
        color: white;      //属性：属性值；
        font-size: 16px;
    }

属性值可以指定为为 inherit 继承父元素的值或 inital 重置为初始值。

2.2 引入方式

  1. 内联
<p style="color:white">content</p>
  1. 嵌入
<style>
    <p style="color:white">content</p>
</style>
  1. 外链
<link rel="stylesheet" href="style.css">

其中，内联方式中的声明权重大于嵌入方式，嵌入方式大于外链方式。

2.3 选择器

选择器类型

1. 通配符选择器
    * { ... }
    选择所有元素

2. 标签选择器 && 伪元素选择器
    h1 { ... }
    h1::before { ... }
    
3. 类选择器&&伪类选择器
    .active { ... }
    .active:hover { ... }
    
4. id 选择器 && 属性选择器
    #dd { ... }
    [attribute="..."] { ... }

组合方式

1. 直接组合
    div.active 具有 "active" class 的 div 标签

2. 后代组合
    div p 为 div 标签后代的 p 标签
    
3. 亲子组合
    div > p 为 div标签直接后代的 p 标签
    
4. 兄弟组合
    div ~ p 与 div 标签同级的 p 标签

5. 相邻选择器
    div + p 紧跟在 div 标签后的 p 标签

不同组合的选择器具有不同的权重，选择器类型中 4>3>2>1 ，组合方式不影响权重，且不同权重等级的选择器无进制关系，再多的标签选择器组合起来也无法覆盖一个 id 选择器。

2.5 颜色 && 字体

颜色表示方式

rgb(r,g,b)
rgba(r,g,b,a) //a: 透明度
#RRGGBB //每位均为16进制
#RRGGBBAA
hsl(h,s,l) //h: 色相 s: 饱和度 L: 亮度
hsla(h,s,l,a)

font-family

通用字体族分为：

  • Serif 衬线体：Georgia
  • Sans-Serif 无衬线体：Arial
  • Cursive 手写体：楷体
  • Fantasy 艺术字体：Papyrus
  • Monospace 等宽字体：Consolas

在字体列表最后写上通用字体族可以在所有字体均不可用时，让浏览器指定一种同风格字体使用。

英文字体应在中文字体前，因为中文字题也包含字母数字的样式。

另外也可以通过如下形式引入网络字体资源：

<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://a.com/Megrim.woff) format('woff');
  }
  
  p {
      font-family: 'Megrim';
  }
</style>

支持 .ttf .otf .woff .eot .svg 等几种格式

常用属性速记

  • font-size
  • font-style
  • font-weight
  • color
  • line-height
  • text-align
  • text-decoration
  • white-space

2.6 布局

  • 常规流
    • 行级
    • 块级
    • Table
    • Flex
    • Grid
  • 浮动
  • Absolute

常规流中不同类型的元素会生成不同的排版上下文

avatar
文章
阅读
粉丝