基础HTML和HTML5

基础HTML和HTML5部分介绍了:

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

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

基础HTML和HTML5_第1张图片
Basic HTML 和HTML5

Introduction to Basic HTML and HTML5

  • Say Hello to HTML Elements

    Hello World

  • Headline with the h2 Element

    Hello World

    CatPhotoApp

  • Inform with the Paragraph Element

    Hello World

    CatPhotoApp

    Hello Paragraph

  • Fill in the Blank with Placeholder Text

    Hello World

    CatPhotoApp

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

  • Uncomment HTML(去掉注释)

    Hello World

    CatPhotoApp

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

  • Comment out HTML

    
    
    

    CatPhotoApp

  • Delete HTML Elements

    CatPhotoApp

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

  • Introduction to HTML5 Elements

    CatPhotoApp

    ...

  • Add Images to Your Website

    a relaxing cat

    CatPhotoApp

    ...

  • Link to External Pages with Anchor Elements

    CatPhotoApp

    A cute orange cat lying on its back. cat photos

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

    Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

  • Link to Internal Sections of a Page with Anchor Elements

    CatPhotoApp

    Jump to Bottom A cute orange cat lying on its back.

    ...

    Copyright Cat Photo App
  • Nest an Anchor Element within a Paragraph

    CatPhotoApp

    View more cat photos

    A cute orange cat lying on its back.

    ...

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

    CatPhotoApp

    Click here to view more cat photos.

    A cute orange cat lying on its back.

    ...

  • Turn an Image into a Link

    CatPhotoApp

    Click here to view more cat photos.

    A cute orange cat lying on its back.

    ...

  • Create a Bulleted Unordered List

    CatPhotoApp

    Click here to view more cat photos.

    A cute orange cat lying on its back.
    • eating fish
    • catching mouse
    • sleeping
  • Create an Ordered List

    CatPhotoApp

    Click here to view more cat photos.

    A cute orange cat lying on its back.

    Things cats love:

    • cat nip
    • laser pointers
    • lasagna

    Top 3 things cats hate:

    1. having a shower
    2. chasing by dogs
    3. too much noise
  • Create a Text Field

    CatPhotoApp

    ...

    Things cats love:

    • cat nip
    • laser pointers
    • lasagna

    Top 3 things cats hate:

    1. flea treatment
    2. thunder
    3. other cats
  • Add Placeholder Text to a Text Field

    CatPhotoApp

    ...
  • Create a Form Element

    CatPhotoApp

    ...
  • Add a Submit Button to a Form

    CatPhotoApp

    ...
  • Use HTML5 to Require a Field

    CatPhotoApp

    ....
  • Create a Set of Radio Buttons

    CatPhotoApp

    ...
  • Create a Set of Checkboxes

    CatPhotoApp

    ...

  • Check Radio Buttons and Checkboxes by Default

    CatPhotoApp

    ...


  • Nest Many Elements within a Single div Element

    CatPhotoApp

    ...

    Things cats love:

    • cat nip
    • laser pointers
    • lasagna

    Top 3 things cats hate:

    1. flea treatment
    2. thunder
    3. other cats
    ...
  • Declare the Doctype of an HTML Document

    
    
      

    Hello

  • Define the Head and Body of an HTML Document

    
    
        
            The best page ever
        
        
            

    The best page ever

    ...

你可能感兴趣的:(基础HTML和HTML5)