current position:Home>Collation of common semantic elements and global attributes in HTML

Collation of common semantic elements and global attributes in HTML

2022-04-29 18:55:19sevenz

WWW


  • www It's actually World Wide Web Abbreviation , It is a system composed of many linked hypertext , Access through the Internet , In Chinese ,www Be translated into (web web Global wide area network ).

<HTML> Elements


  • <HTML> To release global distribution information , People need a universally understood language , A native language of Publishing , All computers may understand , Is the publishing language of the World Wide Web , It's called hypertext markup language ( English :Hypertext Markup Language, abbreviation :<HTML> It's a way to structure Web Markup language for web pages and their content . Web content can be : A set of paragraphs 、 A list of key information 、 It can also contain pictures and data tables , Can be used to publish documents ( Text , form , list ), Get information through hyperlinks , Create a form for accessing remote services , Release Web application , Of the world wide web “ adhesive ”,<HTML> Finally, the machine reads and parses , Or render , Or dig out useful information to support other applications ,<HTML> semantics : Elements + attribute + Property value (+ Document structure ).

Global properties


  • Global properties It means in all <html> Attributes that can be used on elements , It's all <html> Attributes common to elements ; They can be used for all elements , Even if attributes may not work on some elements , The common ones are id and class, There are some <html> Attributes can only be used on specific elements , For example <href>  attribute , More in <a> Elements 、 <link> Element , Common element settings <href>  Attributes have no effect .

<id> Global properties


  • <id>( Global properties ) stay <HTML> The only one in the element <id>, such as :<p id=" Xiao Ming ">, That is, the name of the label in the whole document is ( Xiao Ming ) 了 , No more barking is allowed ( Xiao Ming ) Of people , Must be unique , stay HTML5 in , <id> Property can be used for any <HTML> Elements , Naming rules : Must be in letters A-Z or a-z start , The following characters : Letter (A-Z,a-z)、 Numbers (0-9)、 A hyphen ("-")、 Underline ("_")、 The colon (":") And the point number ("."), Lower case attribute names are recommended .<id>  The value of must not contain white space characters ( Including spaces and tabs ), The browser will not meet the specification <id> Whitespace characters in are considered to be <id> Part of , For compatibility <id> It should start with a letter .

<class> Global properties


  • <class>( Global properties ) Attribute specifies the class name of the element (classname), Not the only one in the element , You can use the same attribute values to style and manage in batches , Try to use values that describe the nature of the content , Though right <class> There is no requirement for the naming of , but web It's best for developers to use names that can express the semantic purpose of elements , Instead of describing the name of the element ( Even if an element is italicized , however <class> The name of should not be italics), Semantic naming can be logical even when the page presentation changes . stay HTML5 in , <class> Property can be used for any <HTML> Elements , If you need to specify multiple classes for an element , Separate class names with spaces , such as : <span class="left important">,HTML Element allows multiple classes , Naming rules and <id> identical .

<title> Global properties


  • <title>( Global properties ) Attribute specifies additional information about the element , This information usually displays a tooltip text as the mouse moves over the element (tooltip text), stay HTML5 in , <title> Property can be used for any <HTML> Elements , This attribute usually exists , But it's not necessary ,<title> Attributes are often associated with <form> as well as <a> Elements are used together , To provide information about the input format and link target , If a node does not  <title>  attribute (attribute), By default, it inherits the corresponding attributes of its parent node , The parent node may inherit from the parent node of the parent node , And so on .

<lang> Global properties


  • <lang> Global properties Attribute specifies the language of the element's content , Can be used for any <HTML> Elements , such as :<html lang="zh-CN"> A lowercase letter zh The representative language is Chinese , Capitalization CN The representative country is China .

Tags and elements


  • label Simple understanding is by < Start ></ end > form ( Mostly ), such as :<p></p> It's a label ,<br> It's also a label ( Empty label , No end tag ).
  • Elements The simple understanding is < Start > Content </ end >( Mostly ), such as :<p> Hello </p> Is an element ,<p class="greeting"> Hello </p> It's also an element , The tag name is the element name .

element.gif

<link> External resource link elements


  • <link> External resource link elements , Define the relationship between documents and external resources ,<link> The element is empty , It only contains properties , This element can only exist in <head> part , But it can happen any number of times , stay <html> in <link> The tag has no end tag , The most common use is to link style sheets to icons , such as :
<link href="main.css" rel="stylesheet">
 Copy code 
<link rel="icon" href="favicon.ico">
 Copy code 

In the example above , Used  href  Property to set the path of the external resource ( Style sheets / Icon ), And set up  rel  The value of the property is “stylesheet”( Style sheets ),rel  Express “ Relationship (relationship) ”, Define the relationship between the current document and the linked document ,rel yes relationship English abbreviations .

<a> Inline elements


  • <a> Elements ( Or anchor element ), Define hyperlinks , Used to link from one page to another , The most important attribute is href attribute , It indicates the target of the link , You can get through it herf Property to create links to other web pages 、 file 、 Location within the same page 、 Email address or any other URL Hyperlinks for , The linked page is usually displayed in the current browser window , Unless you set another goal (target attribute ), Neither the start tag nor the end tag can be omitted , have access to  href="#top"  perhaps  href="#"  The link returns to the top of the page , This is a html5 Characteristics of , But if not set href attribute , Is just a placeholder for hyperlinks , The most common use is to link external addresses / Link to a section of this page / Create a clickable picture / such as :
<a href="https://www.w3school.com.cn/tags/tag_a.asp"> External Web Links </a>
 Copy code 
<a href="# attribute "> A part of a web page </a>
 Copy code 
<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
       alt="MDN logo" />
</a>
 Copy code 

<artice> Block-level elements


  • article Element specifies independent self-contained content , The content of the definition itself must be meaningful and independent of the rest of the document , Represents a document 、 page 、 A stand-alone structure in an application or website , It is intended to be an independently distributable or reusable structure , For example, in the release , It could be a forum post 、 Magazines or news articles 、 Blog 、 Comments submitted by users 、 Developers just need to focus on the implementation logic , Or other independent content projects , When <article> When elements are nested , Then this element represents the article related to the outer element , One <article> An element usually has its own title ( Usually placed in a <header> Elements inside ), Sometimes it has its own footnotes , Documents can contain multiple articles , for example , As the reader scrolls through the blog, it displays the text of each article one by one , Each post will be included in <article> In the elements , May contain one or more <section>, such as :
