基础HTML和HTML5

FreeCodeCamp
,

基础HTML和HTML5部分介绍了：

  1. HTML常见的元素类型+基本属性
  2. HTML页面的基本构成，和包含的元素及属性

包含的内容并不完全，但是我最近读《软技能》，其中提到一个概念是，在学习编程的过程中，不要学完自认为足够多的内容之后再动手，而是在学完基本能够动手的知识之后就马上动手，在实践中来发掘自己有哪些薄弱环节，再针对性地学习、练习和巩固。以下是我根据以上习题整理的思维导图以及这一部分的习题解答。

Basic HTML 和HTML5

Introduction to Basic HTML and HTML5

  • Say Hello to HTML Elements

    1
    <h1>Hello World</h1>

  • Headline with the h2 Element

    1
    2
    <h1>Hello World</h1>
    <h2>CatPhotoApp</h2>

  • Inform with the Paragraph Element

    1
    2
    3
    <h1>Hello World</h1>
    <h2>CatPhotoApp</h2>
    <p>Hello Paragraph</p>

  • Fill in the Blank with Placeholder Text

    1
    2
    3
    4
    5
    <h1>Hello World</h1>

    <h2>CatPhotoApp</h2>

    <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

  • Uncomment HTML（去掉注释）

    1
    2
    3
    4
    5
    <h1>Hello World</h1>

    <h2>CatPhotoApp</h2>

    <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

  • Comment out HTML

    1
    2
    3
    4
    5
    <!--<h1>Hello World</h1>-->

    <h2>CatPhotoApp</h2>

    <!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>-->

  • Delete HTML Elements

    1
    2
    3
    <h2>CatPhotoApp</h2>

    <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

  • Introduction to HTML5 Elements

    1
    2
    3
    4
    5
    <h2>CatPhotoApp</h2>

    <main>
      <p>...</p>
    </main>

  • Add Images to Your Website

    1
    2
    3
    4
    <img src="https://bit.ly/fcc-relaxing-cat" alt="a relaxing cat"><h2>CatPhotoApp</h2>
    <main>
      <p>...</p>
    </main>

  • Link to External Pages with Anchor Elements

    1
    2
    3
    4
    5
    6
    7
    <h2>CatPhotoApp</h2>
    <main>
      <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
      <a href="http://freecatphotoapp.com">cat photos</a>
      <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
      <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
    </main>

  • Link to Internal Sections of a Page with Anchor Elements

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <h2>CatPhotoApp</h2>
    <main>
      
      <a href="#footer">Jump to Bottom</a>
      
      <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
      
      <p>...</p>
      
    </main>
      
    <footer id="footer">Copyright Cat Photo App</footer>

  • Nest an Anchor Element within a Paragraph

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <h2>CatPhotoApp</h2>
    <main>
      
      <p>View more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a></p>
      
      <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
      
      <p>...</p>
    </main>

  • Make Dead Links Using the Hash Symbol (href=”#”)

    1
    2
    3
    4
    5
    6
    7
    8
    <h2>CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
      
      <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
      
      <p>...</p>
    </main>

  • Turn an Image into a Link

    1
    2
    3
    4
    5
    6
    7
    8
    <h2>CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <p>...</p>
    </main>

  • Create a Bulleted Unordered List

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <h2>CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <ul>
        <li>eating fish</li>
        <li>catching mouse</li>
        <li>sleeping</li>
      </ul>
    </main>

  • Create an Ordered List

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <h2>CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
      
      <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
      
      <p>Things cats love:</p>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      <p>Top 3 things cats hate:</p>
      <ol>
        <li>having a shower</li>
        <li>chasing by dogs</li>
        <li>too much noise</li>
      </ol>
      
    </main>

  • Create a Text Field

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <p>Things cats love:</p>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      <p>Top 3 things cats hate:</p>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      <input type="text">
      
    </main>

  • Add Placeholder Text to a Text Field

    1
    2
    3
    4
    5
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <input type="text" placeholder="cat photo URL">
    </main>

  • Create a Form Element

    1
    2
    3
    4
    5
    6
    7
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <form action="/submit-cat-photo">
        <input type="text" placeholder="cat photo URL">
      </form>
    <main>

  • Add a Submit Button to a Form

    1
    2
    3
    4
    5
    6
    7
    8
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <form action="/submit-cat-photo">
        <input type="text" placeholder="cat photo URL">
        <button type="submit">Submit</button>
      </form>
    </main>

  • Use HTML5 to Require a Field

    1
    2
    3
    4
    5
    6
    7
    8
    <h2>CatPhotoApp</h2>
    <main>
      ....
      <form action="/submit-cat-photo">
        <input type="text" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </main>

  • Create a Set of Radio Buttons

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <form action="/submit-cat-photo">
        <input type="text" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
        <label for="indoor">
          <input id="indoor" type="radio" name="indoor-outdoor">Indoor
        </label>
        <label for="outdoor">
          <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
        </label>
      </form>
    </main>

  • Create a Set of Checkboxes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <form action="/submit-cat-photo">
        <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
        <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
        <input type="text" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
        <label for="soft"><input id="soft" type="checkbox" name="personality">Soft</label>
        <label for="nice"><input id="nice" type="checkbox" name="personality">Nice</label>
        <label for="loving"><input id="loving" type="checkbox" name="personality">Loving</label>
      </form>
    </main>

  • Check Radio Buttons and Checkboxes by Default

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <h2>CatPhotoApp</h2>
    <main>
      ...
      <form action="/submit-cat-photo">
        <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
        <label><input type="checkbox" name="personality" checked> Loving</label>
        <label><input type="checkbox" name="personality"> Lazy</label>
        <label><input type="checkbox" name="personality"> Energetic</label><br>
        <input type="text" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </main>

  • Nest Many Elements within a Single div Element

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <h2>CatPhotoApp</h2>
    <main>
      ...
      
      <div>
        <p>Things cats love:</p>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <p>Top 3 things cats hate:</p>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
      </div>
      
      <form action="/submit-cat-photo">
        ...
      </form>
    </main>

  • Declare the Doctype of an HTML Document

    1
    2
    3
    4
    <!DOCTYPE html>
    <html>
      <h1>Hello</h1>
    </html>

  • Define the Head and Body of an HTML Document

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
        <head>
            <title>The best page ever</title>
        </head>
        <body>
            <h1>The best page ever</h1>
            <p>...</p>
        </body>
    </html>