HTML+CSS一篇文章搞定

Krcoding

已于 2022-06-28 15:32:53 修改

阅读量342

点赞数 1

分类专栏：前端文章标签： html 前端 css

于 2022-06-21 21:11:18 首次发布

本文链接：https://blog.csdn.net/weixin_51580574/article/details/125398601

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

HTML+CSS？一篇文章就够了

HTML+CSS？一篇文章就够了

HTML

简介

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

例子

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

在 href 属性中指定链接的地址。

上述例子会成为一个链接。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

图像的名称和尺寸都是通过属性的形式提供的。

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

HTML 实例解释

`<p>` 元素：

<p>This is my first paragraph.</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。

元素内容是：This is my first paragraph。

`<body>` 元素：

<body>
<p>This is my first paragraph.</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

`<html>` 元素：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。

元素内容是另一个 HTML 元素（body 元素）。

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 XHTML 版本中强制使用小写。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

始终为属性值添加引号，属性值应该始终包括在引号内。

注释

下面就是格式：

<!-- This is a comment -->

引用

HTML <q> 元素定义短的引用，浏览器通常会为 <q> 元素包围引号。
HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。
HTML <abbr> 元素定义缩写或首字母缩略语，对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

<abbr>    //定义缩写或首字母缩略语。
<address>    //定义文档作者或拥有者的联系信息。
<bdo>    //定义文本方向。
<blockquote>    //定义从其他来源引用的节。
<dfn>    //定义项目或缩略词的定义。
<q>    //定义短的行内引用。
<cite>    //定义著作的标题。

CSS

选择器优先级

important的优先级最高
行内样式>id选择器>class选择器
很多时候，会使用到css库，css库会意外地覆盖你的css样式。要保证自己的css样式不受影响，可以使用!important，使用方法就是就是放在属性后面和分号之前。

color: red !important;

继承css变量

当创建变量的时候，变量会在创建变量的选择器里可用。同时在这个选择器的后代选择器也是可用的。
css变量经常会定义在:root元素内，这样就会被所有选择器继承。
:root是一个伪类选择器，它是一个能够匹配文档根元素的选择器，在全局都可用即在任何选择器里都生效。。
在:root里创建变量时，这些变量的作用域时整个页面。
可以通过在一个特定选择器里再次设置这些变量来重写这些变量。

box-shadow

box-shadow用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

offset-x：阴影的水平偏移量
offset-y：阴影的垂直偏移量
blur-radius
spread-radius
color

其中blur-radius和spread-radius是可选的。

降低元素透明度

css里的opacity属性用来设置元素的透明度。

属性值为1，代表完全不透明。
属性值为0.5，代表半透明。
属性值为0，代表完全透明。

text-transform改变大小写

lowercase 小写
uppercase 大写
capitalize 首字母大写
initial 使用默认值
inherit 使用父元素的text-transform属性
none default不改变字体

字体

font-size 字体大小
font-weight 字体粗细

line-height行高

行高，顾名思义就是每行文字所占据的垂直空间。

更改元素的相对位置

css的一切HTML元素皆为盒子，也就是通常所说的盒子模型。

块级元素自动从新的一行开始，
- 标题
- 段落
- div
行内元素在上一个元素后
- 图片
- span

当元素定位设置为relative时，它允许你通过css指定该元素在当前文档流页面下的相对偏移量。

控制各个方向偏移量的属性时left，right，top和bottom。他们代表从原来位置向远离该方向偏移指定的像素，百分比或者em。

把元素的位置设置成相对时并不会改变该元素在布局中所占的位置，也不会对其他元素位置产生影响。

例如top:15px，就是在现在的位置距离原来位置下降了15px。

改变元素的绝对位置

当元素的position属性取值为absolute，它的含义是相对于其它包含快定位。和relative定位不一样，绝对定位会将元素从当前的文档流移除，周围的元素忽略它。
绝对定位比较特殊的一点是元素的定位参照于最近的positiond的祖先元素（就是有position属性的元素）。如果父元素没有添加定位规则，浏览器会继续寻找直到默认的body标签。

