响应式设计

所有的 img 元素都应该有一个 alt 属性。 alt 属性的文本（值）有两个作用:

第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；
另一个作用是当图片无法加载时，页面需要显示的替代文本。

注意嵌套的形式.
e.g

1	<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>

要在新标签页中打开链接，可以在锚元素（a）中使用 target 属性。

1	<p>See more <a href="https://freecatphotoapp.com" target = "_blank">cat photos</a> in our gallery.</p>

锚元素除了能将文本转化为链接, 还可以将图片转换为链接:

1
2
3

<a hreg = "https://freecatphotoapp.com">
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
</a>

section 元素用于在文档中定义各部分，如章节、标题、页脚或文档的任何其他部分。它是一个对 SEO 和无障碍特性有帮助的语义元素。

列表:

无序列表: ul;
有序列表:ol;
列表项: li;

figure 元素代表自包含的内容，允许将图像与标题相关联;
figcaption 元素用于添加标题以描述 figure 元素中包含的图像。

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>A cute cat</figcaption>
</figure>

使用 em 使得文字为斜体;
strong 加深文字;

form 元素用于从用户获取信息，如姓名、电子邮件和其他详细信息。

action属性指定表单数据发送的位置;

1	<form action="/submit-url"></form>

input 允许通过多种方式从Web表单中收集数据:

与img一样为空元素——不需要结束标签;
使用 type 属性创建多种输入;
- text : 文本;
- radio: 可以使用单选按钮;
- checkbox: 表单使用 复选框;
使用name属性使得区分提交的数据;
- 令多个单选按钮具有相同的name, 使得在选中其中一个按钮时自动取消另外的单选按钮;
- 形成name = value形式的属性对进行提交;

1 2	<label><input id="indoor" type="radio" name = "indoor-outdoor"> Indoor</label> <label><input id="outdoor" type="radio" name = 'indoor-outdoor'> Outdoor</label>

placeholder 中为 占位符 文本, 用于提示输入框中输入的信息;
required属性可以避免缺少所需信息时的提交, 无需赋值, 确保空格即可;

1	<input type="text" name = "catphotourl">

button 用于创建可点击的按钮:

单击没有任何属性的表单按钮的默认行为会将表单提交到表单的 action属性中指定的位置;
由于input和button为内联元素, 即使相隔书写也会显示在同行:
type的submit明确了为可提交按钮;

1	<button type = "submit">Submit</button>

label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来

1 2	<label><input type="radio"> cat</label> <!-- 点击单词 "cat" 也将选择 radio 按钮。 -->

id用于标识特定的HTML元素

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起:

块级元素，这意味着它们出现在新的一行上。
legend 元素充当 fieldset 元素中内容的标题。

<fieldset>
        <legend> Is your cat an indoor or outdoor cat?</legend>
          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
</fieldset>

还可以使用for属性将文本直接嵌套在label当中, 同时设置input的id与上述的for属性相同, 从而实现文本与元素相关联的效果:

1 2	<input id="loving" type="checkbox"> <label for = "loving"> Loving </label>

默认选中的按钮: checked

1	<input checked type="radio" name="meal" value="breakfast"> Breakfast

checked属性无需额外赋值.

footer素用于定义文档或章节的页脚:

脚通常包含文档作者信息、版权数据、使用条款链接、联系信息等.

head 相关

存放 $\underline{元数据}$ 不会实际显示在html中的数据;
title元素决定了浏览器在页面的标题栏或选项卡中显示的内容;
<link rel = "stylesheet" href = "styles.css"> 将CSS文件链接到当前的HTML

else:

<!DOCTYPE html: 声明满足最新版本html相关设置的要求;
meta是空元素; <meta charset = "utf-8">;

选择器:

id选择器

1
2
3

#cat {
  width: 250px;
}

class选择器

1
2
3

.class-name, .other-class {
  styles
}

class类中元素的选择

.item p{
  /* 设置为样式近似于内联--排列在同一行, 同时可以设置宽高、边距 */
  display: inline-block; 
}

伪元素

/* 已访问链接后设置为灰色 */
a:visited{
  color: grey;
}

/* 悬浮时的变色 */
a:hover {
  color: brown;
}

/* 点击时的状态设置 */
a:active{
  color: white;
}

1 2	margin-left : auto; margin-right: auto;

使得普通元素在父级元素的空间内 水平居中

article是一个语义化标签:

用于表示文档、页面或应用中的独立的、完整的内容单元;
清晰地表明内容的用途，帮助开发者和搜索引擎理解页面结构;
内容通常可以通过RSS订阅、社交媒体分享等方式单独发布.

与其他类似标签的区别:

div: 粹的容器，没有语义，常用于布局;
section: 表示文档中的一个逻辑区域，通常用于分组内容，但不一定是独立的内容单元;
article: 示一个可以独立存在的内容单元.

/* 设置备用字体 */
h1, h2 {
  font-family: Impact, serif;
}