<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>
 Copy code 

The content in this example is divided into several parts , The film title of the article is placed in <header> In the element <h1>, The main content is <section> In the element <p>, The content and time of all users' comments are placed in <section> Do a large block processing in , Each content and time is independent and complete , So put it in <article> Medium <p> and <footer> in , Put a in the last footer <footer>,<section> You can also refer to this example .

<section> Block-level elements


  • <section> Element defines an area of the document , Like chapters 、 Head 、 Bottom or other areas of the document , If the content of the element is taken as an independent and meaningful collection ,<article> Elements may be a better choice , Don't put the <section> Element is used as a normal container , This should have been <div> Usage of ( Especially when the clip (the sectioning ) Just to beautify the style ), Generally speaking , One <section> Should appear in the document outline , One <section> Elements usually consist of content and its title , It is generally not recommended to use... For content without a title <section> Elements ,<article> Element can be regarded as a special type of <section> Elements , It is better than <section> Elements emphasize more independence , namely <section> Elements emphasize segmentation or chunking , and <article> Emphasize independence , say concretely , If a piece of content is relatively independent 、 When complete , You should use <article> Elements , But if you want to divide a piece of content into several paragraphs , You should use <section> Elements , <article> and <section> They all look like semantic <div>, But not .

<nav> Block-level elements


  • <nav> Element defines the part of the navigation link , Represents a part of a page , The purpose is to provide navigation links in the current document or other documents , A common example of the navigation section is the menu , Catalog and index , Not all links must use <nav> Elements , It is only used to put some popular links into the navigation bar , for example <footer> Element is often used to include a less commonly used to... At the bottom of the page , There's no need to join <nav> List of links to , A web page may also contain multiple <nav> Elements , For example, one is the navigation list in the website , The other is the navigation list in this page ,<nav> Not to represent the so-called navigation bar , It means “ Navigation content ”, Accurately speaking : Element represents an area that contains multiple links , These links point to other pages or other parts of this page , If the content itself refers to links to other articles , Then it should not be placed in the navigation , It doesn't have to include  ul, You can also use natural text for navigation . such as :
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 Copy code 
<nav> 
<h1>Navigation</h1>
<p>Welcome to my website. To see latest blog posts, please go to
<a href="/blog">my blog</a>.
You can find my books and papers in the 
<a href="/publications">publication</a> section.
If you are interested in my work, please contact me by fill in the contact form 
<a href="/contact">here</a>.
</p> 
</nav>
 Copy code 

<aside> Block-level elements


  • <aside> An element defines something other than what it is in , Represents a section that has little to do with the rest of the page , It is considered to be independent of the content and can be split separately without affecting the whole , It is usually represented as a sidebar or callout box or quote , advertisement 、nav Element groups and other content separate from the main content of the page , The sample picture :

pull-quote.jpg

<h1~h6> Block-level elements


  • <h1>~<h6> The title element presents six different levels of titles ,<h1>  Highest level , and  <h6>  The lowest level , Don't use low-level titles to reduce the font of titles , But use CSS Of font-size attribute , Avoid skipping a level title , From you to  <h1>  Start , Next, use  <h2>, Use <section> Element time , For convenience , You should consider avoiding reuse on the same page <h1>,<h1> Should be used to represent the title of the page , Other titles should be from <h2> Start using , In the use of <section> when , Should be for each <section> All use one  <h2> best , The following two examples are semantically equivalent :
<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <h2>Diving in</h2>
  <h2>Simple shapes</h2>
</body>
 Copy code 
<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h1>Diving in</h1>
  </section>
  <section>
    <h1>Simple shapes</h1>
  </section>
</body>
 Copy code 

<header> Block-level elements


  • <header> Element defines the header of a document or part of a document , It should be used as a container for introduction or navigation link bar , In a document , You can define multiple <header> Elements ,<header> Elements cannot be placed in <footer><address> Or another <header> Element interior , It usually contains some Title Elements , But not necessarily , It may also contain other elements , such as Logo、 Search box 、 Author's name, etc , The following example shows the of the entire page <header> With the article <header> as follows :
<header>
  <h1> Home page title </h1>
  <img src="mdn-logo-sm.png" alt="MDN logo">
</header>
 Copy code 
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p>
  </header>
  <p>We live on a planet that's blue and green, with so many things still unseen.</p>
  <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>
 Copy code 

<footer> Block-level elements


  • <footer> Element represents the footer of the latest chapter content or root node element ,<footer> Element should contain information about the elements it contains , The footers usually contain the author of the document 、 Copyright information 、 Terms of use link 、 Contact information, etc , In a document , You can define multiple <footer> Elements ,<footer> The author's contact information should be in the element of <adddress> in ,<footer> It can't be <address>,<header> Or another <footer> The offspring element of ,<footer> Element is not chapter content , Therefore, new chapters cannot be included in the outline , The footer does not have to appear at the end of the page , Although they usually appear , A page such as the following example footer , One at the top , One at the bottom , Same content :
<body> 
<footer><a href="../">Back to index...</a></footer>
<hgroup> 
<h1>Lorem ipsum</h1> 
<h2>The ipsum of all lorems</h2> 
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni
si ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate ve
lit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proide
nt, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<footer><a href="../">Back to index...</a></footer> 
</body>
 Copy code 

<address> Block-level elements


  • <address> Element defines the author of a document or article / The owner's contact information , If <address> The element is located in <body> Within the element , Then it represents the document contact information , If <address> The element is located in <article> Within the element , Then it represents the contact information of the article ,<address> The text in the element is usually rendered in italics , Most browsers will be in <address> Add a line break before and after the element , Element should not be used to describe a mailing address , Unless it's part of the contact information ,<address> Elements are usually included with other information <footer> In the elements , Can be used in a variety of contexts , For example, provide business contact information at the beginning of the article , Or put it in <article> Within the element , Indicate the author of the article , When representing an arbitrary address that has nothing to do with contact information , Please switch to <p> Elements, not  <address>  Elements , Element cannot contain any information except contact information , Like the date of publication ( This should be included in <time> In the elements ), The following example demonstrates how to use  <address>  Indicates the contact information of the author of an article :
<address>
    You can contact author at <a href="http://www.somedomain.com/contact">
    www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:[email protected]">
    contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    331 E Evelyn Ave<br>
    Mountain View, CA 94041<br>
    USA
</address>
 Copy code 

