本文章资料主要来自饥人谷2020版前端体系课,本文为课程笔记。

布局 vs 定位

布局是基于平面空间的二维坐标,定位基于垂直于屏幕的三维坐标。

文档流与盒模型

之前我们知道,文档流(Normal Flow)正常从上到下,从左到右根据盒模型依次排列,但是一个盒模型其实有多个图层,从下到上依次为:

  1. background
  2. border
  3. 块级子元素
  4. 浮动元素
  5. 内联子元素(文字内容)

通过上面的模型,可知浮动元素脱离文档流,就是从第三层的块级子元素变为了第四层的浮动元素。

阅读全文 »

本文章资料主要来自饥人谷2020版前端体系课,本文为课程笔记。

布局

布局分类

  1. 固定宽度布局
    • 一般宽度为960/1000/1024px
  2. 不固定宽度布局
    • 依托文档流原理布局
  3. 响应式布局
    • PC上固定宽度,手机上不固定宽度
    • 是一种混合布局
    • 三个特征:媒体查询(Media queries),自适应图像(Images that resize)与网格布局(Flexible grid-based layout)
      阅读全文 »

什么是URL

根据维基百科,URL(Uniform Resuorce Locator)统一资源定位器是因特网上标准的资源的地址(Address),如同在网络上的门牌。它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址,现在它已经被万维网联盟编制为因特网标准。

上面的解释属于比较多,我理解为,URL就是浏览器地址栏内的地址。

URL的标准格式
协议类型:// 服务器地址: 端口号 /文件路径 文件名 ?查询参数 #片段id
阅读全文 »

本文章资料主要来自饥人谷2020版前端体系课,本文为课程笔记。

CSS的历史

由哈肯·维姆·莱(Håkon Wium Lie)与1994年提出css的概念。

CSS(Cascading Style Sheets)中文为层叠样式表。

CSS版本

当前使用最广泛的为CSS2.1,最新为CSS3,分模块不停升级。

CSS版本兼容性

手工测试

can i use

阅读全文 »

a标签

a标签一般用作制作链接,内容一般为文字,图片或者按钮,可以用来跳转到其他页面或者页面内部锚点,也可用来发邮件、打电话等

实现相应的功能,需要添加相应的属性及属性值。

a标签的属性

a标签有以下几个常用属性

  • href(hyper reference)
    • 用来指定链接位置
  • target
    • 指定打开链接的方式
  • download
    • HTML5新增属性,用来下载指定url
  • rel=noopener
    阅读全文 »

英语小课堂

英文 翻译 英文 翻译
hyper 超级 blank 空白
target 目标 parent 父母
reference 引用 self 自己
frame 框架 load 加载
error 错误 canvas 画布

HTML预览方式

  • http-server
    • 全局安装http-server
      • yarn global add http-server
    • 启动http-server
      • http-server . -c-1hs . -c-1
  • parcel
    • 全局安装parcel
      • yarn global add parcel
    • 启动parcel

HTML的由来

  • HTML于1990年左右由Tim Berners Lee发明
  • 全称为Hypertext Markup Language(超文本标记语言)
  • 功能是结构化页面信息及一定程度上标识外观及语义
    阅读全文 »

英语小课堂

英文 翻译 英文 翻译
heading 标题 order 顺序
body 正文 ordered 有序
paragraph 段落 unordered 无序
section 章节 description 描述
article 文章 term 术语
mian 主要的 data 数据
aside 旁边的 quote 引用
anchor 锚点 block
strong 强壮 inline 行内
emphasis 强调 break 打断
阅读全文 »

WWW的历史

WWW(World Wide Web) = URL(Uniform Resource Locator) + HTTP(HyperText Transport Protocol) + HTML(HyperText Markup Language)

HTML的历史

  • 诞生于1990年左右

    • 由Tim Berners Lee发明
    • 于2004年被英女皇授予爵士称号
    • 与2017年被颁发图灵奖
  • WWW的作用

    • 可以使用户直接输入网址,就能看到网页,简化了用户操作
  • WWW(互联网)的本质

0%