固定定位

它是一种特殊的绝对定位，，会将元素从当前文档流脱离。

这里解释一下脱离文档流，浏览器默认的排版方式就是文档流排版方式，脱离文档就是不按照文档流的排版方式。

加以补充：脱离文档流就是元素像飞起来一样，或者理解为元素在文本流中会占用空间，脱离文本流以后，会在z轴的另外一层显示，原先空间被其他元素占据。

fixed与absolute的区别是，前者定位的元素不会随着屏幕滚动而移动。

float浮动

浮动元素不在文档流中，它向left或right浮动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。通常使用width属性来指定浮动元素占据的水平空间。

使用z-index属性来更改重叠元素的位置

当一些元素在位置上重叠时（例如，使用position：absolute|relative|fixed|sticky时），在HTML里后出现的元素会默认显示在更早出现的元素上面。你可以使用z-index属性指定元素的堆叠次序。z-index的取值是整数，数值大的元素会放在数值小的元素上层。

使用margin属性将元素水平居中

在应用设计中经常需要把一个块级元素水平居中显示，一种常见的实现方式是把块级元素的margin值设置位auto。

图片默认是内联元素，可以通过设置display属性位block把其变为块级元素。

//这样可以实现块级元素的居中显示
margin:auto;

了解颜色搭配

色彩理论以及设计色彩学很复杂，这里将只涉及基础部分。在网站设计里，颜色能让内容更醒目，能调动情绪，从而创造舒适的视觉体验。不同的颜色组合对网站的视觉效果影响很大，精妙的设计都需要适宜的颜色来美化页面内容。

色环是我们认识颜色关系的好工具。它是一个近色相邻、异色相离的圆环。当两个颜色恰好在色环的两端时，这两个颜色就互为补色。两个互为补色的颜色会在混合后变成灰色。然而，补色搭配能形成强烈的视觉对比效果。

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

这与我们许多人在学校学的过时的 RYB 色彩模式不同，RYB 有不同的原色和补色。现代色彩理论使用 RGB 模型（如在计算机屏幕上）和 CMY（K）模型（如在印刷中）。

现在，很多在线选色工具也为我们提供了寻找补色的功能。

注意： 对于颜色相关的挑战：颜色搭配是提起用户兴趣或吸引用户注意的重要方式之一。但我们不应让颜色作为传达重要信息的唯一方式，因为视觉障碍用户可能无法像其他人一样看出其中的含义。我们将会在应用无障碍章节进行详细介绍。

电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同的比例相加，就可以产生各种色彩光。这在现代色彩理论中叫作三原色光模式（RGB Color Model）。红色（R）、绿色（G）和蓝色（B）叫作三原色。如果把两种原色相加，就可以产生二次色：蓝绿（G+B）、品红（R+B）和黄色（R+G），我们在上一个挑战里已经见过这些颜色了。这些二次色恰好是在合成它们时未使用的原色的补色，即在色环中位于两端。例如，品红色是红色和蓝色相加产生，它是绿色的补色。

三次色是由原色和二次色相加产生的颜色，例如，在 RGB 颜色模型中，红色（原色）和黄色（二次色）相加产生橙色（三次色）。将这六种颜色中相邻的颜色相加，便产生了十二色色环。

设计里面有很多种颜色搭配方法。涉及到三次色的一种配色方法是分裂补色搭配法。选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。此种搭配既有对比，又不失和谐。

通过前面关卡的学习，我们知道了补色搭配能形成强列的对比效果，让内容更富生机。但是如果使用不当效果会适得其反：比如将文字背景色和文字颜色设置为互补色，这样文字会很难看清。通常的做法是，一种颜色做为主要颜色，然后使用其补色用来装点那些需要用户特别注意的部分。

