HTML与CSS | 青训营笔记

靛青
347 阅读3分钟

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

关于前端

前端工程师是使用web技术栈，解决多端图像界面人机交互问题的工程师。

  • 关注方面： 功能、美观、无障碍、安全、性能、兼容性、体验
  • 火热新技术：
    1. node：服务器端
    2. electron、react native：客户端
    3. web RTC：p2p的在线传输、多人会议
    4. webGL：3D游戏
    5. webASSEMBLY：可以把c++、rust等语言编译成浏览器可识别运行的代码

HTML（HyperText Markup Language）超文本标记语言

dom树

image.png

  • <!doctype> 标记当前html使用的什么版本，告知浏览器的解析器，用什么文档类型规范来解析这个文档，使用什么渲染模式，不写可能用古早的怪异模式
  • <html> 根标签
  • <head> 页面源数据但不显示的，标题、编码
  • <body> 呈现

语法

属性值推荐用双引号；标签和属性名推荐小写

标签

  • <ol>：有序列表；<ul>：无序列表 ==》一对多
  • <dl>：定义列表；<dt>：定义标题；<dd>：定义描述 ==》多对多
  • alt属性：替代性文本，加载失败时显示
  • <input>：
    • type=number/date类型时可以设置min/max
    • list属性可以设置提示选项
<input list="countries"/>
<datalist id="countries">
    <options>China</options>
    <options>Greece</options>
</datalist>
  • 引用
    • <blockquote> 块级引用，cite属性设置引用链接
    • <cite> 短引用，标题、章节引入书名等
    • <q> 短引用，内容提过的话再提
    • <code> 代码，外套<pre>可引多行代码
    • <strong> 加粗，含义的重点
    • <em> 一句话里的重点
  • 语义化标签
    • <header>=><nav>、<main>=><article>、<aside>、<footer>
    • 代码可读性(同事)、可维护性(浏览器)、搜索引擎优化(搜索引擎)、提升无障碍性(屏幕阅读器)

CSS（Cascading Style Sheets）层叠样式表

属性

  • 页面中使用css的方式：

    1. 外链link：<link rel="stylesheet">
    2. 标签嵌入：<style></style>
    3. 行内内嵌

  • 选择器

    1. id 选择器（ # myid）
    2. 类选择器（.myclassname）
    3. 标签选择器（div, h1, p）
    4. 相邻选择器（h1 + p）
    5. 子选择器（ul < li）
    6. 后代选择器（li a）
    7. 通配符选择器（ * ）
    8. 属性选择器（a[href^="#"]）加方括号选择某标签下的某属性，还可加正则匹配
    9. 伪类选择器（a: hover, li: nth 一 child）

  • 伪类

    1. 状态性伪类：通过状态选中a:link、a:visited、a:hover、a:active、:focus、
    2. 结构性伪类：通过在列表中的位置选中，li:first-child、li:last-child、nth-child(n)

  • 伪元素：创建一个DOM树没有定义的虚拟元素::before

  • 组合选择器 image.png

  • 颜色

    • rgb（红，绿，蓝），0为纯色全0黑；255无色全1白
    • hsla（颜色、饱和度%、亮度%），
    • alpha透明度 0透明1不透明

  • font

    • web Font:在线字体@font-face{font-family:f1;src:url("https://.woff2") format("woff2")}

  • 选择器优先级：!important > id > class > tag > *

  • 继承：和文字相关的常能继承，和盒模型有关的属性不能继承(如宽度、box-sizing)

  • 初始值：background-color初始值transparent透明，可以用initial关键字显式重置为初始值

  • css 渲染步骤 1673777059399.jpg

盒子模型(box-sizing:content-box默认)

  • content：width、height百分数相对于容器contentbox的宽度高度，只有容器指定了具体值百分数才生效
  • padding：上 下；上 右 下 左；内边距百分数相对于容器宽度
  • border：三种属性width、style、color；四个方向top、right、bottom、left
  • margin：margin collapse非相加而是取最大
  • box-sizing:border-box：width、height包含content、padding、border

布局

image.png

  • 块级元素：body、article、div、main、section、h1-6、p、ul、ol、li、dl
  • 行级元素：span、em、strong、code、img、a、br、input、select、label、textarea
  • IFC：行级排版上下文，值包含行级盒子的容器，会在一行内水平摆放，放不下换行，长单词默认不换行，会避开浮动元素
  • BFC：
    • 产生条件：根元素、浮动、绝对定位、inline-block、flex子项、grid子项、overf不是visible的块盒、display:flow-root
    • 排版规则：盒子从上到下摆放，垂直margin合并，BFC内盒子的margin不会和外部合并(即不会高度塌陷)，不会和浮动元素重叠
  • overflow：visible、hidden、scroll
  • flex布局
  • grid布局：grid-area:1/1/3/3通过选中四边位置选中网格
  • float浮动：为实现文字环绕
  • position定位：static、relative、absolute、fixed、sticky
avatar
文章
阅读
粉丝