基础
1.注意缩进
2.注释
在 HTML 中，一个注释以 结束。
能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问
能让你的 HTML 易于阅读，有助于分段
3.图片
为你的网站添加图片。 img 元素只有一个开始标签，没有结束标签。 一个没有结束标签的元素，它的标签被称为自闭合标签。
- src
图片路径 - alt
alt 属性的文本（值）有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="this is a cat">
4.锚点元素（a）
链接到另一个页面, 链接的文本必须放置在锚点元素（a）的起始和闭合标签之间
- target 属性
添加值为 _blank ,用以在新的标签页中打开链接。
<a target="_blank" href='https://freecatphotoapp.com'>this is a cat</a>
5.简单嵌套
在 p 元素的文本中，将单词 cat photos 转换为指向 https://freecatphotoapp.com 的链接
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
6.无序列表
- （ul）元素
- 列表项（li）元素在列表中创建项目
<ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul>
7.有序列表（ol）
类似于无序列表，但有序列表中的列表项在显示时会被编号
<ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol>
- flea treatment
- thunder
- other cats
8.figure 元素
代表独立的内容，并允许你将图像与标题相关联
<figure> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."> </figure>
- （figcaption）元素
用于添加标题以描述 figure 元素中包含的图像
<figure> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."> <figcaption> Cats love lasagna. </figcaption> </figure>
- em 元素(强调作用）
<figcaption>Cats <em>love</em> lasagna.</figcaption>
- strong 元素
用于指示某些文本非常重要或紧急
9.Web 表单
- form 元素：收集来自用户的信息
- action 属性：指示应该将表单数据发送到哪里
<form action="https://freecatphotoapp.com/submit-cat-photo"></form>
- input 元素：允许你通过多种方式从 Web 表单中收集数据(自闭合)
- type 属性：创建多种输入， 你可以轻松创建密码字段、重置按钮或控件，让用户从他们的计算机中选择文件
<input type="text">
- name属性：action 属性指定的位置访问表单的数据，你必须给文本字段一个 name 属性，并为其分配一个值来表示数据正在提交
- placeholder占位符文本:用于提示人们在输入框中输入什么样的信息
<input type="text" name="catphotourl" placeholder="cat photo URL" >
- required 属性：防止用户在缺少所需信息时提交你的表单，你需要将 required 属性添加到 input 元素， 无需为 required 属性设置值
10.按钮元素(button)
- 创建一个可点击的按钮
**<button> Submit </button>**
按钮将默认提交表单。,然而，依赖默认行为可能造成混乱。 将值为 submit 的 type 属性添加到 button 以明确它是一个提交按钮。
<button type="submit">Submit</button>
- 单选按钮
input 元素是自闭合的。
<input type="radio">Indoor
- label 元素
用于帮助将 input 元素的文本与 input 元素本身关联起来（尤其是对于屏幕阅读器等辅助技术）
<label><input type="radio"> Indoor</label>
- id 属性
用于标识特定的 HTML 元素。 每个 id 属性的值必须不同于整个页面的所有其他 id 值。
<label><input type="radio" id="indoor"> Indoor</label>
- name属性
为了使选择一个单选按钮自动取消选择另一个，两个按钮必须有具有相同值的 name 属性
<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label> <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>
选择 Indoor 单选按钮并提交表单，则该按钮的表单数据基于其 name 和 value 属性。 由于你的单选按钮没有 value 属性，因此表单数据将包含 indoor-outdoor=on，这在你有多个按钮时没有用处
- value属性
<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>
11.fieldset 元素
用于在 Web 表单中将相关的输入和标签组合在一起。 fieldset 元素是块级元素，这意味着它们出现在新的一行上
<fieldset> <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>
12.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>
13.表单复选框
<input type="checkbox"> Loving
将 input 元素的文本与元素本身相关联。 你可以将文本嵌套在 label 元素中，并添加与 input 元素的 id 具有相同值的 for 属性
<input id="loving" type="checkbox"> <label for="loving"> Loving </label>
与单选按钮一样，选中复选框的表单数据是 name / value 属性对。 虽然 value 属性是可选的，但最好将它包含在页面上的任何复选框或单选按钮中。
- checked 属性
使复选框或单选按钮默认被选中，无需为 checked 属性设置值。 只需将单词 checked 添加到 input 元素，确保它和其他属性之间有空格。
默认选中第一个单选按钮和第一个复选框
14.案例（两种复选框）
<fieldset> <legend>Is your cat an indoor or outdoor cat?</legend> <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked=""> Indoor</label> <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label> </fieldset> <fieldset> <legend>What's your cat's personality?</legend> <input id="loving" type="checkbox" name="personality" value="loving" checked=""> <label for="loving">Loving</label> <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label> <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label> </fieldset>
14.footer 元素
页脚部分（在 main 元素之后，添加 footer 元素）
<footer> <p> No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a> </p> </footer>
15.头部
页面的全部内容都嵌套在 html 元素中。 所有其他元素必须是此 html 元素的后代。
将值为 en 的 lang 属性添加到开始 html 标签以指定页面的语言为英语
<html lang="en">
16.声明
确保浏览器尝试满足行业范围的规范
<!DOCTYPE html>
17.完整案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CatPhotoApp</title> </head> <body> <main> <h1>CatPhotoApp</h1> <section> <h2>Cat Photos</h2> <!-- TODO: Add link to cat photos --> <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p> <a href="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> <section> <h2>Cat Lists</h2> <h3>Things cats love:</h3> <ul> <li>cat nip</li> <li>laser pointers</li> <li>lasagna</li> </ul> <figure> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate."> <figcaption>Cats <em>love</em> lasagna.</figcaption> </figure> <h3>Top 3 things cats hate:</h3> <ol> <li>flea treatment</li> <li>thunder</li> <li>other cats</li> </ol> <figure> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."> <figcaption>Cats <strong>hate</strong> other cats.</figcaption> </figure> </section> <section> <h2>Cat Form</h2> <form action="https://freecatphotoapp.com/submit-cat-photo"> <fieldset> <legend>Is your cat an indoor or outdoor cat?</legend> <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label> <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label> </fieldset> <fieldset> <legend>What's your cat's personality?</legend> <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label> <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label> <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label> </fieldset> <input type="text" name="catphotourl" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form> </section> </main> <footer> <p> No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a> </p> </footer> </body> </html>
注：学习内容皆来自www.freecodecamp.org
94
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)
