黑白之海
当指针转向天台

前端 | HTML与CSS基础

在?看看代码。

唔我是觉得大家鼓捣静态博客比较久的话大部分HTML跟CSS知识其实都大差不差知道的【

本文就是——稍微写几个注意点?


主要参考书是《Head First HTML与CSS中文版》。 仅看,耗时8h.

不学CSS你是找不到工作的!


参考网络教程为MDN Web Docs

写代码是掌握 html 和 css 最好的办法。

练习网站我用的Glitch


HTML

MDN的HTML 介绍部分写着 (15–20 小时阅读/练习),但我看完并做完练习才花了三个钟头??? 可能MDN给的时间是针对零基础??

那么列一下我自己的耗时。

HTML部分

  • HTML 介绍 3h
  • 多媒体与嵌入 2h
  • HTML 表格 1h

CSS部分

  • 学习 CSS 的第一步 0.5h
  • 编写 CSS/CSS构建基础 7h
  • 添加文本样式/样式化文本 1h
  • CSS 布局/CSS排版 5h

JavaScript

  • JavaScript 第一步
  • 编写 JavaScript
  • 客户端 Web API
  • JavaScript 对象入门
  • 异步 JavaScript

Web 表单 — 处理用户数据

  • Web 表单

可访问性——让所有人都能使用 Web

  • 跨浏览器测试
  • 可访问性(辅助功能)

现代工具

  • Git 和 GitHub
  • 客户端 Web 开发工具入门
  • 客户端 JavaScript 开发框架入门 (React / Ember / Vue )

服务端网页编程

  • 第一步
  • Django网站框架(python)
  • Express网页框架(node.js / JavaScript)

尽可能使用相对链接

  • 首先,检查代码要容易得多——相对 URL 通常比绝对 URL 短得多,这使得阅读代码更容易。
  • 其次,在可能的情况下使用相对 URL 更有效。当使用绝对 URL 时,浏览器首先通过DNS(见万维网是如何工作的)查找服务器的真实位置,然后再转到该服务器并查找所请求的文件。另一方面,相对 URL,浏览器只在同一服务器上查找被请求的文件。因此,如果你使用绝对 URL 而不是相对 URL,你就会不断地让你的浏览器做额外的工作,这意味着它的效率会降低。

<img src="images/dinosaur.jpg">

Google 推荐诸如此类形式的做法,利于SEO/索引。

注意:搜索引擎也读取图像的文件名并把它们计入 SEO。因此你应该给你的图片取一个描述性的文件名:dinosaur.jpg 比 img835.png 要好。

在下载链接时使用 download 属性

在a元素中写入download 属性,作为默认的保存文件名。

电子邮件链接

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

更具体一点可以填入以下属性。

其中最常用的是主题 (subject)、抄送 (cc) 和主体 (body) (这不是一个真正的头字段,但允许您为新邮件指定一个短内容消息)。 每个字段及其值被指定为查询项。

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

描述列表

就是dl-dt-dd这样套,主要效果为自动缩进显示。

块引用blockquote

其中cite属性填入URL 指向引用的资源。

cite属性内容不会被浏览器显示、屏幕阅读器阅读,需使用 JavaScript 或 CSS,浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的,更好的方法是为元素附上链接。

意思就是单独写一部分包含cite的aherf出来。

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p> //这段

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
<hr>
<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p> //或者这段

缩略语abbr

<p>我们使用 <abbr title="超文本标记语言(Hyper text Markup Language)">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

<p><abbr title="美国国家航空航天局(National Aeronautics and Space Administration)">NASA</abbr> 做了一些动人心弦的事情。</p>

img元素

alt属性可以写入说明文字。

有一个更好的做法是使用 HTML5 的<figure><figcaption>元素。

从无障碍的角度来说,说明文字和 alt 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字,而 alt 文字只有在图片无法显示时才这样。所以,说明文字和 alt 的内容不应该一样,因为当图片无法显示时,它们会同时出现。尝试让你的图片不显示,看看效果如何。