although  <address>  The element looks like it just uses i perhaps em Element to render the text in it , But it's more appropriate when dealing with contact information , Because it expresses additional semantic information , In the following example , The footer contains contact information and copyright notice :

<footer> 
<address>
For more details, contact 
<a href="mailto:[email protected]">John Smith</a>.
</address>
<p><small> copyright 2038 Example Corp.</small></p> 
</footer>
 Copy code 

<p> Block-level elements


  • <p> Element defines a paragraph of the text , Is a block level element , The element automatically creates some white space before and after it , The browser will automatically add these spaces , You can also specify , Example :
<p> This is the first paragraph . This is the first paragraph .
    This is the first paragraph . This is the first paragraph .</p>
<p> This is the second paragraph . This is the second paragraph .
    This is the second paragraph . This is the second paragraph .</p>
 Copy code 

<hr> Block-level elements


  • <hr> The original meaning is (horizontal rule Horizontal separation line ), Element represents the topic conversion between paragraph level elements , And displayed as a horizontal line , It's an empty element , There must be a start tag , Cannot have end tag , stay HTML In an earlier version , It's a horizontal line , Now it can still appear as a horizontal line in the visual browser , But now it is defined as semantic , Not on a performance level , So if you want to draw a horizontal line , Please use the appropriate css Style to decorate ,<he> Element does not affect the outline of the document .

<pre> Block-level elements


  • <pre> Element to define pre formatted text , Surrounded by <pre> The text in the element usually retains spaces and line breaks , And the text will also appear as an equal width font ,<pre> A common application of element is to represent the source code of computer ,<pre> Elements are block level elements , But it can only contain text or inline elements . in other words , Any block level element ( It is usually a label that can cause paragraphs to break ) Can't be located in <pre> In the elements ,<pre> The allowed text in the element can contain physical styles and content-based style changes , And links 、 Image and horizontal separator , When you put other elements , such as <a> Put elements in <pre> Time in block , It's like putting it on HTML/XHTML Just like in other parts of the document , tabs tab stay <pre> Element definition can play its due role in the block , Each tab occupies 8 Character position , But it is not recommended to use tab, Because in different browsers ,tab Different forms of expression , In use <pre> Use spaces in document segments formatted with element , It can ensure the correct horizontal position of the text , If you want to use <pre> Element to define the computer source code , such as HTML Source code , Use symbolic entities to represent special characters , Generally will <pre> Elements and <code> Elements are used together , For more precise semantics , Used to mark the source code that needs to be rendered in the page , If you want to put a specified text format in HTML in , Then use <pre> The properties of the elements .

<blockquote> Block-level elements


  • <blockquote> A block level reference element defines a block reference taken from another source ,<blockquote> And </blockquote> All text between is separated from regular text , Often on the left 、 Indent the right side (40px) The text of ( Increase the outer margin ), And sometimes you use italics , in other words , Block references have their own space , If the tag is a short reference that does not require paragraph separation ( Inter line reference ), Please use <q>,<blockquote> Elements are generally nested <p> Elements , Used to mark referenced text , These references are not directly located in <blockquote> In the elements , If the citation comes from an online resource ( Including other parts of your website ), So it can be <blockquote> Elemental cite( quote ) Property to indicate the original source URL, The signature must be placed in  <blockquote>  Outside , Example :
<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>
  Avian carriers can provide high delay, low
  throughput, and low altitude service.  The
  connection topology is limited to a single
  point-to-point path for each carrier, used with
  standard carriers, but many carriers can be used
  without significant interference with each other,
  outside of early spring.  This is because of the 3D
  ether space available to the carriers, in contrast
  to the 1D ether used by IEEE802.3.  The carriers
  have an intrinsic collision avoidance system, which
  increases availability.
  </p>
</blockquote>
 Copy code 

<ol> Block-level elements


  • <ol> Element defines a sequential table , The list sort is displayed in numbers , Use <li> Element to define List Options , Use CSS Define a style for the list , Usually , The entry of the ordered list will be displayed with the number mark in front of it , Number marks can be numbers or letters ,<ol>  and <ul> Elements can be nested infinitely , It can be nested of the same kind , You can also nest each other ,<ol>  and <ul> Elements represent lists , The difference lies in ,<ol>  The order of the ordered list of elements makes sense , As for how to determine which list element to choose , You can try to change the order of list items , If its meaning changes , Then we should use <ol>, Otherwise use <ul>, as follows :

A simple example

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
 Copy code 

Nested list

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
 Copy code 

Nested with sequence table and unordered list

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
 Copy code 

<ul> Block-level elements


  • <ul> Element defines an unordered list , take <ul> Elements and <li> Elements used together , Create an unordered list , Use CSS Define a style for the list ,<ul>  Element is used to group a set of data without numerical order , And their numerical order is meaningless , for instance , Items in an unordered list are usually decorated with one character , These characters can take the form of dots , Round or even square . Although this character is not defined directly on the page , But you can use related CSS Operate on it , stay <ol> and <ul> In the elements , Nested lists have no restrictions on depth and nesting order , as follows :

A simple example

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
 Copy code 

Nested list

<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem      <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>           <!-- Closing </li> tag for the li that contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  </li>               <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>
 Copy code 

Nested order and disorder

<ul>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>
 Copy code 

<li> Block-level elements


  • <li> Element definition list item , It must be contained in a parent element : Ordered list , Unordered list , And menu list (<menu>) in , The example is the same as above .

<dl> Block-level elements


  • <dl> An element is a list of terms, definitions, and descriptions , Usually used to display vocabulary or metadata  ( key - List of value pairs ),<dl> Elements and <dt>( Define the project / name ) and <dd>( Describe each project / name ) Use it together , Please do not put this element ( Don't use <ul> Elements ) Used to create indented content on the page . Although this result style looks ok , however , This is a very bad practice , And the semantics are not clear , as follows :

Single term and description

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.
  </dd>
  <!-- other terms and definitions -->
</dl>
 Copy code 

Multiple terms , Single description

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>

  <!-- other terms and definitions -->
</dl>
 Copy code 

A single term , Multiple descriptions

<dl>
  <dt>Firefox</dt>
  <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
  <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>

  <!-- other terms and definitions -->
</dl>
 Copy code 

<dt> Block-level elements


  • <dt> Element is used to declare a term in a definition list , This element can only be used as <dl> The child element of appears , This element is usually followed by <dd> Elements , However , Multiple consecutive <dt> Elements will be represented by the first... That appears after them <dd> Element definition , The example is the same as above .

<dd> Block-level elements


  • <dd> Element is used to indicate a description list (<dl>) A description of a term in an element , This element can only appear as a child element describing a list element , And must be followed by (<dt>) Elements , stay <dd> Within the element , You can place paragraphs 、 Line break 、 picture 、 link 、 List, etc , The example is the same as above .

<figure> Block-level elements


  • <figure> Element specifies independent stream content ( Images 、 Chart 、 Photo 、 Code and so on ), Often with instructions (caption)<figcaption> In combination with , The content of the element should be related to the main content , At the same time, the position of the element is independent of the main content , If deleted , Should not affect document flow ,<figcaption> Element is used for <figure> Element definition title , such as :

Images

<!-- Just an image -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN.">
</figure>

<!-- Image with a caption -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN.">
  <figcaption>MDN Logo</figcaption>
</figure>
 Copy code 

Code segment

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}</pre>
</figure>
 Copy code 