颜色具有多种特性，包括色相、饱和度和亮度。 CSS3 引入了hsl()函数，作为直接说明这些特征来挑选颜色的替代方法。

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 hsl() 里面，色相用色环来代替光谱，色相值就是色环里面的颜色对应的从 0 到 360 度的角度值。

饱和度 是指色彩的纯度，也就是颜色里灰色的占比。饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。饱和度的取值范围是表示灰色所占百分比的 0 至 100。

亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。其中，100% 的亮度表示纯白色， 0% 的亮度则表示纯黑色；而 50% 的亮度就表示在色相中选取的颜色。

红	hsl(0, 100%, 50%)
黄	hsl(60, 100%, 50%)
绿	hsl(120, 100%, 50%)
蓝绿	hsl(180, 100%, 50%)
蓝	hsl(240, 100%, 50%)
品红	hsl(300, 100%, 50%)

hsl() 使 CSS 更改颜色色调更加方便。比如，给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。另外，还可以通过给纯色添加灰色来同时改变颜色的深浅和明暗。回忆下 hsl() 里面的 ‘s’ 和 ‘l’ 分别代表饱和度和亮度。 饱和度代表灰色的占比，亮度代表白色和黑色的占比。这在你想获取一个基准色的变种的情景下会十分有用。

css线性渐变

HTML 元素的背景色并不局限于单色。 CSS 还为我们提供了颜色渐变。可通过 background 里的 linear-gradient() 实现线性渐变，以下是它的语法：

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一个参数指定了颜色过渡的方向——它的值是角度，90deg 表示垂直渐变（从左到右），45deg 表示沿对角线渐变（从左下方到右上方）。其他参数指定了渐变颜色的顺序：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

使用 linear-gradient() 给 div 元素添加 background 渐变色，渐变角度为 35 度，从 #CCFFFF 过渡到 #FFCCCC。

线性渐变创建条纹元素

repeating-linear-gradient( )函数和linear-gradient( )很像，主要区别是前者会重复指定的渐变。

角度就是渐变的方向。
色标代表渐变颜色以及发生渐变的位置，由百分比或者像素值表示。

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

上面这个例子可以很清楚地看出过渡规则。

CSS属性transform scale函数

css属性的transform里面的scale( )函数可以用来改变元素的显示比例。

下面例子可以将页面的段落元素放大到原来的两倍。

p {
  transform: scale(2);
}

与伪类选择器:hover结合可以做到，当鼠标悬停的时候可以将元素放大。

CSS属性transform skewX/Y

skewX：它使元素沿着X轴倾斜指定的角度。
skewY：它使元素沿着Y轴倾斜指定的角度。

CSS和HTML创建更复杂的形状

::before创建一个伪元素，它使所选元素的第一个子元素。

::after创建一个伪元素，它是所选元素的最后一个子元素。

两者都必须配合content来使用。这个属性通常用来给元素添加内容诸如图片或者文字。尽管有时 ::before 和 ::after 是用来实现形状而非文字，但 content 属性仍然是必需的，此时它的值可以是空字符串。在上面的例子里，class 为 heart 元素的 ::before 伪类添加了一个黄色的长方形，长方形的高和宽分别为 50px 和 70px。这个矩形有圆角，因为它的 border-radius 为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 5px、50px 的位置。

css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。

CSS的关键帧和动画是如何工作的

如果要给元素添加动画，需要了解animation属性和@keyframes规则。

animation属性控制动画的外观，@keyframes规则控制动画中各阶段的变化。总共有8个animation属性。

animation-name用来设置动画的名称，也就是要在@keyframes里用到的名称。

animation-duration设置动画所花费的时间。

#anim {
    animation-name:colorful; //动画名
    animation-durantion: 3s; //动画持续时间
}

@keyframes colorful {
    0% {
        background-color:blue;
    }
     50% {
        background-color:green;
    }
     100% {
        background-color:yellow;
    }
}

使用CSS动画更改按钮的悬停状态。

