Internetingishard笔记

_leslie
189 阅读16分钟

前端入门，网站地址：www.internetingishard.com/

第一章：introduction

  • Atom Editor的一些快捷命令（Mac）：
    • cmd + N 创建新文件
    • Ctrl + Tab 切换当前选中文件
    • Cmd + T 模糊查询并跳转到需要的文件

第二章：basic web pages

  • WYSIWYG is an acronym for "what you see is what you get"
  • ul 标签中只接受 li，如果想加 p 等标签，需要包在 li 里面
  • 可以到MDN上查html元素参考使用，搜索方式：MDN some-element：developer.mozilla.org/en-US/docs/…
  • 块级元素和行级元素（如 p,li 和 em,strong,img等）
    • INLINE ELEMENTS.png
  • HTML5更加语义化，去除了类似 bold 和 italic 的标签，代之以 emphasis 和 strong 等，可以自定义强调的 css 样式，与 css 负责的功能区分更加明晰
  • HTML将多个连续的whitespace字符合并并转化成成单个空格字符
  • <hr> 元素表示一个主题或部分的完成（默认是一条分割直线），通常用于场景的切换或者信件里正文最后一段和尾注P.S.的分隔。注意不要滥用，因为只是审美上的工作的话可以完全交给css来完成

第三章：links and images

  • 元素-属性，元素为其包含的内容添加语义，属性为其附着于的元素添加语义
    • ATTRIBUTE.png
  • <a> 标签的属性target=“_black”可以打开浏览器的新tab页跳转
  • root-relative URLs指开发网站所部署的服务器上的根目录
  • 术语 Slug 在web开发领域的意思是唯一标识一个网页地址的标识，一般是URL的最后一串字符。MDN的定义slug是URL中" /docs/ “之后的字符串，比如：developer.mozilla.org/en-US/docs/… 中，Glossary/Slug就是这里的slug
  • 不同格式的图片：JPG，GIF，PNG，SVG优缺点和使用注意：
    • JPG 适用于照片 和 （影像梯度比较多的）影像强度和颜色方向性变化比较大的 图片；同时JPG不支持透明像素（放大近看会有白边）
    • GIF 有简单动画，不适合用于照片，因为调色板的范围很小；透明度上只能选全透明或者不透明，无法选择半透明，难以呈现细节
    • PNG 适用于一切非照片和动画的使用场景，因为同样图片质量的PNG图片文件比JPG要大很多；调色板范围大，可以选择可变的透明度，一般用于图标，logo等
    • SVG 是基于向量（其他都是基于像素的）图片格式，可以无损，因此多用于响应式设计，应用场景和PNG大致相同，并且建议尽可能多的使用SVG；但图片中有很多文字的话，就不建议用SVG了，因为不仅需要使用工具转化很麻烦，而且转化后的文件会很大
  • 在视网膜屏幕上，pixel-based图片格式需要是用户希望看到大小的两倍，比如你希望图片在视网膜屏上是75x75大小的，你就要传150x150大小的图片
  • img 标签一般都要加alt属性，方便浏览器提取信息和兼容性（残障人士）
  • Html中的特殊字符HTML entity，一个entity始于字符&，终于字符;，比如（< > &等）
  • HTML中的引号：“  ”  ‘  ’ （left-double quote，其他类似）

第四章：hello, css

  • mockup：版面设计、实体模型，一般是设计师给出
  • link 标签的属性rel表示relationship，
  • Css中em可以基于base字体大小而变化，比如body中font-size: 18px; h1可以设置2em，即为两倍
  • CSS中，font-family: "Helvetica", "Arial", sans-serif; 意思是选择字体，如果左边的没有，依次往右；但现在一般不用系统字体了，都用web字体
  • ul 或 ol 中的list-style-type可以修改默认的其中 li 元素的图样，比如 list-style-type: none; 另外也可以通过list-style-image特性来自定义li前面的icon，比如：developer.mozilla.org/en-US/docs/…
  • text-decoration特性可以决定文字是否加下划线，比如 text-decoration: none; 就是不加。要划掉文字时，最好使用html标签 ins, del 元素而不是直接用css里text-decoration设置成line-through
  • Css 层级划分（优先级依次增高，后者覆盖前者css样式）：
    1. 浏览器的默认stylesheet
    2. 用户定义的stylesheet
    3. 外部的stylesheet（由我们定义，可以用于多个page的，就是head meta数据中的 link）
    4. 特殊页面的stylesheet（同样由我们定义，就是head meta数据中的 style 元素）
    5. 行内style（建议不要经常用，比如<a href='nowhere.html' style='color: #990000; text-decoration: line-through;'>obsolete link</a>）
    • EXTERNAL STYLESHEET.png