示例如下:

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

注意<figure> 里不一定要是一张图片,只要是一个这样的独立内容单元: 用简洁、易懂的方式表达意图。 可以置于页面线性流的某处。 为主要内容提供重要的补充说明。 <figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。

多媒体嵌入

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

controls属性是提供控制组件。

<video> 标签内的内容 这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候,就会显示这段内容,这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容,在这个例子中我们提供了一个指向这个视频文件的链接,从而使用户至少可以访问到这个文件,而不会局限于浏览器的支持。

带字幕

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

svg

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

优点 将 SVG 内联减少 HTTP 请求,可以减少加载时间。 您可以为 SVG 元素分配class和id,并使用 CSS 修改样式,无论是在 SVG 中,还是 HTML 文档中的 CSS 样式规则。实际上,您可以使用任何 SVG 外观属性 作为 CSS 属性。 内联 SVG 是唯一可以让您在 SVG 图像上使用 CSS 交互(如:focus)和 CSS 动画的方法(即使在常规样式表中)。 您可以通过将 SVG 标记包在元素中,使其成为超链接。 缺点 这种方法只适用于在一个地方使用的 SVG。多次使用会导致资源密集型维护(resource-intensive maintenance)。 额外的 SVG 代码会增加 HTML 文件的大小。 浏览器不能像缓存普通图片一样缓存内联 SVG。 您可能会在<foreignObject> 元素中包含回退,但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器,而增加额外开销是否真的值得。

SVG 元素参考

响应式/自适应图片

我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示,帮助浏览器选择正确的一个资源。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset定义了我们允许浏览器选择的图像集,以及每个图像的大小。在每个逗号之前,我们写: 1.一个文件名 (elva-fairy-480w.jpg.) 2.一个空格 3.图像的固有宽度(以像素为单位)(480w)。注意,这里使用宽度描述符 w,而非你可能期望的 px。这是图像的真实大小,可以通过检查你电脑上的图片文件找到(例如,在 Mac 上,你可以在 Finder 上选择这个图像,然后按 Cmd + I 来显示信息)。

sizes定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时,什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下,在每个逗号之前,我们写: 1.一个媒体条件((max-width:480px))——你会在 CSS topic中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里,我们说“当可视窗口的宽度是 480 像素或更少”。 2.一个空格 3.当媒体条件为真时,图像将填充的槽的宽度(440px)

所以,有了这些属性,浏览器会: 1.查看设备宽度 2.检查sizes列表中哪个媒体条件是第一个为真 3.查看给予该媒体查询的槽大小 4.加载srcset列表中引用的最接近所选的槽大小的图像

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

HTML表格table

改变单元格所占宽度或者高度,使用colspan或者rowspan属性。

控制一整行或者一整列的样式,<col> <colgroup>,或者使用选择器:nth-child()

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

或者

<colgroup>
  <col style="background-color: yellow" span="2">
  <!-- 如果你想把这种样式信息应用到每一列,我们可以只使用一个 <col> 元素,不过需要包含 span 属性。span 需要一个无单位的数字值,用来制定你想要让这个样式应用到表格中多少列 -->
</colgroup>

你可以为你的表格增加一个标题,通过 <caption> 元素,再把 <caption> 元素放入 <table> 元素中。你应该把它放在<table> 标签的下面。

scope 属性

用来帮助视障者更好地理解单元格到底是行还是列的标题。

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>
<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

scope 还有两个可选的值: colgroup 和 rowgroup。这些用于位于多个列或行的顶部的标题。

id 和标题属性

跟scope属性近似。

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date</th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th id="haircut">Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>

  ...

</tbody>

手动搓表也太累了还不如excel直接写然后到哪个所见即所得模式里一贴【

CSS

CSS如何工作

MDN Web Docs

DOM(Document Object Model)是什么