button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }

  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
  }
  @keyframes background-color{
   100%{ 
     background-color: #4791d0;
     }

修改动画的填充模式

动画在播放完之后就会重置了，所以又会回到之前的颜色。我们需要的效果是按钮在悬停时始终保持高亮。

为此，我们可以通过把animation-fill-mode设置成forwads来实现。animation-fill-mode指定了动画在结束时元素的样式。

animation-fill-mode: forwards;

CSS创建对象

在元素的position已有指定值（如fixed或者relative）时，CSS偏移属性right,left,top,bottom可以在动画规则里创建动作。

就像下面的例子展示的那样，你可以在 50% keyframe 处设置 top 属性为 50px，在开始（0%）和结束（100%）keyframe 处设置为 0px，以实现元素先向下运动，然后返回的动作效果。

@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}

从左到右淡化元素来创建视觉方向

在关键帧处打上opacity属性设置其值就可以得到淡化效果。

使用关键字更改动画定时器

在CSS动画里，animation-timing-function用来定义动画的速度曲线。速度曲线决定了动画从一套CSS样式变为另一套所用的时间。

animation-duration：描述从某一点到另一个点的时间。
animation-timing-function表述的就是车在运动中的加速和减速过程。

有一些预定义的关键字可用于常见的选项。

ease，动画以低速开始，然后加快，在结束前变慢。
ease-out，动画以高速开始，以低速结束。
ease-in，动画以低速开始，以高速结束。
linear，动画从头到尾的速度是相同的。

贝塞尔曲线（Bezier curves）

上一节提到了animation-timing-function以及一些预设值，这些值定义了不同时间内的动画速度。

除了预定义的值之外，CSS还提供了贝塞尔曲线来更细致地控制动画的速度曲线。

在 CSS 动画里，我们可以用 cubic-bezier 来定义贝塞尔曲线。曲线的形状代表了动画的速度。曲线在 1 * 1 的坐标系统内，其中 X 轴代表动画的时间间隔（类似于时间比例尺），Y 轴代表动画的改变。

cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。

下面这个例子匀速运动。

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

其实就是速度和时间的曲线。

为视觉障碍用户添加代替文本

img的alt属性中的文本用来描述图片内容，作为备用文字。

<img src="图片地址" alt="图片内容描述">

HTML5引入的新元素

HTML5 引入了一些新元素，给予开发者更多的选择，也包含辅助功能。 HTML5 引入了诸如 main、header、footer、nav、article、section 等大量新标签。

默认情况下，浏览器呈现这些元素的方式类似于普通的 div。但是，在适当的地方使用它们会让标记文本具有更多的含义。仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。

main 标签用于呈现网页的主体内容，且每个页面应只有一个。这是为了围绕与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。

main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。

article 是另一个具有语义化特性的 HTML5 新标签。 article 是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客、论坛帖子或者新闻文章。

确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。如果删除了所有周围的上下文，这个内容是否仍然有意义？类似地，对于文本内容，可否把这些内容放到一个 RSS 推送里？

请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。

注意： section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。它们可以根据需要来嵌套使用。举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。当内容组之间没有联系时，我们可以使用 div。

<div> - 一组内容

<section> - 几组相关的内容

<article> - 几组独立的内容

header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。

注意： header 应当在 HTML 文档的 body 标签内使用。它与包含页面标题、元信息的 head 标签不同。

nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。它用于呈现页面中的主导航链接。

对于在多个页面底部出现的站点链接，我们不需要使用 nav 标签。我们将会在下个挑战中学习 footer 标签的使用。

与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。音频内容也需要备用文本，供聋哑人或听力困难的人使用。这可以通过页面上的文本或与字幕链接来实现。

audio 标签支持 controls 属性，用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

媒体内容通常同时包含音频与视频部分，它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。

HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。

对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。

举个例子，注意 figcaption 包含在 figure 标签中，并且可以与其他标签组合使用：

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

表单

理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到在表单中使用属性的场景。

label 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。

for属性的值与id的值相等。

fieldset 标签包裹整组单选按钮，实现这个功能。它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。