Quotes

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>
 Copy code 

<figcaption> Block-level elements


  • <figcaption> Element is <figure> Define the title , Should be placed in <figure> The position of the first or last child of an element , meanwhile <figcaption> Element is optional , If there is no such element , The picture of this parent node just doesn't explain / title , The example is the same as above .

<div> Block-level elements


  • <div> Element definition HTML A delimited block or a section of a document , The document can be divided into independent 、 Different parts , It can be used as a rigorous organizing tool , And it doesn't use any format associated with it , If you use id or class To mark <div>, Then the function of the label will become more effective , It is often used to combine block level elements , In order to pass CSS To format these elements , Used to layout web pages , By default , Browsers are usually in <div> Put a line break before and after the element , However , You can use the CSS Change this situation , Is a block level element , This means that its content automatically starts a new line , actually , Newline is <div> Inherent unique format representation , It's not necessary for every <div> Add classes or id, Although there are certain benefits to doing so , It can be done to the same <div> Element application class or id attribute , But it's more common to apply only one of these , The main difference between the two is ,class For element groups ( Similar elements , Or it can be understood as a certain kind of element ), and id Used to identify individual unique elements , As a “ Pure ” Containers ,<div>  Elements do not semantically represent any particular type of content , You can also divide and mark content written in another language in a document ( Use lang attribute ) wait ,<div>  Element should only be used when no other semantic elements are available ,- There is no semantics in itself , The last choice to consider . Example :
<body>

 <h1>NEWS WEBSITE</h1>
  <p>some text. some text. some text...</p>
  ...

 <div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
</div>

 <div class="news">
  <h2>News headline 2</h2>
  <p>some text. some text. some text...</p>
  ...
 </div>

 ...
</body>
 Copy code 

