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 iconhrefIn 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 themhrefThe link is where the page will jump to, or fill it in if you want the page not to refreshhref="javascript:;"
  • Among themtargetHow do I open the pageblankBy default, the current page opens asself
  • Among themtitleWhen 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
  • srcProperty is required and represents the path to the embedded file
  • controlsWhether to display the browser’s own space, you can create custom controls
  • autoplayAuto play
  • loopWhether to automatically loop
  • mutedIf quiet
  • posterThe specified image or short video can be an advertisement or preview
  • sourceThe element represents alternative resources for the videoFor browser compatibility problems
  • preloadThere are three values for buffering large filesnoneNo bufferautoThe video file is cached after the page loadsmetadataOnly 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

  • subtitlesAdd translated subtitles
  • captionsOnly subtitles in important places
  • timed descriptionsConvert text to audio
  • usetrackTag wrap, place after all sources, and usekindProperty specifies which type is usedsrclangWhat 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