一个 DOM 有一个树形结构,标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点(Node/DOM 或 DOM node)。节点由节点本身和其他 DOM 节点的关系定义,有些节点有父节点,有些节点有兄弟节点(同级节点)。 对于 DOM 的理解会很大程度上帮助你设计、调试和维护你的 CSS,因为 DOM 是你的 CSS 样式和文件内容的结合。当你使用浏览器 F12 调试的时候你需要操作 DOM 以查看使用了哪些规则。

选择器

标签属性选择器

形如a[title] { }等。

属性选择器

匹配规则看上面链接里的例子,感觉部分匹配用得多……?

伪类pseudo-class与伪元素pseudo-elements

伪类,用来样式化一个元素的特定状态。就是开头为冒号的关键字。

:nth-of-type用于固定间隔选择,示例:nth-of-type

tr:nth-of-type(2n){background-color:#333;color:white}

改变表格中偶数行。(用even也可以)

tr:nth-of-type(2n+1){background-color:#333;color:white}

改编表格中奇数行。(2n-1或者odd都可以)

伪元素,选择一个元素的某个部分而不是元素自己。伪元素开头为双冒号::。例如,::first-line是会选择一个元素(下面的情况中是<p>)中的第一行,类似<span>包在了第一个被格式化的行外面,然后选择这个<span>

p::first-line { }

::before::after是用CSS插入内容,分别是放到元素的前或者后,一般是用来插入图标。因为部分屏幕阅读器无法读出这种方法插入的字符,也不方便后续的修改编辑等。

这些伪元素的更推荐的用法是插入一个图标,例如下面的示例加入的一个小箭头,作为一个视觉性的提示,而且我们并不希望屏幕阅读器读出它。这些伪元素经常用于插入空字符串,其后可以像页面上的其他元素被样式化。

比如标题<h1>等前面/后面的提示图标。

全局选择器

全局选择器

说实话这个例子中文版我没看懂,我特意切回英文又看了一遍来着……

关系选择器

margin与padding

需要先理解网页中的box model概念。

margin是元素与元素之间的间距,是外边距。而padding是元素本身内容与边框的间距,是内边距。

边缘可以顺时针顺序缩写,上-右-下-左

padding: 0px 20px 30px 10px;

假如四边都等距,则可以写成padding: 20px;

对应的两边等距,则可以写成margin: 0px 20px;

inline元素不能单独设定宽高,这时候可以使用display。

它有一个特殊的值,它在内联和块之间提供了一个中间状态display: inline-block。这对于以下情况非常有用:您不希望一个项切换到新行,但希望它可以设定宽度和高度,并避免上面看到的重叠。设置width 和height 属性会生效。padding, margin, 以及border 会推开其他元素。但是,它不会跳转到新行,如果显式添加 width 和 height 属性,它只会变得比其内容更大。

当您想要通过添加内边距使链接具有更大的命中区域时,这是很有用的。 是像 一样的内联元素;你可以使用 display: inline-block 来设置内边距,让用户更容易点击链接。

如果不设定display: inline-block,inline元素单独设定了margin值:

垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

因此想要得到垂直方向非重叠、将其他inline元素推开的效果,我们需要display: inline-block+inline元素设置margin值。

其他属性的缩写

顺序可以改换,不影响。

border: thin solid #007e7e;

border-spacing: 10px30px; // 10px的水平边框,30px的垂直边框间距

background: white url(image/cocktail.gif) repeat-x

font: font-style font-variant font-weight font-size/line-height font-family

a元素


a {

}

// 未曾访问的
a:link {
	color: green;
}

// 已访问的
a:visited{
	color:red;
}

// 只会在用户使用键盘控制选定元素的时候激活
a:focus{
	color:blue;
}

// 鼠标悬停
a:hover{
	color:yellow;
}

// 当用鼠标交互时它代表的是用户按下按键和松开按键之间的时间
a:active{
	color:white;
}

这几个规则的顺序是有意义的,因为链接的样式是建立在另一个样式之上的,比如,第一个规则的样式也会在后面的规则中生效,一个链接被激活 (activated) 的时候,它也是处于悬停 (hover) 状态的。如果你搞错了顺序,那么就可能不会产生正确的效果。要记住这个顺序,你可以尝试这样帮助记忆:LoVe Fears H****Ate.

层叠cascade

有三个因素需要考虑,根据重要性排序如下,前面的更重要:

  1. 重要程度
  2. 优先级
  3. 资源顺序

具体度: 0 0 0 ←像这样,有三位数,第一位代表有id的元素个数,第二位代表类/伪类/属性选择器的个数,第三位代表元素/伪元素的个数。

接下来按CSS作者的样式、读者编写的样式、浏览器默认的的样式排序。

下一步,在各自范围内按具体度排序。最后结尾具体度最高的规则即结果。

如果没有对应规则,就继承样式。

MDN Web Docs提到其实优先度计算有四位数,传送门

注: 通用选择器 (*),组合符 (+, >, ~, ' ‘),和否定伪类 (:not) 不会影响优先级。

css的覆盖

首先在HTML中类的顺序不影响最终结果。

<p class="greentea raspberry blueberry">

而在CSS中最下面的内容优先级最高,比如有两条都是font-family,那么以更下面的一条为准。

p { color: black; }

.greentea{ color: green; }

p.greentea{ color: green; }

p.raspberry{ color: blue; }

p.blueberry{ color: purple; }

这个例子中最终呈现的规则将会是p.blueberry{ color: purple; }

在HTML中引用CSS文件也一样,如果引用了多个CSS文件,其中都写了font-family样式,以更下面的一条为准。因此我们修改博客样式的时候,可以引入一个custom.css,写上自定义部分,把它放在原来引用<link>的后面即可。

!important

覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后,或者更高优先级。 强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式,它会使调试 CSS 问题非常困难,特别是在大型样式表中。

css的继承

像 widths (上面提到的), margins, padding, 和 borders 不会被继承。如果 borders 可以被继承,每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果! 哪些属性属于默认继承很大程度上是由常识决定的。

如果您没有完全理解层叠,优先级和继承,也请不要担心!这绝对是我们到目前为止在课程中所涉及到的最复杂的事情,即使是专业的 web 开发人员有时也会觉得棘手。

text-align的范围

该属性会影响一个元素中所有内联内容的对齐样式。只能用于块元素(如<div>),如果直接用于内联元素(如<img>)就没有作用了。

子类


// 这是所有子类
#elixirs h2{
	color:black;
}

// 这是直接子类
#elixirs>h2{
	color:black;
}

// 这是子类的子类
#elixirs blockquote h2{
	color:black;
}