<fieldset>
        <legend>What level ninja are you?</legend>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </fieldset>

添加可访问的日期选择器

表单中经常出现 input 标签，它可以用来创建多种表单控件。它的 type 属性指定了所要创建的 input 标签类型。

在以前的挑战中，我们已经见过 text 与 submit 类型的 input 标签。 HTML5 规范添加了 date 类型来创建日期选择器。如果浏览器支持，在点击 input 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。

对于较老的浏览器，类型将默认为 text，这样它可以通过 label 或 placeholder 文本向用户显示预期的日期格式。

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">

使用HTML5的datetime属性

继续日期主题。 HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。 datetime 属性包含的有效格式。辅助设备可以获取这个值。这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

使用自定义CSS让元素仅对屏幕阅读器可见

但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下，使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

display: none; 或 visibility: hidden; 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。
如果把值设置为 0px，如 width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。

使用高对比度文本提高可读性

Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的。对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。在线可用的对比检查工具很多，可以计算这个比率。

给元素添加accesskey属性来让用户可以在链接之间快速导航

HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。添加 accesskey 属性可以让使用键盘的用户更高效率地导航。

HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。

<button accesskey="b">Important Button</button>

使用tabindex将键盘焦点添加到元素中

HTML 的 tabindex 属性有三种与标签焦点相关的功能。当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。

当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。我们可以通过将其他标签（如 div、span、p 等）的 tabindex 属性值设为 0 来让它们实现类似的效果。比如：

<div tabindex="0">I need keyboard focus!</div>

注意： tabindex 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 div 实现的弹出框上）的场景。只是这部分内容已经超出了当前挑战的范围。

创建一个媒体查询

媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视口大小调整内容的布局。视口是指浏览器中，用户可见的网页内容。视口会随访问网站的设备不同而改变。

媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。

@media (max-width: 100px) { /* CSS Rules */ }

以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：

@media (min-height: 350px) { /* CSS Rules */ }

注意，只有当媒体类型与所使用的设备的类型匹配时，媒体查询中定义的 CSS 才生效。

使图片自适应设备尺寸

img {
  max-width: 100%;
  height: auto;
}

设置 max-width 值为 100% 可确保图片不超出父容器的范围；设置 height 属性为 auto 可以保持图片的原始宽高比。

针对高分辨率屏幕应使用视网膜图片

随着联网设备的增加，设备间的区别不仅发生在尺寸和规格上，还发生在用于显示的设备上。像素密度就是区分不同显示设备的一个指标，它一般会以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸点数）为计量单位。最著名的显示器就是 Apple MacBook Pro 笔记本电脑上的“视网膜显示屏”（现亦用于 iMac）。由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。

使排版根据设备尺寸自如响应

除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。

vw：如 10vw 的意思是视窗宽度的 10%。
vh： 如 3vh 的意思是视窗高度的 3%。
vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

使用flex属性

给元素添加 display: flex 属性可以让它变成 flex 容器，然后可以让元素的项目排列成行或列。只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。创建一行将使子项水平对齐，创建一列将使子项垂直对齐。

flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

使用justify-content属性对齐元素

flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过 justify-content 属性的不同值来实现。在介绍属性的可选值之前，我们要先理解一些重要术语。

如果把 flex 容器设为一个行，它的子元素会从左到右逐个排列；如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目，有几种选择。很常用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。

flex-start：从 flex 容器的起始位置开始排列项目。对行来说是把项目移至左边，对于列是把项目移至顶部。如未设置 justify-content 的值，那么这就是默认值。
flex-end：从 flex 容器的终止位置开始排列项目。对行来说是把项目移至右边，对于列是把项目移至底部。
space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
space-evenly：在 flex 项目之间均匀分配空间，在 flex 容器的任一端都有一个完整的空间。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T5CJMTDz-1655816984184)(C:\Users\77094\AppData\Roaming\Typora\typora-user-images\image-20220621170143774.png)]