第五章：css box model

  • block box的宽度取决于其父容器，而inline box的宽度取决于它包含的内容
  • inline box并不影响行间距，它们只是用于给block内的内容增加样式
  • 可以通过设置display特性来修改box是block的还是inline的，比如 em, strong, img 便可以将默认为inline的盒子变成block的（注意li是块元素），eg: 
    img {
  display: block;
}
  • 盒模型中，border里面的都会有background；border: size style color
  • padding和margin的取舍，因为很多地方二者都可以：
    • padding有background，margin无
    • Padding包含在元素点击的区域，margin无
    • Margin会垂直收缩，padding不会（即上下布局的两个box，如果都有margin，那么会合二为一，不过可以通过在二者中间放置一个透明 <div style='padding-top: 1px'></div> 来达到防止二者margin合并的目的，因为padding不会collapse）
  • inline box会完全忽略top, bottom的margin，如果把margin改成padding的话，比如strong { padding: 50px; }，那么inline box也不会影响外层的box的布局
  • div和span的区别在于：前者应用于block级的内容，后者应用于inline content
  • div 中的内容自动换行：英文word-break: break-all;
  • div中的width属性默认是指应用于content的，所以实际显示的width还会加上margin、border、padding，如果想要整一个div元素width指定，就需要使用box-sizing特性，比如 div {width: 200px; box-sizing: border-box; }，更加直观，一般会把这个设置放在css最开始的全局设置中
  • text-align特性可以控制block-level元素内的内容和inline box的对齐方式，比如body { text-align: center; }会使可见的内容区域中所有的块级内容居中（比如p），但并不会使各块元素居中
  • 使block element块级元素水平对齐的两个方法（inline element是通过设置text-align属性来对齐的）：
    • 传统对齐：
      • auto-margins可以用于居中对齐（需要有width明显有设置的时候）
      • float可用于左右对齐
    • 现代对齐flexbox
  • 覆盖浏览器默认的style，比如margin默认设置之类，比如 * { margin: 0; padding: 0; box-sizing: border-box; }，通常置于css文件最前

