Task 1:0 basic HTML Coding exercises

Mission Purpose

• Understand the definition, concept, and history of HTML
• Mastering the meaning and usage of common HTML tags
• Ability to properly plan HTML document structures based on design drafts
• Understand semantics and use HTML tags wisely to build pages

Task Description: complete an HTML page code writing (do not write CSS, do not need to focus on style, focus on the structure of the document), see details (can right-copy pictures to local self-practice):

Task considerations

• Only need to complete the HTML code writing, do not need to write CSS
• The example diagram is for reference only and does not need to be fully consistent, and the pictures and copy can be set by itself
• Try more HTML tags as much as you can

Task Completion and Summary:

Issue 1: Strange phenomenon that the title element does not display correctly

Source:

Solution: Conjecture may have clashed with the head of

Question 2: Began to get stuck in the "picture" that piece, has not been able to imagine which element can achieve this effect. If you use the unordered table <ul> and the ordered list <ol>, then the default properties cannot be eliminated without using CSS styles, which is really called a big head.

Solution: Later in the bath when suddenly thought of a 3d element (DL, DT, DD), hurriedly use the fastest speed to wash the bath, come out an experiment, sure enough, success!

Highlights of the small demo:

Boldly used HTML5 's new tag, the code almost entirely follows the semantics of the HTML specification. Be able to clearly know where to use <article> tags, where to use <section> tags. At first I was quite confused about the scenario of the two tags, and I believe most of them are, and now let's look at the difference between them:

<article> tags can define independent content in a Web page, including articles, blogs, and user reviews,<article> tags can be nested use, when the tag is nested use, the internal <article> The contents of the tag must be related to the contents of the external <artcle> tag.

<section> tags are used to partition the contents of a page. A section element is usually composed of content and its title The,<section> tag is used to block the contents of the page, and the contents of the adjacent <section> tag should be relevant, not like <article> The contents of the tag are independent.

The difference between:<article> labels more emphasis on independence, integrity,<section> labels more emphasis on relevance.

The shortcomings of the small demo:

There are some areas of the form that do not conform to the specification, such as the inability to interact with the background well, the lack of ID, name, and value values.

Small Demo Address:

Https://cruxf.github.io/BaiduTask/test1.html

There is a shortage of places to hope that everyone points out!

Task 1:0 basic HTML Coding exercises