前端 | 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><blockquote></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><q></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 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器,而增加额外开销是否真的值得。
响应式/自适应图片
我们可以使用两个新的属性——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如何工作
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
有三个因素需要考虑,根据重要性排序如下,前面的更重要:
- 重要程度
- 优先级
- 资源顺序
具体度: 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()
计算。