Entry-level HTML, CSS_HTML page elements and attributes
Hello, this is Ken
Let’s start with today’s review of the consolidated content-HTML page elements and attributes
This blog is temporarily suitable for friends who are new to HTML and who want to review after a long time.
Last summer my grandfather into the intensive care unit
later rescued over
I stayed for two weeks in the hospital
just know people could be so fragile
now that he has been very pleased with the good old also
true
that you love and who love you people may see less your homecoming day
also be sure to efforts
The front is connected to the
door-level HTML, CSS_HTML basis
This part of the basic entry has no technical content, just
pile up more examples and practice more.
2.1_List elements
2.1.1_ul element (unordered)
Example: The
code is as follows:
After running:
2.1.2_ol element (ordered)
Example: The
code is as follows:
After running:
2.1.3_dl element
Example: The
code is as follows:
After running:
2.1.4_ Nesting of List Elements
Example: The
code is as follows: After
running:
Case: Introducing other nested structures by analogy,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>看</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
<dt>这</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
<dt>里</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
</dl>
</body>
</html>
operation result:
2.2_ Structural elements
2.2.1_header element
The header element is usually placed in the head of a website page as a title , which can include website logo photos, search forms, and other content.
Has the role of guidance and navigation.
Example: The
code is as follows:
After running:
2.2.2_nav element
The nav element is used to define navigation links
Example: The
code is as follows: After
running:
Click any link in 1234:
In the above code, the navigation structure is built by nesting the ordered list ol inside the nav element. Generally, an HTML page can contain multiple nav elements as a navigation for the whole or different parts of the page. Specifically, the nav element can be used in the following situations.
● Traditional navigation bar: At present, there are navigation bars of different levels on mainstream websites, and their function is to jump to other main pages of the website.
● Sidebar navigation: At present, mainstream blog sites and e-commerce sites have sidebar navigation, the purpose is to jump the current article or current product page to other articles or other product pages.
● In-page navigation: its function is to jump between the main components of this page.
● Page turning operation: The page turning operation switches the content part of the webpage. You can switch by clicking "Up-Page" or "Next Page", or you can jump to a page by clicking the actual page number.
In addition to the above points, the nav element can also be used in other important and basic navigation link groups.
2.2.3_article element
The article element represents an independent part of a document, page, or application that is not relevant to the context. This element is often used to define a post, a piece of news, or user comments .
2.2.4_aside element
The aside element is used to define the subsidiary information part of the current page or article . It can contain references to the current page or main content, sidebars, advertisements, navigation bars and other similar parts that are different from the main content.
There are two main uses of the aside element:
- The auxiliary information contained in the article element as the main content.
- Used outside of the article element, as a global subsidiary information part of the page or site. The most commonly used method is the sidebar, where the content can be friendship links, ad units, etc.
2.2.5_section element
The section element is used to block content on a page in a website or application . A section element usually consists of content and a title.
When using the section element, please note:
- Do not use the section element to set the style of the page container, that is the characteristic of the div. The section element is not a normal container element. When a container needs to be directly defined in style or through scripting, div is recommended.
- If the article element, aside element, or nav element is more suitable for use, then do not use the section element.
- Do not use section element definitions for content blocks without titles
2.2.6_footer element
The footer element is used to define the bottom of a page or area, and can contain all the content usually placed at the bottom of the page.
A page can contain multiple footer elements, and footer elements can also be added to article elements or section elements.
2.3_ grouping elements
2.3.1_figure element and figurecaption element
The figure element is used to define independent content (such as images, icons, photos, codes, etc.).
The figcaption element is used to add a caption to the figure element group
At most one figurecaption element is allowed in a figure element , and this element should be placed in the position of the first or last child element of the figure element
Example: The
code is as follows:
After running:
2.3.2_hgroup element
The hgroup element is used to combine multiple titles (main title and subtitle or subtitle) into a title group , usually in combination with h1 ~ h6 elements.
Usually, put the hgroup element in the header element.
Example: The
code is as follows:
After running:
2.4_Page interactive elements
2.4.1_details element and summary element
The details element is used to describe the details of a document or a part of the document. The
details element is often used in conjunction with the summary element. Generally, details are used to define the title
Example: The code is as follows,
after running:
2.4.2_progress element
The progress element is used to indicate the degree of completion of a task.
value: the amount of work done
max: how much work is there in total
Example: The code is as follows,
After running:
2.4.3_meter element
The meter element is used to represent a value within a specified range .
| Attributes | Description |
|---|---|
| high | Define the point at which the value of the metric is defined as the high value |
| low | Define the point at which the value of the metric is defined as a low value |
| max | Define the maximum value, the default value is 1 |
| min | Define the minimum value, the default value is 0 |
| optimum | Define what kind of metric is the best value. If the value is higher than the high attribute, it means that the higher the value, the better. If the value is lower than the value of the low attribute, it means that the lower the value, the better |
| value | Define the value of the metric |
Example: The
code is as follows:
After running:
When the mouse pointer is placed on the progress bar in the results, "99 points" will be displayed
2.5_ Text level semantic elements
2.5.1_time element
The time element is used to define time or date, which can represent a certain time in 24 hours . The time element does not present any special effects in the browser, but the element can encode the date and time in a machine-readable manner, so that users can add birthday reminders or other events to the calendar, and search engines can also Generate smarter search results.
datatime: used to define the corresponding time or date.
pubdate: Used to define the date/time in the time element is the publication date of the document (or article element). The value is generally "pubdate".
Running result:
running result:
2.5.2_mark element
The main function of the mark element is to highlight certain characters in the text .
Similar to em strong, but more casual and flexible in comparison
Example: The
code is as follows:
After running:
2.5.3_cite element
The cite element can create a reference mark. Once the mark is used, the content of the document being marked will be displayed on the page in italics.
Example: The
code is as follows:
After running:
2.6_Global attributes
2.6.1_draggable attribute
The draggable attribute is used to define whether the element can be dragged.
The attribute has two values of true and false. The default is false. When the
attribute is true, it can be dragged, and vice versa.
Example: The
code is as follows:
After running:
Note: The effect achieved by this example on the web page cannot be dragged. If you want to realize the dragging function, you must use it in conjunction with JavaScript.
2.6.2_hidden attribute
This attribute also has two values, true and false (default value). When the attribute is true, the element will be hidden.
Example: The
code is as follows:
After running:
2.6.3_spellcheck attribute
The spellcheck attribute is mainly aimed at the input element and textarea text input box, and checks the spelling and grammar of the text entered by the user.
This attribute also has two values, false and true (default value). When the
value is true, the value in the input box is checked, and vice versa.
Example: The
code is as follows:
After running:
2.6.4_contenteditable attribute
The contenteditable attribute specifies whether the content of the element can be edited , but the premise is that the element must have the mouse focus and its content is not read-only.
This attribute has two values, false and true, true
means editable, false means not editable
Example: The
code is as follows:
After running:
Many seemingly simple things
will always make various mistakes
if you do n’t take it seriously. Slowly you will realize that you are not so strong. The
most terrible thing is not that you realize that your abilities are limited
. After realizing that I was inadequate, I was willing to fall in a few hastily
Hello, I’m Ken,
thanks for reading