HTML Document structure
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>My test site</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Copy the code
-
declares the document type, telling the browser to parse the rendered page according to what standard, currently the short declaration represents the W3C’s HTML5 standard
-
< HTML >
The root element of a web page that contains the content of the entire page -
The element of the page, which contains the page description, CSS styles, and so on
-
The body content of a web page, which can be seen by visitors, including text, video, etc
-
Metadata, which describes data. Common metadata is as follows:
<meta charset="utf-8">
<! -- indicates the character set encoding of the page. Only the corresponding character set can be parsed to get the correct text.
Copy the code
<meta name="keywords" content="Nuggets. - No code, no nuggets.">
<! This is a webpage keyword, which has been ignored by search engines, because cheaters fill a large number of keywords into the keyword, misguiding the search results -->
Copy the code
<meta name="description" content="Nuggets is a community that helps developers grow...">
<! -- The effect is as follows -->
Copy the code
<meta name="author" content="Smith">
<! -- Add author -->
Copy the code
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
You can customize the page icon, as shown below, or fill it in with a PNG iconhref
In the link
<link rel="stylesheet" href="css.css">
Introduce external style sheets<script type="text/javascript" src="my-js-file.js"></script>
Introduce external behavior tables
The element type
Page elements fall into three categories: block-level elements, inline elements, and inline block elements
- Block-level element: Occupies the entire line of its parent element, can contain other block-level elements or inline elements, and can control width, line height, border, etc
- Inline element: occupies only the size of its content, can only accommodate text or other inline elements, cannot set width
- Inline block elements: Neither monopolizes a row, nor supports setting width
Headings and Paragraphs
Headings range from < H1 > to < H6 >. Generally, < H1 > is used to indicate the logo of a page and there can only be one < H1 > per page.
Paragraphs are represented by
tags
The list of
Lists fall into three categories: ordered lists, unordered lists, and defined lists
- An ordered list
<ol>
<li>mathematics</li>
<li>Chinese language and literature</li>
<li>English</li>
<li>The computer</li>
</ol>
Copy the code
- Unordered list
<ul>
<li>banana</li>
<li>apple</li>
<li>peach</li>
<li>Shandong pears</li>
</ul>
Copy the code
- Define a list
<dl>
<dt>Sichuan province</dt>
<dd>chengdu</dd>
<dd>Mianyang city</dd>
<dd>Meishan city</dd>
</dl>
Copy the code
hyperlinks
<a href="https://www.baidu.com" target="blank" title="
- Among them
href
The link is where the page will jump to, or fill it in if you want the page not to refreshhref="javascript:;"
- Among them
target
How do I open the pageblank
By default, the current page opens asself
- Among them
title
When the mouse moves over the current position, a small window displays the description of the current TAB
Semantic tag
<header>
The header of a page or its parent element, usually including the title, logo, search box, etc<nav>
Navigation bars, such as menus, tables of contents, indexes, etc. are used to place popular links<article>
Standalone documents, pages, applications such as news articles, blogs, user comments, etc<section>
Group content by topic, which can be used as a mini-map, a set of article titles and abstracts<aside>
Represents a section that has little to do with the rest of the content and can display ads and reference content<footer>
Represents the footer of the chapter or the contact link content at the bottom of the page
Audio and video
- attribute
src
Property is required and represents the path to the embedded filecontrols
Whether to display the browser’s own space, you can create custom controlsautoplay
Auto playloop
Whether to automatically loopmuted
If quietposter
The specified image or short video can be an advertisement or previewsource
The element represents alternative resources for the videoFor browser compatibility problemspreload
There are three values for buffering large filesnone
No bufferauto
The video file is cached after the page loadsmetadata
Only the metadata of the file is cached
<audio controls src="music/apple.mp3">Your browser does not support the audio</audio>
<video controls src="videos/apple.mp4">Your browser does not support this video</video>
<video controls >
<source src="videos/apple.mp4" type="video/mp4">
<source src="videos/apple.webm" type="video/webm">
</video>
<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. clickable<a href="rabbit320.mp4">This link</a>watch</p>
</video>
Copy the code
- Add subtitles
Subtitle type
subtitles
Add translated subtitlescaptions
Only subtitles in important placestimed descriptions
Convert text to audio- use
track
Tag wrap, place after all sources, and usekind
Property specifies which type is usedsrclang
What language did you write the subtitles in
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
Copy the code