heading
<h> 标题 </h>
多级标题时：<h1> <h2>......级联
Paragraph
<p> 段落内容 </p>
Note！
<!-- 注释内容 -->
Element
<main> 主要内容 </main>
image
<img src="图片地址" alt="图片描述">
img表示显示的是图片image
src表示图片是从哪里来的source
alt表示用文字描述一下图片内容，这样开发时就不用盯着图片地址而不知道这里放的是啥图片了
还有作用就是当网络不好，图片加载不出来时，那个破损图标旁会显示alt内容表示用文字将图片替换alternate
anchor
外部跳转
<a href="跳转目的地的地址"> 网页显示内容 </a>
初次看到这个简写的a很奇怪，anchor锚用在这里干啥。但想了想游戏中传送锚点，口袋锚点（原来你也玩原神）就想通了，不就是用来传送的吗，游戏中传送人物，这里就是传送到目的网页
网页显示内容：是可点击的，相当于超链接？点一下就相当于跳转至href的目的地址
href：Hypertext Reference这是啥，不用管，反正我就记成“here from”，反正就是记录这里的跳转内容是从哪里来的
内部跳转
<a href="# 目的id ">contacts </a>
<h2 id =" 目的id ">contacts </a>
点击contacts区域就会跳转到“目的id”的位置
🐖：target=“_blank”要删掉，不然会在新标签页打开
occupation
目的不确定时用 href=“#”此时不跳转
image anchor
建立图片链接
<a href = "#“><img src=""></a>
这样点击图片就是一个超链接，跳转至目的地了
unordered list
无序列表
<ul>
<li>sth1</li>
<li>sth2</li>
</ul><li>的内容是并列的
ordered list
有序列表
<ol>
<li>sth1</li>
<li>sth2</li>
</ol><li>的内容是自动排序的
input
<input type = "text">
创建text类型的输入框
占位
placeholder="默认值"
form
创建发送给服务器的表单form
<form action="/url-where-you-want-to-submit-form-data">
<input type="text" required>
<button type="submit">Submit</button>
</form>按一下button按钮，填入input的内容就发给服务器了
required表示这是必填项哦，不填就按button会被提醒
radio button
单选按钮
<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
<label>
<input type="radio" name="indoor-outdoor">Outdoor
</label>每个选项由标签label包裹，type=radio表明单选的身份，相同的name表示选了一个剩下的就不能再选了
checkbox
复选框，多选题
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label>
for代表这个空就是for为了相对应的id准备的
🐖：①value = "id"可让发送的数据更直观，否则默认为on。
②在input中添加checked表示为默认选中
divide
用<div>内容</div>划分内容
网页结构
html 的结构主要分为两大部分：head 和 body。 网页的描述应放入 head 标签， 网页的内容（向用户展示的）则应放入 body 标签。
比如 link、meta、title 和 style 都应放入 head 标签。
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
main
标签用于呈现网页的主体内容，且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。
<div> - 一组内容
<section> - 几组相关的内容
<article> - 几组独立的内容
header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。header 应当在 HTML 文档的 body 标签内使用。 它与包含页面标题、元信息的 head 标签不同。
nav（navigation） 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。
footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。
HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。
fieldset 标签包裹整组单选按钮，实现这个功能。 它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。
当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。 这时，使用包含 for 属性的 label 标签就足够了。
HTML5 规范添加了 date 类型来创建日期选择器。 如果浏览器支持，在点击 input 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。
datetime 属性包含的有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。
.sr-only
当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。
display: none;或visibility: hidden;会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。- 如果把值设置为 0px，如
width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。
accesskey
用于指定激活元素或者使元素获得焦点的快捷键。使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素。
tabindex
利用tab聚焦导航
@media
@media (max-width: 100px) { /* CSS Rules */ }当设备宽度小于或等于 100px 时返回内容：
自适应
设置 max-width 值为 100% 可确保图片不超出父容器的范围；设置 height 属性为 auto 可以保持图片的原始宽高比。
除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。 视窗单位和百分比都是相对单位，但它们是基于不同的参照物。 视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
四个不同的视窗单位分别是：
vw：如10vw的意思是视窗宽度的 10%。vh：如3vh的意思是视窗高度的 3%。vmin：如70vmin的意思是视窗的高度和宽度中较小一个的 70%。vmax：如100vmax的意思是视窗的高度和宽度中较大一个的 100%。
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
