freeCodeCamp之HTML

免费学习编程的网站 freeCodeCamp(🔥) - 官方版（英文）

通过编写猫咪相册应用学习 HTML

<!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>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>
            <a href="https://freecatphotoapp.com">
              <img
              src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
              alt="Three kittens running towards the camera."/>
       	    </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>

知识点详解

开始标签与关闭标签

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

HTML 区域标题元素

HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

段落元素`<p>`

HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。

HTML 代码注释

HTML 的注释写法开始是。例如：。

`<main>` 元素

HTML <main> 元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

<main> 对文档的大纲（outline）没有贡献；也就是说，它与诸如 <body>之类的元素，诸如 <h2> (en-US) 之类的标题等不同，<main> 不会影响 DOM 的页面结构概念。它仅有提供信息的作用

浏览器的阅读器模式会寻找文档中的main 元素，以及标题元素和内容分区元素以便将内容转换至阅读器视图。

`<footer>` 元素

HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

`<img>`：图像嵌入元素

HTML 元素将一份图像嵌入文档。

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">

上面的例子展示了元素的用法：

src 属性是必须的，它包含了你想嵌入的图片的文件路径。
alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。

`<a>` 元素

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

target属性

<a href="https://freecatphotoapp.com" target="_blank">cat photos</a>

该属性指定在何处显示链接的资源。取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义：

_blank：在新窗口中打开被链接文档。
_self：默认。在相同的框架中打开被链接文档。
_parent：在父框架集中打开被链接文档。
_top：在整个窗口中打开被链接文档。
framename：在指定的框架中打开被链接文档。

链接到外部地址

<!-- anchor linking to external file -->
<a href="https://freecatphotoapp.com">
cat photos
</a>

链接到本页的某个部分

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

我们来分析一下这个例子：

这里的h2元素被绑定了一个id属性，名字为“contacts-header”。
我们的a元素链接的指定href跳转地址为#contacts-header。
我们可以看到#后面的名字与h2的id值一致，就是这样点击这个链接的时候，页面就会移动到绑定了同一个名字的元素的位置。
我们要注意的是id属性的值，在当前页面中必须是唯一的。

创建一个可点击的图片

这个小例子使用图像链接到https://freecatphotoapp.com。

<a href="https://freecatphotoapp.com">
              <img
              src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"
              alt="Three kittens running towards the camera."/>
       	    </a>

使用哈希符号创建死链接

有时候我们需要添加一个死链接（顾名思义，就是一个点击后无效的链接，不会触发页面跳转）
这种链接有几个用途，第一种在排版的过程中还不知道需要链接哪里，第二种就是后面这个链接交给 JavaScript 处理。

<a href="#">死链接</a>

文章中嵌套锚元素

<p>Click here to view more <a href="https://freecatphotoapp.com" target="_blank">cat photos</a>.</p>

`<section>`元素

HTML <section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
注意：

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成，但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

创建无序列表

HTML 当中有特殊的元素用于创建无序列表。
无序列表需要使用ul元素包裹着多个li元素，开始标签为<ul>，结束标签为</ul>。

     <ul>
                <li>cat nip</li>
                <li>laser pointers</li>
                <li>lasagna</li>
     </ul>

创建有序列表

HTML 当中还有一种叫有序列表（就是前面会按照 1，2，3，4… 以此类推）
需要使用ol元素包裹着多个li元素，开始标签为<ol>，结束标签为</ol>

 <ol>
              <li>flea treatment</li>
              <li>thunder </li>
              <li>other cats</li>
 </ol>

`<figure>`可附标题内容元素

HTML <figure> 元素代表一段独立的内容，可能包含 <figcaption>元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

<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>

使用说明

通常，<figure> 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。
通过在其中插入 <figcaption>（作为第一个或最后一个子元素），可以将标题与 <figure> 元素相关联。图中找到的第一个 <figcaption> 元素显示为图的标题。

`<form>`表单

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<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>

action属性

处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。

input元素

<input type="text" />

input元素是一个自我关闭型标签，所以不需要结束标签的。

 <input type="text" name="catphotourl" placeholder="cat photo URL" required>
 <button type='submit'>Submit</button>

添加一组单选按钮

<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>

单选按钮是input元素中其中一种类型。
要使用单选按钮，我们需要把每一个单选的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
所有相关的单选项需要有同一个name属性值才能把这些单选项组成一组选项。
单选项被列为一组后，才能选择这组其中一个单选项时，才会自动去除选中其他这组里面的选项。

添加一组复选框

 <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>

表单中，通常用checkbox来建立复选框的表单问题。
checkbox是input元素的其中一种类型。
要使用复选框，我们可以把每一个复选框的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字，在点击的时候都可以选中这个选项。
所有相关的复选框需要有同一个name属性值才能把这些选项组成一组选项。
最佳实践是在label元素上设置一个for属性，其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系

`<fieldset>`元素

HTML<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）
fieldset 的标题由第一个 <legend> 子元素确定。

通过编写猫咪相册应用学习 HTML

freeCodeCamp之HTML

通过编写猫咪相册应用学习 HTML

知识点详解

开始标签与关闭标签

HTML 区域标题元素

段落元素<p>

HTML 代码注释

<main> 元素

<footer> 元素

<img>：图像嵌入元素

<a> 元素

链接到外部地址

链接到本页的某个部分

创建一个可点击的图片

使用哈希符号创建死链接

文章中嵌套锚元素

<section>元素

创建无序列表

创建有序列表

<figure>可附标题内容元素

<form>表单

action属性

input元素

添加一组单选按钮

添加一组复选框

<fieldset>元素

评论

段落元素`<p>`

`<main>` 元素

`<footer>` 元素

`<img>`：图像嵌入元素

`<a>` 元素

`<section>`元素

`<figure>`可附标题内容元素

`<form>`表单

`<fieldset>`元素