目 录CONTENT

文章目录

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

shibuyu
2022-11-12 / 0 评论 / 0 点赞 / 144 阅读 / 3,838 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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>

知识点详解

开始标签与关闭标签

image-1668317009381

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

HTML 区域标题元素

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

段落元素<p>

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

HTML 代码注释

HTML 的注释写法开始是<!--,结束使用-->。例如:<!-- <p> abc </p> -->

<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> 子元素确定。

0

评论区