flow流

并列放置两个块元素时,重叠边界的高度是两个元素中最大边界的值。

float浮动

设置了浮动属性的元素是在其他元素上层,通过设置其他元素的边界值来达成分列的效果。

clear属性

设置漂移元素无法出现在该元素的某一边。

函数

calc()

calculate 的缩写,CSS3 新增,为元素指定动态宽度、长度等,注意此处的动态是计算之后得一个值。

书写模式writing-mode与逻辑属性逻辑值logical properties and values

float的逻辑值暂时只有 Firefox 和 Firefox for Android 支持,上面的例子可能无法生效。

我:像这种就应该没啥用吧!!

溢出overflowing content

用overflow属性控制表现溢出内容的样式。

overflow的默认值为visible,想隐藏则改为overflow: hidden

显示滚动条,overflow: scroll

仅仅显示y轴滚动条,overflow-y: scroll

有溢出内容才显示滚动条,overflow: auto

应尽量测试溢出时的情况。

CSS的值value

RGB跟RGBA就不说了。

HSL 和 HSLA 这个很适合做设计欸,三个百分数,分别代表色调、饱和度、亮度。这样可以比较快速地得到相同亮度的搭配色。

flex弹性盒子

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display:flex; 
  justify-content: space-between;
}

网格grid

      .container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
      }
        .tags {
        margin: 0;
        padding: 0;
        list-style: none;
        flex: 1 20px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
      }

定位position

固定用的fixed和滑动到某个位置再固定的sticky注意一下……?

多栏式布局

可以活用比例、calc()计算。