第六章：css selectors

  • 后代选择器descendant selector，比如 .synopsis em { color: #FFF; }，可以只更改类synopsis中的em元素里的内容
  • 子选择器child combinator，比如 .my-things > li { margin: 2em; }，必须直接父子关系
  • 链接元素的伪类（也可以用于其他选择器）：
    • :link 用户未曾访问过的链接
    • :visited 访问过的。。
    • :hover 鼠标悬停
    • :active 鼠标按下链接时
    • 可以通过 a:visited:hover { color: orange; }的方式创建访问过的链接悬停时。。，类似于链接
  • 结构的伪类：
    • :last-of-type 选择特定类型所在的父元素内盖类型的最后一个元素，比如 p:last-of-type { margin-bottom: 50px; }
  • CSS各选择器的优先级（从最强到最弱），即css样式的书写顺序只作用于平级之间，e.g.：
    • #button-2
    • .button:link
    • a:link 和 .synopsis em （二者平级）
    • .button
    • a
  • 为防止css的这种优先级带来的困扰，可以参考方法BEM，它从根本上杜绝了这种情况的发生：getbem.com/introductio…

第七章：floats

  • Float属性不仅可以使元素对齐，并且可以让下一个元素浮动在自己的区域，形成一种叠加的状态，所以float的元素不参与实际页面高度计算，而且会自动排列在上方最后一个没设置float的元素的下方
  • floated boxes总是相对于它们的父元素对齐
  • 当多个相邻元素都设置相同float属性时，它们就会像垂直方向那样堆叠起来
  • 为防止设置了float的元素A的下一个未设置float属性的元素B“流动”在A周围，可以有两种方法：
    • 在B元素里设置clear: both;（当然也可以只选择只清除left或者right）
    • 设置overflow: hiding;（在包含设置了float的元素的祖先节点的选择器里设置）
    • CLEARING WITH.png
  • 给内容应用float属性
    • 比如给内容中的图片 img 设置float之后，其他文字的内容就会形成类似环绕浮板的效果
    • overflow: hidden;的另一作用就是，1中的浮板效果不想要时，可以使文字在左侧是设置了float的元素时（图片或者头像等），保持文字竖直向下呈方形

第八章：flexbox

  • 给父元素设置了display: flex;之后，就可以使用弹性盒子来进行里面内容的对齐设置，可以使用justify-content来达到弹性盒子中内容的居中或左右对齐
  • flexbox中有垂直对齐align-items对应于justify-content这种水平对齐方式（实际上是对应于justify-content的实际方向而改变的）
  • FLEX-DIRECTION ROW;.png
  • flex-wrap: warp; 可以设置超出水平布局边界的元素移到下一行
  • flex-direction: column; 可以改变水平布局为垂直布局，同时也能修改元素的顺序（作为整行或整列而言，比如行/列逆输出，但是order属性却可以跨越行/列）
  • align-self 属性可以越过其父元素设置的align-items属性，从而重新自定义竖直方向上的对齐方式
  • flex: 1; 属性可以设置每个flex-item相对其他item的大小（自动计算），如果需要设置定长的flex-item，那么需要设置flex: initial，并给出width
  • 弹性盒子中的auto-margins：比如一个设置了display: flex的盒子里有三个item，我们需要把最后俩个item给做成一组，此时，可以设置中间的 .bbox { margin-left: auto; }，因为弹性盒子中的margin会自动吃掉所有空余的空间，从而不需要用一个div元素将后两个item给重新分组也可以实现

第九章：advanced positioning

  • 除了普通情况下的静态定位（按顺序往下一个个堆叠盒子），还有其他三种布局方案layout schemes，这三种统称为positioned elements
  • RELATIVE.png
  • .item-relative { position: relative; top: 30px; left: 30px; }可以设置相对
  • 注意position: absolute; 设置之后，该元素就会被移出网页的flow，不再影响周围的其他元素了，不再占width，height了，但relative还是占据原来的位置的
  • absolute主要和relative一起使用，自定义改变absolute相对的原点之后（即设置当前元素的父元素为position: relative或其他positioned elements之后，便可以达到该元素的布局相对于该父元素为原点作变换的目的，因为absolute elements的坐标总是相对于它自己最近的positioned element而言的）
  • position: fixed;设置后，元素的位置就不会随着滑动条的变化而变
  • z-index可以设置每个元素相对于用户的展示的前后次序，当然需要默认加上position: relative; 这行，因为只有positioned elements修改z-index才会生效

第十章：responsive design

  • 媒体查询media query:
    • 可以根据查看前端网页的设备不同，来进行响应的css规则的不同应用，比如@media only screen and (min-width: 401px) and (max-width: 960px) { body { background: #F5CF8E } }
    • ONLY SCREEN AND (MAX-WIDTH 400PX).png
  • 不同设备的css适配，建议从mobile -> tablet -> desktop，可以最大限度的重用CSS
  • 修改flex-item的width: 50%;，然后设置flex-wrap: wrap;弹性盒子可以自动变换
  • 响应式没有出现之前，一般移动设备上显示的也是桌面浏览器打开的页面布局，只是加了可以自动放大缩小，这种方式无法让mobile设备使用自己的布局，在html文件中的meta数据位置加上：<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' /> 就可以禁用

第十一章：responsive images

  • retina screen上每英寸的像素数量是普通屏幕的两倍，即视网膜屏上的每个像素相当于4个标准像素（简单化，因为有些视网膜屏是3倍）
  • 使用SVG图片时，为了保持图片在每种设备（桌面、平板、手机）上都自适应，需要在css中给图片元素img加上width: 100; 但是这样的话，desktop端的图就会变得非常大，这种情况下，可以加inline style，比如<img class='illustration' src='images/illustration.svg' style='max-width: 500px’/>，其中max-width的数值就是图片的原宽度
  • 而GIF，PNG，JPG格式的图片需要响应式时，要么直接给2x分辨率的图片，要么需要根据显示设备的不同（是否是视网膜屏）来选择展示正常分辨率的还是2x的。可以使用img元素中的srcset属性，比如：srcset='images/illustration-small.png 1x, images/illustration-big.png 2x’，1x和2x分别指示在普通和Retina屏分别使用的图片源
  • 在上述3中，因为使用srcset属性，所以在碰到视网膜屏时，设备便会下载2x分辨率的图片，但如果设备是视网膜屏的手机的时候（屏幕比桌面端浏览器小很多），其实1x的图片就已经够用了，这时可以再次使用srcset的另一特性，比如srcset='images/photo-big.jpg 2000w, images/photo-small.jpg 1000w’，然而还需要定义一个size，来辅助图片的自适应，比如：sizes='(min-width: 960px) 960px, 100vw’/>，这里的意思就是当屏幕至少是960像素宽的时候，展示的图片也是960像素的，否则浏览器就会展示屏幕宽度的100%的图片（vw是viewport width）
  • 另外，还可以使用art direction，需要用到picture和source两个元素
    • TALL IMAGE.png
    • 这里类似于media query，根据不同的屏幕大小适应不同图片，img则是为了兼容性（比如远古浏览器）
    • picture.png
  • 上述的各种自适应图片会在实际工作中变得十分复杂，一般的经验是：对于宽度小于600像素的图片，直接用1x，2x来选择；当有比较大的图片需要处理的时候，采用srcset+size的方式；而picture+source只在设计师强烈要求酷炫显示的时候采用

第十二章：semantic html

  • 一个网页的布局大纲可以通过工具来查看：gsnedders.html5.org/outliner/，它的计算过程是这样的：
    • CURRENT HEADING.png
  • 通过section标签，网页的大纲就会通过section来进行分割，而不是通过默认比较heading是几级来决定内容的上下级关系。（但是不建议这样做，并且section中至少存在一个heading）
    • html-sectioning-elements-00c3fd.png
  • asides可以用于放一些与article无关或很小程度上关联的东西，比如广告等；虽然asides也可以是放在article元素里面的
  • <a>标签里面也可以填email<a href='mailto:troymcclure@example.com'>

第十三章：html forms

  • 给盒子设置display: flex成为弹性盒子之后，默认是flex-direction: row，此时justify-content的方向是row-wise，align-items的方向是column-wise；设置了flex-direction: column之后，那么justify-content和align-items的方向就会交换
  • 表格：<form action='' method='get' class='speaker-form'>
    • action定义处理当前表格的URL，即点击submit后，表格收集到的数据所要发送到的地方，action=“”表示提交到当前所在的URL
    • form元素里的label的for特性和input的id特性必须要匹配（id选择器一般不用，这里只是为了将input和label对应起来）；name特性则定义了input收集到的需要传到后端的那个信息的变量名
    • Screenshot 2022-07-06 at 16.05.55.png
  • css属性选择器attribute selector，比如 input[type=‘text’] 只匹配type是text的input输入框（type还有email、radio等，更多可见developer.mozilla.org/en-US/docs/…）
  • 一个type=“radio”的input比较复杂，因为它们是成组出现的
    • 整一个组件被包在fieldset里面，有一个legend来描述它
    • 每一个radio按钮都有一个label
    • 同组的radio按钮都用一个name属性
    • 每一个radio按钮的值不同
    • Type of Talk.png
    • value='workshop'.png
  • 目前，filedset 还不支持弹性盒子flexbox的，所以要达到自定义样式，需要使用float等比较传统的模式
  • 这个属性：-webkit-appearance: none; 一般是用于chrome或Safari浏览器的，因为他俩是基于webkit开发的（一般不推荐使用）

第十四章：web typography

  • 之前，不同的浏览器有自己的字体标准，现在慢慢统一成.woff格式，常用的字体网站有：Font Squirrel，Gooogle Fonts等
  • 如何使用其他字体（两种方法）：
    • 本地下载字体再使用：
      1. 在css中使用字体：需要将@font-face { font-family: ‘Roboto’; src: url('Roboto-Light-webfont.woff') format('woff'); }加在对应.css文件的最上面。其中font-family字段的值就是我们在之后如何引用该字体的名字；这之后就可以在css规则中进行引用了（通过font-family）
      2. 为了使引入的一个家族的不同字体（斜体、正体、粗体等）互相关联，避免机械分别引入，需要在@font-face中将同一家族的不同字体设置成一个font-family，并在font-style和font-weight分别给出各字体的特点
      • ROBOTO-LIGHT.WOFF.png
    • 直接使用网络字体（比如Google Font）：
      1. 在谷歌字体中搜索对应字体：fonts.google.com/
      2. 复制对应的link元素到对应.html文件的head中
      3. 在css规则中应用该字体
    • LOCALLY HOSTED FONTS.png
  • 缩进&空行（都是为了区分段落，但最好不要同时用）text-indent
  • text-align: justify; 设置后，可以调整每一行的空白，尽量使一行看起来长度相等
  • 一行的文字不宜过长，因为这样读者进入下一行时比较麻烦，所以一些杂志或者电子书的排版都喜欢把文章分成多个列（经济学人很典型）
  • 其他基本的排版指导：
    • body元素中的字体大小font-size最好设置在14px和20px之间
    • 合理使用dash等其他符号（–, — ©）
    • 尽量不要使用text-decoration: underline除了hover的时候
    • 使用真正的italic或bold而不是浏览器合成的（如果没有很大性能影响的时候）
avatar
文章
阅读
粉丝