<main> Block-level elements


  • <main> Element is used to specify the body content of the document , The content of the element is unique in the document , It should not contain repeated content in the document , Like the sidebar 、 The navigation bar 、 Copyright information 、 Site logo or search form ,<main> The element is the only , So there can't be more than one <main> Elements .<main> An element cannot be a descendant of :<article><aside><footer><header> or <nav>,<main>  Outline of the document (outline) No contribution , in other words , It has something to do with <body> Elements like that , Such as <h2> Such titles are different ,<main>  Does not affect the DOM The concept of page structure , It only serves to provide information , Usually use  <main>  Elements , Not the definition  role="main", Unless you're considering compatibility with older browsers ,<main>  Tags are widely supported , about IE browser 11 Version and lower than 11 Version of , Recommend to  <main>  Element to add   role="main" this ”ARIA“( Accessible Rich lnternet Applications Is to HTML Add semantics and other metadata to W3C standard , To meet the needs of users' auxiliary technology ) role , To ensure its accessibility , Screen readers , Such as JAWS, When compared with older versions Internet Explorer When used together , This... Needs to be included  role  Attributes to understand  <main>  The semantic meaning of the element . Example :
<!--  Other content  -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

<!--  Other content  -->
 Copy code 

<em> Inline elements


  • <em> The element is a phrase tag , Used to present as emphasized text , Elements can be nested , The deeper the nesting level , Then the content contained in it is considered that the more important it is to focus on reading , For all browsers , This means that the text should be displayed in italics , If you only want to use italics to display text , Please use <i> label , New developers see multiple elements produce similar effects , Often confused ,<em>  and  <i>  Is a pair of common examples , Because they all italicize the text , What is the difference between them ? Which one should I use ? By default , Their visual effects are the same , But semantics are different ,<em>  The label indicates the emphasis of its content , and  <i>  Tags represent text that is distinguished from normal prose , For example, loanwords , The thoughts of fictional characters , Or when the text refers to the definition of a word , Not its semantic meaning ,( The title of the work , For example, the name of a book or movie , You should use  <cite>) It means , Which one to use correctly depends on the specific scenario , Neither is purely for decorative purposes , That is CSS What style does , We are not opposed to using this element , But if you use this label just to achieve a certain visual effect , We suggest you use CSS , This may have a richer effect . One <em> An example might be :"Just do it already!", or :"We had to do something about it", When someone or software reads text , Be able to stress the pronunciation of italics . One <i> An example might be :"The Queen Mary sailed last night". ad locum , No, right "Queen Mary" Add emphasis or importance to the word . It just shows , I'm not talking about a queen named Mary , But a ship named Mary . the other one  <i>  An example might be :"The word the is an article".<em>  Element is often used to indicate an implicit or explicit contrast ,em  The location is different , The text itself has different meanings . Example :
<p>
  In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow
  </em> content.
</p>
 Copy code 

<strong> Inline elements


  • <strong> Elements and <em> equally , Used to emphasize text , But it emphasizes a little more , Browsers usually use a different language than <em> Element to display <strong> Content in the element , Usually in bold font ( Relative to italics ) To display the contents , In this way, the user can distinguish the two elements , If common sense tells us that we should use less <em> element , that <strong> Elements should appear less often , If it works <em> The text decorated by the element seems to be shouting , Then use <strong> The text decorated by the element is like screaming , What a silent person says is always a promise , Same as this , Limit <strong> The use of can make it more noticeable , And more effective . New developers are often confused , Why are there so many ways to express the same thing on a rendered website .Bold and Strong Maybe it's one of them . Why use <strong> instead of <b>? Use strong You have to type more letters , But it produces harmony b The same effect , Right ? Maybe not , strong It's a logical state , and bold It's a physical state . Logical state separates content and form , Using logical states allows you to express... In a variety of different ways . For example, you want to render the text red , Use fonts of other sizes 、 Underline or other styles , Instead of bold style . You must understand and use strong The presentation is different from the simple bold ,  because bold It's a physical state , He didn't distinguish between form and content . If you allow bold Did anything other than bold text , Will be confusing and illogical ,<em> And <strong> The difference between : stay  HTML4 when , Strong Simply express a stronger emphasis (emphasis), And in the HTML5 in , This element is described as representing “ The importance of content (strong importance for its contents) ”. This is an important difference .em label (Emphasis) Used to change the meaning of a sentence ( such as " I <em> like </em> Carrot "  and " I like <em> Carrot </em> ", Emphasize likes and carrots respectively ), Strong Used to add importance to parts of a sentence ( such as  " Warning !   this Very dangerous .") Strong and Emphasis Can be nested to increase relative importance or emphasize focus ,strong  The location is different , The meaning of the text itself remains unchanged , Example :
<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>
 Copy code 

<i> Inline elements


  • <i> The element defines something different from the rest of the text , And present this part of the text in italics ,( Not just italics ), Used to denote a technical term 、 Technical terminology 、 Foreign phrases or the ideological activities of the characters in the novel , Idioms in other languages 、 idea 、 The name of the spaceship and so on , When there are no other elements with appropriate semantics to use , Please use <i> Elements , Use class Attribute is a good way to identify why this element is used , In this case , If this indicates that it needs to be changed in the future , You can selectively change the style sheet , Example :
<p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often
mentioned in music, art, and literature</p>
 Copy code 

<b> Inline elements


  • <b> An element represents something that needs attention but has no other additional semantics ,( No longer just bold ) Applications such as : Keywords in the summary 、 Product name in comments , Or other typical text that should be bold ( There is no other special emphasis on ), Don't put <b> And <strong><em><mark> Element mixed dishes ,<strong> Element represents some important text ,<em> Emphasis text ,<mark> Element represents the text of some relevance ,<b> Elements do not convey such special semantic information , Use it only if there are no other suitable elements , By means of  <b>  Add on element class  Attribute is a good way to represent additional semantic information ( for example  <b class="lead">  To represent the first sentence in a paragraph ). This makes it easier to handle different applications when the style needs to change  <b>  Elements , There is no need to change HTML, If not for semantic purposes  <b>  Elements , So a better way to make the text bold is to use CSS Of font weight Property is set to  "bold", Example :
<p>
  This article describes several <b>text-level</b> elements.
  It explains their usage in an <b>HTML</b> document.
</p>
Keywords are displayed with the default style of the <b> element, likely in bold.
 Copy code 

<small> Inline elements


  • <small> The element presents a small font effect , Make the font of the text one size smaller .( For example, from large to medium , From medium to small , From small to super small ). stay HTML5 in , In addition to its style and meaning , This element is redefined to represent side notes and subsidiary rules , Including copyright and legal texts ,( No longer just small words )<small> Elements can also be nested , Reduce the text continuously . Every <small> Elements reduce the font size of the text , Until the lower limit is reached , Even though  <small>  Elements ,<b> Elements and  <i>  Elements are considered to violate the principle of separation of structure and style , But in HTML5 These three elements are allowed in . Readers should use... At their own discretion <small> still CSS style , Example :
<p>This is the first sentence.  <small>This whole sentence is in small letters.</small></p>
 Copy code 

<s> Inline elements


  • <s> Element uses strikethrough to render text , Use  <s>  Element to indicate that it is no longer relevant , Or something that is no longer accurate , Should not be used to define replacement or deleted text ,( No longer just text with strikeouts ) If you want to define replaced or deleted text , Please use <del> Elements ,<strike> Elements , On the other hand <s> Elements , Has been abolished and should no longer be used in Web Site , Example :
<s>Today's Special: Salmon</s> SOLD OUT<br>
<span style="text-decoration:line-through;">Today's Special:
  Salmon</span> SOLD OUT
 Copy code 

<u> Inline elements


  • <u> Element represents a that needs to be marked as non textual (non-textual) Inline text field for . By default, it is rendered as a solid underline , It can be used CSS Replace , Define text that is different from regular text style , Like misspelled words or proper nouns in Chinese , Just like all typesetting elements ,( No longer just underlined text ),<u> stay HTML 4 Medium waste , But in HTML 5 A new semantics has been restored in , intend : Mark the text as if some form of non textual annotation has been applied , In places that may be confused with hyperlinks , Avoid using  <u>, To apply an underlined appearance without any semantic meaning , Please use CSS style , The following example uses <u> Elements and some CSS To display paragraphs that contain spelling errors , Where errors are indicated by a red wavy underline , This situation is usually used for this purpose :
<p>This paragraph includes a <u class="spelling">wrnogly</u>
spelled word.</p>
 Copy code 

stay HTML in , We see  <u>  Used a class  spelling, Used to represent “wrongly” A misspelled word .

u.spelling {
  text-decoration: red wavy underline;
}
 Copy code 

This CSS Said when  <u>  Element use class  spelling  When styling , It should have a red wavy underline under the text . This is a common style of spelling mistakes . You can also use another common style  red dashed underline.

<cite> Inline elements


  • <cite> An element of a reference usually represents the text it contains , Applicable occasions may include a Book , A piece of paper , An essay , A poem , A score , A song , A movie , A TV show , A game , A sculpture , A painting , Drama production , A play , An opera , A kind of music , An exhibition  , A legal case report , A computer program , A website , A web page , Blog or comment , Forum posts or comments  , sing , Or written or oral statements, etc . The person's name does not belong to the title of the work , By convention , The referenced text will be displayed in italics , have access to css Of font-style Property is reset , use <cite> Element separates references to other documents , Especially the separation of documents in traditional media , Like books 、 The magazine 、 Periodical , wait . If the referenced documents are available online , You should also include references in a <a> In the elements , To point a hyperlink to the online version , stay blockquote Element or q Use on element cite perhaps blockquote Attribute to indicate the online resources referenced , It is worth noting that ,W3C The standard is allowed in  <cite>  The element contains the author information of the referenced content , However WHATWG The specification is not allowed in  <cite>  The person name appears in the element , As for who to listen to , After learning about these two organizations, you can judge for yourself , Example :
More information can be found in <cite>[ISO-0000]</cite>.
 Copy code 

<q> Inline elements


  • <q> Element represents a closed and short inline reference to text . This element is used to reference short text , So please don't introduce line breaks , Browsers often add quotation marks around the quoted content ,<q> Labels are essentially related to <blockquote> It's the same , The difference lies in their display and Application .<q> Element is used for short inline references . If you need to separate the longer part from the surrounding content ( Usually displayed as indented blocks ), Please use <blockquote> Elements , Example :
<p>Everytime Kenny is killed, Stan will announce
   <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
     Oh my God, you/they killed Kenny!
   </q>.
</p>
 Copy code 

<abbr> Inline elements


  • <abbr> Element is used to represent an abbreviation or acronym , Such as "WWW" perhaps "NATO", By marking abbreviations , You'll be able to create a browser for 、 Spell checker 、 Translation systems and search engine classifiers provide useful information , Can be in <abbr> Use global in the element title attribute , In this way, you can move the mouse pointer to <abbr> When the abbreviation of the element is displayed / The full version of the abbreviation , Every one you use  <abbr>   Element and other similar elements are independent of each other , Provide... For one of them  title  It will not automatically attach the same additional text to other elements with the same content text , It's helpful in some scenes : When you want to provide an extension or definition for abbreviations outside the document stream , by  <abbr>  Set up a suitable title, An abbreviation that readers are not familiar with , Use  <abbr>  and title Property or inline text to represent the term , When there are abbreviations that need semantic annotation in the text ,<abbr> Element can be used to apply it to style and script in turn , All browsers display this element as an inline element by default , But the default styles vary from browser to browser : Some browsers , such as IE, Add styles and... To it <span> The style of the element is exactly the same ,Opera、Firefox And other browsers add a dotted underline to the content of this element , Some browsers not only add dotted underscores , And also add the content of the element to the style of lowercase and uppercase letters . To avoid this style , stay CSS Add font-variant:none Example :
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>
 Copy code 

<dfn> Inline elements


  • <dfn> The element is a phrase tag , Used to define a definition project , A definition of a term , Now popular browsers usually use italics to display <dfn> The text in the , The definition of terms should be in <p>, <section> Or define a list ( Usually <dt>, <dd> Yes ) Give in , The value of the defined term is determined by the following rules : If  <dfn>  The element has a  title  attribute , Then the value of the term is the value of the attribute , otherwise , If it contains only one  <abbr>  Elements , This element has  title  attribute , Then the value of the term is the value of the attribute , otherwise ,<dfn>  The text content of the element is the value of the term , The closest parent paragraph 、 The definition list group or block content must contain  dfn  Element specifies the definition of the term , Example :
<!-- Define "The Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks
that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
</p>
 Copy code 
<dl>
  <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
  <dt>
    <dfn>
      <abbr title="World-Wide Web">WWW</abbr>
    </dfn>
  </dt>
  <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on 
  <a href="#def-internet">the Internet</a>.
  </dd>
</dl>
 Copy code 

<time> Inline elements


  • <time> Element defines the time of the Gregorian calendar (24 hourly ) Or date , Time and time zone offsets are optional , This element can encode the date and time in a machine-readable manner , such , For example , User agents can add birthday reminders or scheduled events to the user's calendar , Search engines can also generate more intelligent search results , Like all other elements , This element has common attributes that can be used , If the given date is not a normal date or before the earliest date in the Gregorian calendar , Please do not use this element ,datetime  The attribute value must be one of several predefined time formats , If it doesn't include  datetime  attribute , The text content value will be parsed , This element is still under design and discussion , Example :
<p>The concert starts at <time>20:00</time>.</p>
 Copy code 
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>: 
<time class="dtstart" datetime="2005-10-05">October 5</time>-
<time class="dtend" datetime="2005-10-07">7</time>, at the 
<span class="location">Argent Hotel, San Francisco, CA</span>
</div>
 Copy code 

<code> Inline elements


  • <code> Element is used to represent computer source code or text content that can be read by other machines , It is displayed in the browser's default constant width font ,CSS Rules can override the browser's default  code  Label font style , However, the browser font options set by the user may exceed CSS The priority of the , Make it invalid , It should only be used to represent computer program source code or other text content that can be read by the machine <code> Elements . although <code> Element usually just turns text into an equal width font , But it implies that this text is source code , Example :
<p>Regular text. <code>This is code.</code> Regular text.</p>
 Copy code 

<samp> Inline elements


  • <samp> The element is a phrase tag , Sample text used to define a computer program , Identifies the computer program reference output , The program or script statement to be displayed in the document can be used as samp Element annotation , Browsers usually display in a constant width font , Example :
<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>
 Copy code 

<kbd> Inline elements


  • <kbd> Element is used to represent user input , It will produce an inline element , Define keyboard text , When it comes to special styles in technical concepts , I want to mention <kbd> Elements , As you have guessed , It is used to indicate that text is typed from the keyboard , Browsers usually display the text contained in the label in a constant width font , By defining CSS The rules can change kbd The default font for . User preference settings may be better than this CSS Rules have higher priority , When <kbd> The element is in <samp> In the element , It represents the input echoed by the system , When <kbd> The element contains <samp> Element time , This input is based on the system output , For example, call a menu item , When <kbd> The element is in another <kbd> In the element , It represents an actual button , Or a unit under the input mechanism , Example :
<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
 Copy code 

<mark> Inline elements


  • <mark> Element represents text marked or highlighted for reference or symbolic purposes , This is due to the relevance or importance of marked paragraphs in a closed context , Stands for highlighted text , For example, you can use this tag to mark text in a specific context , Use... In quoted text , Indicates a meaning that needs attention in the current document but is not emphasized in the original text , for instance , It can be used to display the keywords after search engine search , When used in reference to (<q><blockquote>) In the middle of the day , Usually used to display text with special meaning , But not marked in the raw materials ; Or materials used to show special reviews , Even if the original author doesn't think it's particularly important , in addition <mark> Element is also used to display part of the document content related to the user's current activity , for example , It may be used to display matching words in search results , Don't use... For syntax highlighting <mark> Elements , You should use <strong> The elements are combined properly CSS To achieve this goal , Don't put the <mark> Elements and <strong> Element confusion ,<strong>  The context element is used to indicate the importance of the text ,  and <mark> Element is used to represent the relevance of context , Example :
<p>&lt;mark&gt;  The element is used for  <mark> The highlighted </mark>  Text </p>
 Copy code 

<ruby> Inline elements


  • <ruby> The element is used to display East Asian phonetic symbols or character annotations , Used in East Asia , It shows the pronunciation of East Asian characters , And <ruby> as well as <rt> Elements are used together ,ruby Element consists of one or more characters ( Need an explanation / pronunciation ) And a person who provides this information rt Element composition , It also includes optional rp Elements , Define when the browser does not support ruby The content of the element , Support ruby The browser of the element will not display rp Content of element , Example :
<ruby>
   han  <rp>(</rp><rt>han</rt><rp>)</rp>
   word  <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
 Copy code 
<ruby>
   bright   Japan  <rp>(</rp><rt>ming ri</rt><rp>)</rp>
</ruby>
 Copy code 

<rt> Inline elements


  • <rt> Element definition character ( Chinese phonetic notation or characters ) To explain or pronounce , And <ruby> as well as <rt> Elements are used together , Example :
<ruby>
   han  <rt>Hàn</rt>
   word  <rt>Zì</rt>
</ruby>
 Copy code 

<rp> Inline elements


  • <rp> The elements are in ruby Use... In comments , Definition does not support ruby What the browser of the element shows ,<rp>  The content of provides what should be displayed , Usually parentheses , In order to express ruby Existence of annotations , Example :
<ruby>
   Han  <rp>(</rp><rt>han</rt><rp>)</rp>
   word  <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
 Copy code 

<span> Inline elements


  • <span> Element is used to combine inline elements in a document , Please use <span> To combine inline elements , In order to format them by style ,span There is no fixed format to express , There is no semantics in itself . When you apply styles to it , It's going to make a visual change , If you don't span Application style , that span There is no visual difference between the text in the element and other text , It can be for span application id or class attribute , In this way, appropriate semantics can be added , It is also convenient for span Application style , It can be done to the same <span> Element application class or id attribute , But it's more common to apply only one of these . The main difference between the two is ,class For element groups ( Similar elements , Or it can be understood as a certain kind of element ), and id Used to identify individual unique elements ,<span> Element provides a way to separate a part of text or a part of a document , Example :
<p><span> Some words </span></p>
 Copy code 
<li><span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
</span></li>
 Copy code 

<ins> Inline elements


  • <ins> The element definition has been inserted into the text of the document ,<del> and <ins> Use it together , Describe the updates and corrections in the document , Browsers usually add a delete line to the deleted text , Add an underline under the newly inserted text , Example :
<ins> This text is newly inserted into the document .</ins>
 Copy code 

<del> Inline elements


  • <del> The text element in the document has been deleted , This label usually ( But not necessarily ) Show strikeouts on text , Example :
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del ><p >This paragraph has been deleted.</p ></del >
 Copy code 

<img> Inline elements


  • <img> Element embeds an image into a web page , Technically speaking ,<img> Element does not insert an image into the web page , It's about linking images from a web page ,<img> Element creates the footprint of the referenced image ,src Properties are required , It contains the file path of the image you want to embed ,alt  Property contains a text description of the image , It's not mandatory , But for accessibility , It's very useful , By means of <a> Nested in elements <img> Elements , Add a link to an image to another document , stay HTML in ,<img> No end tag , Use a meaningful alternative description ,alt  The value of the property should be clear 、 Succinctly describe the content of the image , It should not describe “ The existence of images ”, Or just the file name of the image , If there is no equivalent text description for the image , alt  The attribute has to be left blank , Then consider using other methods to render what the image is trying to convey . Example :

Alternate text

<img src="favicon144.png"
     alt="MDN logo">
 Copy code 

Image links

<a href="https://developer.mozilla.org">
  <img src="favicon144.png"
       alt="Visit the MDN site">
</a>
 Copy code 

error

<img alt=" picture " src="penguin.jpg">
 Copy code 

correct

<img alt=" A rock jumping Penguin standing on the beach ." src="penguin.jpg">
 Copy code 

<iframe> Inline block elements


  • <iframe> Element specifies an inline framework , It can bring another HTML The page is embedded in the current page , You can put the required text in <iframe> and </iframe> Between , This allows you to deal with non support <iframe> Browser , Every... On the page <iframe> Need to increase memory and other computing resources , This is because each browsing context has a complete document environment . Although in theory, you can write an unlimited amount of code <iframe>, But you'd better see if this will lead to some performance problems , Use CSS by <iframe> ( Including scrollbars ) Definition of style , Example :
<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p> Some older browsers don't support  iframe.</p>
<p> If you don't get support ,iframe  It's invisible .</p>
</body>
</html>
 Copy code 

Use  iframe  Of title Property to identify the main content of the framework , This can greatly facilitate the use of assistive technology ( For example, screen readers ) People browsing the web . The title of the frame should clearly describe the content of the frame , If there is no title , They can only browse every frame to get the content they need . It takes a lot of time , It's also easy to confuse , Especially when the page contains many frames or interactive content, such as audio and video , Example :

<iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe>
 Copy code 

<embed> Inline elements


  • <embed> Element embeds external content in a specified location in the document . This content is generated by external applications or other interactive content sources ( Such as browser plug-ins ) Provide , Most modern browsers have abandoned and eliminated support for browser plug-ins , So if you want your website to run on the browser of ordinary users , So rely on  <embed>  It's usually unwise , It is no longer recommended to use <embed> Element , have access to <img><iframe><video><audio> Substitute for ,

Example :

<embed type="video/quicktime" src="movie.mov" width="640" height="480">
 Copy code 

<object> Embed object elements


  • <object> Element represents the introduction of an external resource , This resource may be a picture , An embedded browsing context , Or the resources used by a plug-in , Used to contain objects , Such as images 、 Audio 、 video 、Java applets、ActiveX、PDF as well as Flash,object My original intention is to replace img and applet Elements . However, due to vulnerabilities and lack of browser support , This has not been achieved , The object support of the browser depends on the object type . Unfortunately , Mainstream browsers use different code to load the same object type , And fortunately ,object Object provides a solution , If not object Elements , Will execute at <object> and </object> Code between . In this way , We can nest multiple object Elements ( Each corresponds to a browser ), Example :
<!-- Embed a flash movie -->
<object data="move.swf" type="application/x-shockwave-flash"></object>

<!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>
 Copy code 

<param> Empty elements


  • <param> The element is the... That contains it <object> and <applet> Provide the parameters , stay HTML in ,<param> No end tag , It's an empty element ,<param> Element supports most mainstream browsers . however <object> The defined file format is not supported by all browsers , The example is the same as above .

<video> Block-level elements


  • <video> Element defines the video , Like movie clips or other video streams , at present ,<video> Element supports three video formats :MP4、WebM、Ogg(MP4 = MPEG 4 Files use H264 Video codec and AAC Audio codec ,WebM = WebM Files use VP8 Video codec and Vorbis Audio codec ,Ogg = Ogg Files use Theora Video codec and Vorbis Audio codec ), You can place text content between the start tag and the end tag , In this way, old browsers can display information that does not support the tag , You can also  <video>  Tags are used for audio content , but <audio> Elements may be more appropriate in the user experience , Not all browsers support the same video format , So you can <source> Multiple video sources are provided in the element , Then the browser will use the first source it supports , If you don't specify  controls  attribute , Then the video will not show the browser's own controls , Example :
<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
 Copy code 

<audio> Block-level elements


  • <audio> Element defines the sound , Like music or other audio streams , at present ,<audio> Elements support 3 File formats :MP3、Wav、Ogg, You can place text content between the start tag and the end tag , In this way, old browsers can display information that does not support the tag , Can contain one or more audio resources , These audio resources can be used  src  Property or <source> Element to describe , The browser will choose the most suitable one to use , Browsers have different support for file types and audio coding , You can use embedded <source> Element provides different playback sources . The browser will use the first playback source it supports ,<audio>  The element has no inherent visual style , If you don't make a statement  controls  attribute , The audio player will not contain the browser's default controls , Example :
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>
 Copy code 

<source> Block-level elements


  • <source> Element is a media element ( such as <video><picture> and <audio>) Define media resources , Allows you to specify alternative videos / The audio file is used by the browser to select the media type or codec support , This is an empty element , Example :
<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>
 Copy code 

<track> Block-level elements


  • <track> Element is a media element ( such as <audio>, <video>) Specifies the external text track , That is, subtitles , The subtitle format has WebVTT Format (.vtt Format file ), This element is used to specify subtitle files or other files containing text , When the media plays , These documents are visible ,track  The type of data added to the media element is  kind  Property , The attribute value can be subtitlescaptionsdescriptionschapters or  metadata. This element points to the source file containing timing text that the browser exposes when the user requests additional data , One media  Any two of the elements  track  Child elements cannot have the same  kindsrclang and  label attribute , Example :
<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>
 Copy code 

<table> Block-level elements


  • <tabel> Element definition HTML form , ordinary HTML Form by table Elements and one or more trth or td Element composition ,tr Elements define table rows ,th Element definition header ,td Element definition table cell , More complicated HTML The form may also include captioncolcolgrouptheadtfoot as well as tbody Elements , Please use CSS Style to set properties , Example :
<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>
 Copy code 
<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>
 Copy code 

<caption> Block-level elements


  • <caption> Element definition table title ,caption The element must follow table After element , You can define only one title for each table , Usually the title will be centered on the table , It can also be CSS Stylization , therefore , It can also appear anywhere relative to the table , When in  table  It's the outside  figure  The only child element of the element , Should be preferred  figcaption, The example is the same as above .

<tbody> Block-level elements


  • <tbody> Element table body ( Text ), This element is used to combine HTML The main content of the form ,tbody The element should be related to thead and tfoot Elements are used together , Used to specify parts of a form ( The main body 、 Header 、 The footer ),thead The element is used for HTML The contents of the table header are grouped , and tfoot The element is used for HTML Notes in the table ( The footer ) Group content , If you use theadtfoot as well as tbody Elements , You have to use all the elements . The order in which they appear is :theadtfoottbody, So the browser can render the footers before it receives all the data . You must be in table These tags are used inside the element , By default, these elements do not affect the layout of the table . however , You can use CSS Make these elements change the appearance of the table ,<tbody> Element must contain one or more <tr> label , Example :
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
    </tr>
  </tbody>
</table>
 Copy code 
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
    </tr>
  </tbody>
</table>
 Copy code 

<thead> Block-level elements


  • <thead> The element defines the header of the table , This element is used to combine HTML Table header content ,<thead> Labels must be used in the following situations : As <table> Child element of element , Appear in the <caption><colgroup> After element ,<tbody><tfoot> and <tr> Before element ,<thead> Element must contain one or more <tr> label , You can use CSS To define styles for these elements , This changes the appearance of the table , The example is the same as above .

<tfoot> Block-level elements


  • <tfoot> Element defines the footer of the table ( Footnotes or table notes ), This label is used to combine HTML Notes in the table ,<tfoot> Element must contain one or more <tr> label , have access to CSS To define styles for these elements , This changes the appearance of the table , The example is the same as above .

<col> Block-level elements


  • <col> Element defines attribute values for one or more columns in a table , To apply styles to all columns ,<col> Labels are useful , This eliminates the need to repeatedly apply styles to individual cells and rows ,<col> The tag has no end tag , You can only be in table or colgroup Use... In elements <col> label , Allow this element to be used CSS Make style column , But only a few properties will affect the column , Examples are the same <table>.

<colgroup> Block-level elements


  • <colgroup> Element is used to combine columns in a table , To format it , To apply styles to all columns ,<colgroup> Labels are useful , This eliminates the need to repeatedly apply styles to individual cells and rows ,<colgroup> The label can only be in table Use... In elements , Please for <colgroup> add class attribute . So you can use it CSS To be responsible for alignment 、 Width and color, etc , If you want to <colgroup> A column in defines different properties , Please be there. <colgroup> Use in label <col>, Examples are the same <table>.

<tr> Block-level elements


  • <tr> Element definition HTML Rows in the table ,tr Element contains one or more th or td Elements , Examples are the same <table>.

<td> Block-level elements


  • <td> Element definition HTML Standard cells in the table ,HTML There are two cell types in a table , Header cell : Contains header information ( from <th>  Element creation ) Standard cells : Include data ( from <td> Element creation ),<th> The text in the element is usually rendered bold and centered ,<td> The text in the element is usually normal left aligned text , If you need to span content across multiple rows or columns , Please use colspan and rowspan attribute , Examples are the same <table>.

<th> Block-level elements


  • <th> Element definition HTML Header cells in the table ,th  Of  scope  Property indicates the data range corresponding to the title , Examples are the same <table>.

Reference material :

ps: Not comprehensive , So it's better to eat with links , If there is something wrong or not rigorous , Please be sure to correct , Thank you very much. .

copyright notice
author[sevenz],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291854538318.html

Random recommended