The directory structure

  • HTML tutorial
  • Introduction of HTML
  • HTML editor
  • HTML based
  • The HTML element
  • HTML attributes
  • The HTML title
  • HTML paragraphs
  • HTML Text formatting
  • HTML links
  • HTML head
  • HTML CSS
  • HTML images
  • HTML table
  • HTML list
  • HTML block-level elements
  • HTML layout
  • The HTML form
  • HTML iframe
  • HTML color
  • HTML color value
  • HTML color names
  • HTML script
  • HTML character entity
  • HTML URL
  • HTML quick search list
  • HTML summary
  • HTML XHTML
  • HTML multimedia
  • HTML plugin
  • HTML Audio
  • HTML video (Videos)

 

  • HTML tutorial

HyperText Markup Language (HTML) is a standard Markup Language for creating web pages.

You can build your own WEB site using HTML, which runs on the browser and is parsed by the browser.

In this tutorial, you will learn how to create a site using HTML.

HTML is easy to learn! I believe you can learn it quickly!

This tutorial contains hundreds of HTML examples.

Using the editor of this site, you can easily modify THE HTML online and see the results of the instance run.

<! DOCTYPEhtml>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sun Called beast's blog</title>
    </head>
    <body>
        <h1>My first headline</h1>
        <p>My first paragraph.</p>
    </body>
</html>
Copy the code

The suffix of an HTML document

.html

.htm

Will do.

 

  • Introduction of HTML

Example:

<! doctypehtml>
<html>
<header>
<meta charset="utf-8">
<title>Sun Called beast's blog</title>
</header>
<body>
<h1>That's my title</h1>
<p>This is my paragraph</p>
</body>
</html>
Copy the code

Instance analysis

  • is declared as an HTML5 document
  • The < HTML > element is the root element of an HTML page
  • The element contains meta data for the document. For example,
    defines the web page encoding format as UTF-8.
  • The element describes the title of the document
  • The element contains the visible page content
  • The

    element defines a header

  • The

    element defines a paragraph

What is HTML?

HTML is a language used to describe web pages.

  • HTML stands for HyperText Markup Language
  • HTML is not a programming language, but a markup language
  • A markup language is a set of markup tags.
  • HTML uses tag tags to describe web pages
  • HTML documents contain HTML tags and text content
  • HTML documents are also called Web pages
  • HTML tags
  • HTML Tags Tags are often referred to as HTML

The label

  • HTML tags are keywords surrounded by Angle brackets, such as < HTML >
  • HTML tags usually come in pairs, such as and
  • The first tag in a tag pair is the start tag and the second tag is the end tag
  • Start and end tags are also known as open and close tags
< tag > Content </ tag >Copy the code

 

The HTML element

“HTML tag” and “HTML element” are often used to describe the same thing.

But strictly speaking, an HTML element contains a start tag and a close tag, as in the following example:

The HTML element:

<p>This is a paragraph</p>
Copy the code

The web browser

Web browsers (such as Google Chrome, Internet Explorer, Firefox, Safari) are used to read HTML files and display them as Web pages.

Browsers don’t display HTML tags directly, but they use tags to decide how to present the content of an HTML page to the user. Right

HTML Page structure

<html>
    <head>
        <title>The page title</title>
    </head>
    <body>
        <h1>This is a headline</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>
Copy the code

HTML version:

<! DOCTYPE > declaration

<! The DOCTYPE> declaration helps render the page correctly in the browser.

There are many different files on the web, and if you can declare the HTML version correctly, the browser will display the web content correctly.

Doctype declarations are case insensitive in either of the following ways:

<! DOCTYPEhtml> 
<! DOCTYPEHTML> 
<! doctypehtml> 
<! DoctypeHtml>
Copy the code

html5

<! DOCTYPEhtml>
Copy the code

html4

<! DOCTYPEHTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Copy the code

xhtml1.0

<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Transitional / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy the code

Chinese code

In most browsers, Chinese characters will be garbled, so we need to declare the character utF-8 in the header.

<! DOCTYPEhtml>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sun Called beast's blog</title>
    </head>
    <body>
        <h1>My first headline</h1>
        <p>My first paragraph.</p>
    </body>
</html>
Copy the code

  • HTML editor

Several commonly used editors are recommended

  • Notepad++
  • Sublime Text
  • VS Code

Improve coding speed with Emmet plugin

  • Emmet’s official website

 

  • HTML based

The HTML title

HTML headings (Heading) are defined by < H1 > – < H6 > tags.

<h1>This is a level one title</h1>
<h2>This is a secondary heading</h2>
<h3>This is a level 3 headline</h3>
<h4>This is a level 4 title</h4>
<h5>This is a level five headline</h5>
<h6>This is a six-level headline</h6>
Copy the code

HTML paragraphs

HTML paragraphs are defined by the tag <p>.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Copy the code

HTML links

HTML links are defined by the tag <a>.

<a href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102">Here's a link to Sun's Sina Weibo account</a>
Copy the code

HTML images

HTML images are defined by the IMG tag.

<img src="html/logo.png" width="500px" height="100px"/>
Copy the code

  • The HTML element

The HTML element

HTML element syntax

  • HTML elements start with a start tag
  • An HTML element terminates with a closing tag
  • The content of the element is between the start tag and the end tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag (end at the end of the start tag)
  • Most HTML elements can have attributes

Nested HTML elements

HTML documents consist of nested HTML elements.

Example :(contains three elements)

<! DOCTYPEhtml>
<html>
<body>
<p>This is the first paragraph.</p>
</body>
</html>
Copy the code

Don’t forget the closing tag

HTML empty elements

HTML elements that have no content are called empty elements. The empty element is closed in the start tag.

<br> is an empty element with no closing tag (<br> tags define newlines).

In XHTML, XML, and future versions of HTML, all elements must be closed.

Adding a slash to the start tag, such as <br />, is the correct way to close an empty element, and is accepted by HTML, XHTML, and XML.

Even though <br> works in all browsers, using < BR /> is actually a longer term guarantee.

 

HTML tip: Use lowercase tags

HTML tags are case insensitive: <P> equals <P>. Many web sites use uppercase HTML tags.

Sun used lower-case tags because the World Wide Web Consortium (W3C) recommended the use of lower-case tags in HTML 4, and it will be mandatory in future (X)HTML versions.

 

  • HTML attributes

Attributes are additional information provided by HTML elements.

HTML attributes

  • HTML elements can set attributes
  • Attribute can add additional information to an element
  • Attributes are generally described in the start tag
  • Attributes are always in the form of name/value pairs, such as name= “value”.

HTML links are defined by tags. The address of the link is specified in the href attribute:

<a href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102">This is a hyperlink to Sun's Sina Weibo account</a>
Copy the code

HTML attribute values often refer to attribute values

Attribute values should always be enclosed in quotes.

Double quotes are the most common, but single quotes are fine.

Tip: In some rare cases, such as when the attribute value itself contains double quotes, you must use single quotes, for example: name= ‘BE’ BAGAN ‘son’

 

HTML tip: Use lowercase attributes

Properties and property values are case insensitive.

However, the World Wide Web Consortium recommends lower-case attributes/attribute values in its HTML 4 recommendations.

The new version of (X)HTML requires lower-case attributes.

 

HTML Attributes: Manual of standards (Specific attributes reference document, here are a few commonly used)

 

  • The HTML title

The Heading (Heading) is defined by the < H1 > – < H6 > tag.

<h1> defines the largest heading. <h6> defines the smallest title.

<h1>This is a level one title.</h1>
<h2>This is a secondary heading.</h2>
<h3>This is a level 3 headline.</h3>
<h1>This is a level 4 title.</h1>
<h2>This is a level five headline.</h2>
<h3>This is a six-level headline.</h3>
Copy the code

Note: Browsers automatically add blank lines before and after headings.

The title is important

Be sure to use HTML title tags for headings only. Do not use headings just to generate bold or large text.

Search engines use titles to index the structure and content of your web pages.

Because the title allows users to quickly navigate your web page, it is important to use the title to present the document structure.

H1 should be the main heading (most important), followed by H2 (less important), h3, and so on.

 

HTML is horizontal

The <hr> tag creates a horizontal line in the HTML page.

The HR element can be used to separate content.

<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
Copy the code

HTML comments

You can insert comments into YOUR HTML code to improve readability and make your code easier to understand. The browser ignores comments and does not display them.

Notes are written as follows:

<! This is a comment -->
Copy the code

Comments: An exclamation mark is required after the opening parenthesis (left parenthesis) and not before the closing parenthesis (right parenthesis). Using comments properly can help in future code editing.

 

How does HTML view source code?

Have you ever looked at some web page and wondered how it was done?

If you want to find out, just right-click and select “View source files” (IE) or “View page source” (Firefox). Other browsers do the same. Doing so opens a window containing the HTML code for the page.

 

HTML tag Reference manual

  • HTML paragraphs

HTML can split a document into paragraphs, which are defined by <p> tags.

<p> This is one paragraph </p> <p> this is another paragraph </p>Copy the code

Note: Browsers automatically add blank lines before and after paragraphs. (

is a block-level element)

 

Don’t forget the closing tag

Even if you forget to use the closing tag, most browsers will display the HTML correctly:

<p> This is one paragraph <p> this is another paragraphCopy the code

The example above works in most browsers, but don’t rely on it. Forgetting to use closing tags can lead to unexpected results and errors.

Note: Omitted closing tags are not allowed in future HTML versions.

 

HTML line

If you want to wrap a line (newline) without producing a new paragraph, use the <br> tag:

<p>this<br>The paragraph<br>Demonstrates the effect of the branch</p>
Copy the code

The BR element is an empty HTML element. Since closing the tag doesn’t make any sense, it doesn’t end the tag.

 

HTML output reminder

We can’t be sure exactly how the HTML will be displayed. The size of the screen, as well as adjustments to the window, can lead to different results.

With HTML, you can’t change the output by adding extra Spaces or line breaks to the HTML code.

When the page is displayed, the browser removes extra Spaces and empty lines from the source code. All consecutive Spaces or empty lines count as one space. Note that all consecutive empty lines (newlines) in the HTML code are also displayed as a space.

 

HTML Reference Manual

 

 

  • HTML Text formatting

<b>Bold text</b><br/>
<i>Italic text</i><br/>
<code>Automatic computer output</code><br/>
<sub>The subscript</sub> 
<sup>superscript</sup>
Copy the code

HTML formatting tag

HTML Computer output tag

HTML citation, citation, tag definition

 

  • HTML links

HTML uses hyperlinks to connect to another document on the network. Links can be found in almost all web pages. Click on the link to jump from one page to another.

 

HTML uses tags to set hypertext links.

A hyperlink can be a word, a word, or a group of words, or an image that you can click on to jump to a new document or to a part of the current document.

When you move your mouse pointer over a link in a web page, the arrow turns into a small hand.

The href attribute is used in the tag to describe the address of the link.

By default, links will appear in the browser as follows:

  • An unused link appears in blue with an underscore.
  • Visited links appear purple and underlined.
  • When a link is clicked, it appears red and underlined.

Note: If you set CSS styles for these hyperlinks, the presentation styles will be displayed according to the CSS Settings.

<a href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102">Visit Sun's Sina Weibo</a>
Copy the code

The href attribute describes the target of the link.

Tip: “linked text” doesn’t have to be text. Images or other HTML elements can be links.

 

HTML link — Target attribute

<a  href="https://weibo.com/BensonSunSML/home?wvr=5&sudaref=www.baidu.com&display=0&retcode=6102"  
    target="_blank">Sun's Sina Weibo</a>
Copy the code

_blank is opened in a new browser page, and there are other attributes, as mentioned in the previous document. If you are interested, you can find the four attributes of the post I wrote in the past: parent window, top open, and new browser page.

 

HTML link – ID attribute

The ID attribute can be used to create a bookmark tag in an HTML document.

Tip: Bookmarks are not displayed in any special way, not in HTML documents, so they are hidden from the reader.

Insert ID into HTML document:

<a id="tips">Helpful tips section</a>
Copy the code

Create a link to the “Helpful Tips section (id=” tips “) “in your HTML document:

<a href="#tips">Access the helpful tips section</a>
Copy the code

Alternatively, create a link from another page to the “Helpful Tips section (id=” tips “) “:

<a href="https://www.axihe.com/#tips"> Access useful tips section </a>Copy the code

HTML link tag

  • HTML head

The <head> element contains all the header tag elements. In the <head> element you can insert scripts, style files, and various meta information.

The element tags that can be added to the header area are: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>

 

The title element in HTML

The <title> tag defines the titles of different documents.

<title> is required in HTML/XHTML documents.

The < title > element:

* Defines the title of the browser toolbar * the title that appears in the favorites when a page is added to the favorites * the title that appears in the search engine results pageCopy the code

A simple HTML document:

The instance

<! DOCTYPEhtml>
<html>
<head> 
<meta charset="utf-8"> 
<title>Document title</title>
</head>
 
<body>Document contents......</body>
 
</html>
Copy the code

 

The base element in HTML

The <base> tag describes the basic link address/link target and acts as the default link for all link tags in HTML documents:

<head>
<base href="https://weibo.com/5799376447/profile?topnav=1&wvr=6&is_all=1" target="_blank"/ >
</head>
Copy the code

 

  • HTML CSS

Cascading Style Sheets (CSS) to Style HTML element tags.

 

CSS was introduced in HTML 4 to render HTML elements better.

CSS can be added to HTML in the following ways:

  • Inline styles – Use the “style” attribute in HTML elements
  • Internal style sheets – Use a
  • External references – Use external CSS files

The best way to do this is through external references to CSS files.

 

Inline styles are used when specific styles need to be applied to individual elements. The way to use inline styles is to use style attributes in the associated tags. The style property can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.

<p style="color:blue; margin-left:10px;">This is a paragraph</p>
Copy the code

The background-color attribute defines the background color of an element:

<body style="background: yellow;">
<h1 style="background: aliceblue;">This is a headline</h1>
<p style="background: aquamarine;">This is a paragraph</p>
</body>
Copy the code

The early background color attribute (background-color) is defined using the BGColor attribute.

 

We can use the font-family, color, and font-size properties to define the font style:

<h1 style="font-family: Andalus;">This is a headline</h1>
<p style="font-family: Andalus; font-size: 20px; color: aqua;">This is a paragraph</p>
Copy the code

Instead of using the <font> tag, it is now common to use the font-family, color, and font-size attributes to define text styles.

 

Use the text-align attribute to specify the horizontal and vertical alignment of text:

<h1 style="text-align: center;">This is a horizontally centered heading</h1>
<p style="text-align: left;">This is a paragraph left aligned</p>
Copy the code

The text-align attribute text-align replaces the old tag <center>.

Internal style sheets:

Internal style sheets can be used when individual files require special styles. You can define an internal style sheet in the <head> section with the <style> tag:

<header>
    <style type="text/css">
        body{background-color: aqua; }p{background-color: red; }</style>

</header>
Copy the code
<header>
    <link rel="stylesheet" type="text/css" href="mysheet.css;">
</header>
Copy the code

External style sheets:

External stylesheets are ideal when styles need to be applied to many pages. With external stylesheets, you can change the look of an entire site by changing a single file. Above:

 

Style tags:

 

 

 

  • HTML images

In HTML, images are defined by tags.

<img> is an empty tag, meaning that it contains only attributes and has no closing tag.

To display images on a page, you need to use the source attribute (SRC). The SRC refers to the “source”. The value of the source property is the URL address of the image.

Grammar:

<img src="url" alt="s_text">
Copy the code

The URL refers to the location where the image is stored. If an image named “Alipay -redpack.png” is in the images directory at www.erawork.cn, its URL is erawork.cn/images/alipay-redpack.png.

The browser displays the image in the document where the image label appears. If you place the image tag between two paragraphs, the browser will display the first paragraph first, then the image, and finally the second paragraph.

 

The Alt attribute is used to define a string of prepared, replaceable text for the image.

The value of the replacement text attribute is user-defined.

<img src="right.png" alt="I am Sun Call Beast.">
Copy the code

When the browser cannot load the image, the replacement text attribute tells the reader what information they have lost. At this point, the browser will display the alternative text instead of the image. It’s a good habit to add alternate text attributes to all images on a page, which helps to display information better, and is very useful for those who use plain text browsers.

 

The height and width properties are used to set the height and width of the image.

Property values default in pixels:

<img src="right.png" alt="I am Sun Call Beast." width="400px;" height="500px;">
Copy the code

 

Tip: It’s a good habit to specify the height and width of the image. If the image has a height width specified, the page loads with the specified size. If you do not specify the size of the image, you may break the overall layout of the HTML page when loading it.

 

Matters needing attention:

Note: If an HTML file contains ten images, 11 files need to be loaded in order to display the page correctly. Loading images takes time, so our advice is: be careful with images.

Note: When loading the page, pay attention to the path of inserting the page image. If the image location is not set correctly, the browser will not be able to load the image and the image TAB will show a broken image.

Image label:

 

  • HTML table

Tables are defined by the <table> tag. Each table has several rows (defined by the < TR > tag), and each row is divided into several cells (defined by the < TD > tag). The letter TD refers to table data, that is, the contents of data cells. Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and so on.

 

Table example:

<html>
<header>
    <meta charset="UTF-8">
<title>Sun call beast test form</title>
</header>
<body>
<table border="1">
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
</table>
</body>

</html>
Copy the code

Browser effect:

 

If you do not define a border attribute, the table will not display a border. Sometimes this is useful, but most of the time, we want to show borders.

Use the border property to display a table with a border

<table border="1">
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
</table>
Copy the code

 

Table header:

The table header of the table is defined using the <th> tag.

Most browsers display the header as bold centered text:

<html>
<header>
    <meta charset="UTF-8">
<title>Sun call beast test form</title>
</header>
<body>
<table border="1">
    <tr>
        <th>1 meter</th>
        <th>2 meter</th>
    </tr>
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
    <tr>
        <td>I am Sun Qiaoshou</td>
        <td>This is Sun's blog</td>
    </tr>
</table>
</body>

</html>
Copy the code

Browser effect:

HTML table tags:

  • HTML list

HTML supports ordered, unordered, and custom lists:

 

Ordered list:

An ordered list is a list of items marked with numbers. Ordered lists start with the < OL > tag. Each list item begins with a <li> tag.

List items are marked with numbers

<ol>
   <li>baidu</li>
    <li>Google</li>
    <li>netease</li>
</ol>
Copy the code

Browser effect:

Unordered list:

An unordered list is a list of items marked with bold dots (typically small black circles).

Unordered lists use the <ul> tag

<ul>
   <li>baidu</li>
    <li>Google</li>
    <li>netease</li>
</ul>
Copy the code

Browser effect:

Custom list:

A custom list is not just a list of items, but a combination of items and their annotations.

Custom lists start with a < DL > tag. Each custom list item starts with <dt>. The definition of each custom list item begins with < DD >.

<dl>
    <dt>baidu</dt>
    <dd>- Chinese search engine</dd>
    <dt>Google</dt>
    <dd>- Global search engine</dd>
    <dt>netease</dt>
    <dd>- Well-known Internet companies</dd>

</dl>
Copy the code

Browser effect:

 

Tip: You can use paragraphs, newlines, images, links, and other lists inside list items.

 

HTML list tag:

 

  • HTML block-level elements

HTML can combine elements with <div> and <span>.

 

Most HTML elements are defined as block-level or inline elements.

Block-level elements typically start (and end) with a new line when displayed in a browser.

Example: <h1>, <p>, <ul>, <table>

 

HTML div elements

Most HTML elements are defined as block-level or inline elements.

Block-level elements typically start (and end) with a new line when displayed in a browser.

Example: <h1>, <p>, <ul>, <table>

 

HTML – span element

The HTML <span> element is an inline element that can be used as a container for text

The <span> element also has no specific meaning.

When used with CSS, the <span> element can be used to set style attributes for portions of text.

 

HTML group tags:

 

 

  • HTML layout

Page layout is very important to improve the look of your website.

Please design your web layout carefully

 

Most sites arrange content in multiple columns (like magazines or newspapers).

Most websites can use the <div> or <table> element to create multiple columns. CSS is used to position elements, or to create backgrounds and colorful looks for pages.

 

Tip: Although we can use the HTML table tag to create beautiful layouts, the table tag is not recommended as a layout tool – tables are not layout tools.

 

The < div > element

Div elements are block-level elements used to group HTML elements.

<! doctypehtml>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sun Called beast's blog</title>
</head>
<body>
<h1 style="background-color: beige; margin-bottom: 0;">Sun Called beast's website</h1>
<div id="container" style="width: 1800px; background-color: bisque;" >
<div id="menu" style="background-color: bisque; width: 100px; float: left; font-size: 15px;" >
    <b>The menu</b><br>
    html<br>
    css<br>
    javascript<br>
</div>
<div id="content" style="width: 1700px; background-color: aqua; height: 200px; float: left; font-size: 20px;">This is the content part</div>
<div id="footer" style="font-size: 16px; background-color: yellow; height: 20px; clear: both; text-align: center;">Copyright @ @ Sun's blog</div>
</div>
</body>
</html>
Copy the code

The effect is as follows:

 

HTML layout – Use tables

Using HTML <table> tags is an easy way to create a layout.

Most sites can create multiple columns using <div> or <table> elements. CSS is used to position elements, or to create backgrounds and colorful looks for pages.

Even though HTML tables can be used to create beautiful layouts, tables are designed to present tabular data – tables are not layout tools!

<! doctypehtml>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sun Called beast's website</title>
</head>
<body>
<table style="width: 1800px;" border="0;">
    <tr>
        <td colspan="2" style="background-color: yellow;"><h1>Sun Called beast's website</h1></td>
    </tr>
    <tr>
        <td style="background-color: beige; font-size: 16px; width: 100px; height: 200px;"><b>The menu</b><br>
        html<br>
        css<br>
        javascript<br>
        </td>
        <td style="width: 1700px; height: 200px; background-color: bisque; font-size: 20px;">content</td>
    </tr>
    <tr>
        <td colspan="2" style="font-size: 12px; background-color: aliceblue; text-align: center;">Copyright @ @ Sun's blog</td>
    </tr>

</table>
</body>
</html>
Copy the code

Browser effect:

One of the biggest benefits of using CSS is that your site is much easier to maintain if you store your CSS code in an external style sheet. By editing a single file, you can change the layout of all the pages

Since creating advanced layouts is time consuming, using templates is a quick option. There are many free site templates available through search engines (you can use these pre-built site layouts and optimize them).

 

HTML layout tags:

 

 

  • The HTML form

HTML forms are used to collect different types of user input.

 

A form is an area that contains form elements.

Form elements allow the user to enter content in the form, such as text fields, drop-down lists, radio-buttons, checkboxes, and so on.

Forms are set using the form tag <form> :

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">  
    <title>Sun Call beast test form</title>
</head>
<body>
<form>
    <input>I am me, is the sky is not the same fireworks!</form>
</body>
</html>
Copy the code

HTML form – Input element

The form tag used in most cases is the input tag (<input>).

The input type is defined by the type attribute (type). Most commonly used input types are as follows:

 

Text Fields

The text field is set with the <input type= “text” > tag, and is used when the user wants to type letters, numbers, and so on into the form.

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Call beast test form</title>
</head>
<body>
<form>Name:<input type="text;" name="name;"><br>Telephone:<input type="text" name="phone">
</form>
</body>
</html>
Copy the code

Browser display:

Note: The form itself is not visible. Also, in most browsers, the default width of the text field is 20 characters.

 

Password field:

The password field is defined by the tag <input type= “password” > :

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Call beast test form</title>
</head>
<body>
<form>Name:<input type="text;" name="name;"><br>Telephone:<input type="text" name="phone"><br>User name:<input type="text" name="username" ><br>Password:<input type="password" name="pwd">
</form>
</body>
</html>
Copy the code

The browser displays the following information:

Note: Password field characters are not displayed in clear text and are replaced with asterisks or dots.

 

Radio Buttons

The <input type= “radio” > tag defines the form menu options

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Call beast test form</title>
</head>
<body>
<form>
   <input type="radio" name="sex" value="male">The boy<input type="radio" name="sex" value="female">The girl</form>
</body>
</html>
Copy the code

Browser effect:

Radio Buttons

<input type= “checkbox” > defines checkboxes. The user needs to select one or more options from a number of given options.

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Call beast test form</title>
</head>
<body>
<form>
   <input type="checkbox" name="vehicle" value="bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="car">I have a car
</form>
</body>
</html>
Copy the code

 

Browser effect:

Submit Button

<input type= “submit” > defines the submit button.

When the user clicks ok, the contents of the form are sent to another file. The action property of the form defines the file name of the destination file. The file defined by the action property typically handles the input data received. :

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Call beast test form</title>
</head>
<body>
<form name="input" action="https://www.baidu.com" method="post">User name:<input type="text" name="user"><br>Password:<input type="password" name="pwd" value="6">
    <input type="submit" value="submit">
</form>
</body>
</html>
Copy the code

Browser display effect:

HTML form tags:

 

 

 

  • HTML iframe

 

By using frames, you can display more than one page in the same browser window.

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Call beast test form</title>
</head>
<body>
<iframe src="https://mp.csdn.net/console/editor/html/106352226" height="500px;" width="800px;">

</iframe>
</body>
</html>
Copy the code

The demo is as follows:

The iframe grammar:

The URL points to a different web page.

 

Iframe sets the height and width:

The height and width attributes define the height and width of the iframe tag.

Properties are in pixels by default, but you can specify that they are displayed to scale (e.g., “80%”).

<iframe src="https://mp.csdn.net/console/editor/html/106352226" height="500px;" width="800px;">

</iframe>
Copy the code

Iframe removes border:

The frameborder property is used to define whether an iframe represents a border.

Set the property value to 0 to remove the border of the iframe:

<iframe src="https://mp.csdn.net/console/editor/html/106352226" frameborder="0">
Copy the code

Use iframe to display the target link page:

Iframe can display the page of a target link

The target link attributes must use iframe attributes, as shown in the following example:

<iframe src="https://mp.csdn.net/console/editor/html/106352226" name="erawork"></iframe>
<p><a href="http://erawork.cn" target="erawork">Sun Called beast's blog</a></p>
Copy the code

Browser effect:

HTML IFrame tag:

 

 

  • HTML color

HTML colors are a mix of red, green, and blue.

 

Color:

HTML colors are defined by a hexadecimal symbol that consists of red, green, and blue values (RGB).

The minimum value for each color is 0 (hex: #00). The maximum value is 255 (hex: #FF).

This table shows the specific effects of a mixture of three colors:

<p style="background-color: #ffff00;">Use hexadecimal to set the color</p>
<p style="Background - color: RGB (255255, 0);">Use RGB to set the color</p>
<p style="background-color: yellow;">Set the background color by color name</p>
Copy the code

Effect:

16 million different colors:

The combination of red, green, and blue ranges from 0 to 255, making 16 million different colors (256 x 256 x 256).

In the color table below you will see different results, ranging from 0 to 255 red, with green and blue values set to 0, and different values displayed in different colors as the red values change.

Grey tone:

The gray to black gradient is shown below

Web Security color?

A few years ago, when most computers supported only 256 colors, a series of 216 Web-safe colors was suggested as a Web standard. The reason for this is that the Microsoft and Mac operating systems use 40 different reserved fixed system colors (about 20 for each).

We’re not sure how much sense this makes these days, as more and more computers are capable of handling millions of colors, but the choice is yours.

Initially, 216 cross-platform Web Safety colors were used to ensure that all computers displayed all colors correctly when using a 256 color palette.

 

 

  • HTML color value

Color consists of red ®, green (G), blue (B).

 

Color value

Color values are represented in hexadecimal notation red, green, and blue (RGB).

Each color has a minimum value of 0(00 in hex) and a maximum value of 255(FF in hex).

Hexadecimal values are written as # followed by three or six hexadecimal characters.

The three-digit representation is: #RGB, and the conversion to six-digit representation is: #RRGGBB.

 

Color example:

 

  • HTML color names

All browsers currently support the following color names.

141 color names are defined in the HTML and CSS color specifications (17 standard colors, plus 124). The following table lists the values for all colors, including hexadecimal values.

Tips: 17 Standard colors: Black, blue, water, fuchsia, gray, green, lime, maroon, Navy, olive, orange, purple, red, white, silver, turquoise, yellow. Click on one of the color names (or a hexadecimal value) to see the background color that matches the different text colors.

 

Sort by color name

Click on a color name or hexadecimal value to see the background color that matches the different text colors.

 

 

  • HTML script

JavaScript makes HTML pages more dynamic and interactive.

 

The <script> tag is used to define client-side scripts, such as JavaScript.

The <script> element can either contain a script statement or point to an external script file via the SRC attribute.

JavaScript is most commonly used for image manipulation, form validation, and dynamic content updates.

The following script prints “Hello World! “:

<script>
    alert("helle world!");
</script>
Copy the code

Browser effect:

 

The HTML < noscript > tag

The < noScript > tag provides an alternative when scripts cannot be used, such as when the browser disables scripts or when the browser does not support client-side scripts.

The <noscript> element can contain all the elements found in the body element of a normal HTML page.

The contents of the <noscript> element are displayed only if the browser does not support scripts or scripts are disabled

<script>
    alert("helle world!");
</script>
<noscript>Sorry, your browser does not yet support this script</noscript>
Copy the code

 

JavaScript experience:

AvaScript can be output directly in HTML:

<script> document.write("<p> This is a paragraph </p>"); </script>Copy the code

Browser effect:

JavaScript event response:

<! Doctypehtml>
<html>
<head>
 <meta charset="UTF-8">
    <title>Sun Calls beast tests javaScript</title>
</head>
<body>
<button type="button" onclick="Myfunction();">Click on the I</button>
<script>
   function Myfunction(){
       alert("Welcome to Beijing!");

   }
</script>


</body>
</html>
Copy the code

Browser effect:

JavaScript handles HTML styles:

document.getElementById("demo").style.color="#ff";
Copy the code

HTML script tags:

 

 

  • HTML character entity

Reserved characters in HTML must be replaced with character entities.

Some characters not found on the keyboard can also be replaced with character entities

 

In HTML, certain characters are reserved.

You can’t use less than (<) and greater than (>) in HTML because browsers mistake them for tags.

If we want to display reserved characters correctly, we must use character entities in our HTML source code. Character entities look like this:

&entity_name; Or & # entity_number;Copy the code

To display a less-than sign, we must write:

&lt; Or & # 60; Or the & # 060;Copy the code

Render effect: < or < or <

Tip: The advantage of using entity names instead of numbers is that they are easier to remember. On the downside, however, browsers may not support all entity names (entity numbers are well supported).

 

Non-breaking Space

A common character entity in HTML is the unbroken space ().

Browsers always truncate Spaces in HTML pages. If you write 10 Spaces in the text, the browser deletes nine of them before displaying the page. To increase the number of Spaces on a page, you need to use character entities. & have spent

 

Combine phonetic symbols

The pronunciation symbol is a glyph added to the letter.

Some diacritics, such as’ sharp ‘and’ ́ ‘.

Diacritics can appear above and below letters, inside letters, or between letters.

Diacritics can be used in combination with alphanumeric and numeric characters.

Here are some examples:

 

 

HTML character entities (entities are case sensitive)

 

 

  • HTML URL

A URL is a web address.

Urls can consist of letters, such as “smlwd.home.blog”, or Internet Protocol (IP) addresses: 192.68.xx.xx. Most people access websites using domain names because names are easier to remember than numbers.

 

A Web browser requests a page from a Web server through a URL.

When you click on a link in an HTML page, the corresponding tag points to an address on the World Wide Web.

A uniform resource Locator (URL) is used to locate documents on the World Wide Web.

An example of a web address syntax rule:

 

scheme://host.domain:port/path/filename
Copy the code

Description:

  • Scheme – Defines the type of Internet service. The most common types are HTTP/HTTPS/FTP /…
  • Host – Domain host (WWW is the default host for HTTP)
  • Domain – Defines Internet domain names, such as axihe.com
  • :port – Defines the port number on the host (the default HTTP port number is 80)
  • Path – Defines the path on the server (if omitted, the document must be at the root of the web site).
  • Filename – Defines the name of the document/resource

 

Common URL schemes

 

Url character encoding:

Urls can only use ASCII character sets.

To send it over the Internet. Because urls often contain characters outside the ASCII set, urls must be converted to a valid ASCII format.

URL encoding replaces non-ASCII characters with a “%” followed by two hexadecimal digits.

The URL cannot contain Spaces. URL encoding usually uses + to replace Spaces.

 

 

Example of URL encoding

Basic HTML document

<! DOCTYPEhtml>
<html>
<head>
<title>Document title</title>
</head>
<body>Visible text...</body>
</html>
Copy the code

Basic Tags

<h1>The biggest title</h1>
<h2>.</h2>
<h3>.</h3>
<h4>.</h4>
<h5>.</h5>
<h6>Minimum title</h6>
 
<p>This is a paragraph.</p>
<br>(wrap)<hr>(Horizontal line)<! -- This is a comment -->
Copy the code

 

Text Formatting

<b>Bold text</b>
<code>Computer code</code>
<em>Emphasis on text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd> 
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
 
<abbr>(abbreviated)<address>(Contact Information)<bdo>(Text direction)<blockquote>(Part referenced from another source)<cite>(Job title)<del>(Deleted text)<ins>(Inserted text)<sub>(subscript text)<sup>(Superscript text)Copy the code

 

Links

Common links:<a href="http://www.example.com/">The link text</a>Image links:<a href="http://www.example.com/"><img src="URL" alt="Alternate text"></a>Email link:<a href="mailto:[email protected]">Send E-mail</a>Bookmarks:<a id="tips">Tip part</a>
<a href="#tips">Skip to tips</a>
Copy the code

Images

<img src="URL" alt="Alternate text" height="42" width="42">
Copy the code

 

Styles/Sections:

<style type="text/css">
h1 {color:red; }p {color:blue; }</style>
<div>Block-level elements in documents</div>
<span>Inline elements in a document</span>
Copy the code

 

Unordered list

<ul>
    <li>project</li>
    <li>project</li>
</ul>
Copy the code

An ordered list

<ol> <li> first item </li> second item </li> </ol>Copy the code

Custom list

<dl>
  <dt>Project 1</dt>
    <dd>Description Item 1</dd>
  <dt>Project 2</dt>
    <dd>Description Item 2</dd>
</dl>
Copy the code

 

Tables

<table border="1">
  <tr>
    <th>The table header</th>
    <th>The table header</th>
  </tr>
  <tr>
    <td>Tabular data</td>
    <td>Tabular data</td>
  </tr>
</table
Copy the code

 

(Iframe)

Forms

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>apple</option>
<option selected="selected">banana</option>
<option>cherry</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 </form>
Copy the code

Entities

&lt;Equal to <&gt;Equivalent to >The & # 169;Equivalent ©Copy the code

 

 

  • HTML summary

This tutorial has taught you how to create a site using HTML.

HTML is a common markup language used on the Web. HTML allows you to format text, add images, create links, enter forms, frames, tables, and more, and save it as a text file that a browser can read and display.

The key to HTML is the tag, which indicates what to expect.

Now that you’ve learned HTML, what’s next?

 

Learning CSS

CSS is used to control the style and layout of multiple web pages simultaneously.

With CSS, all formatting can be separated from HTML and stored in a separate file.

 

Learning JavaScript

JavaScript can make your web pages more lively.

If you just want to show content, static sites are great for presentation, but if you want to interact with your users or make your page more lively, you need to use Javascript.

JavaScript is the most popular scripting language on the Internet and is currently supported by all major browsers.

 

Site server

Hosting your site on your own server is always an option. There are a few things to consider:

1. Hardware expenses

To run a “real” website, you have to buy powerful server hardware. Don’t count on a low-priced PC to do the job. You also need a stable (24 hours a day) high-speed connection.

2. Software spending

Keep in mind that server authorization is generally more expensive than client authorization. Also note that server authorization may have user limits.

3. Labor

Don’t count on low labor costs. You must install your own hardware and software. You deal with both bugs and viruses to ensure that your server runs properly in an “anything can happen” environment at all times.

 

Using an Internet Service Provider (ISP)

Renting a server from an ISP is also common.

Most small businesses host their websites on servers provided by isPs. Its advantages are as follows:

1. Connection speed

Most ISPs have high-speed connections to the Internet.

2. Powerful hardware

An ISP’s Web server is often powerful enough to share resources with several web sites. You should also look at whether the ISP provides efficient load balancing and the necessary backup servers.

Security and reliability

 

Isps are experts in web hosting. They should provide more than 99% of the time online, the latest software patches, and the best virus protection.

 

Considerations when choosing an ISP:

 

24-hour support

Make sure your ISP provides 24-hour support. Don’t put yourself in the awkward position of not being able to solve a serious problem while having to wait for a second workday. A toll-free phone service is also necessary if you do not wish to pay for long distance calls.

 

Daily backup

Make sure your ISP performs a daily backup routine, or you risk losing valuable data.

 

traffic

Research your ISP’s traffic limits. Make sure you don’t pay extra for unexpected spikes in traffic due to your site’s popularity.

 

Bandwidth or content restrictions

Research your ISP’s bandwidth and content restrictions. If you plan to publish pictures or broadcast video or audio, make sure you have this permission.

 

E – mail function

Make sure your ISP supports the E-mail functionality you need.

 

Database access

If you plan to use data from your website’s database, make sure your ISP supports the database access you need.

 

  • HTML XHTML

XHTML is HTML written in XML format.

What is XHTML?

  • XHTML stands for extensible Hypertext Markup Language
  • XHTML is almost identical to HTML4
  • XHTML is the stricter, purer version of HTML
  • XHTML is HTML defined as AN XML application
  • XHTML is a W3C recommendation published by the W3C XHTML Campaign in January 2001
  • XHTML is supported by all major browsers

Why XHTML?

Many pages on the Internet contain “bad” HTML.

If viewed in a browser, the following HTML code works perfectly (even if it doesn’t follow the HTML rules) :

<html>
<head>
<meta charset="utf-8">
<title>This is a noncanonical HTML</title>
<body>
<h1>Non-standard HTML<p>This is a paragraph</body>
Copy the code

 

XML is a well-formed markup language that must be marked up correctly.

There are several different browser technologies in the tech world today. Some of them run on computers, while others may run on mobile phones or other small devices. Small devices often lack the resources and ability to interpret “bad” markup languages.

So – XHTML was developed by combining the strengths of XML and HTML. XHTML is HTML that has been redesigned as XML.

 

The most important differences from HTML:

1. Document structure

The XML namespace attribute in < HTML > is mandatory. < HTML >, <head>, <title>, and <body> are also mandatory

Element syntax

XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be lowercase XHTML documents must have a root element

3. Attribute syntax

XHTML attributes must be in lower case. XHTML attribute values must be quoted. Minimization of XHTML attributes is also prohibited

<! DOCTYPE… > is mandatory

XHTML documents must have an XHTML DOCTYPE declaration.

The < HTML >, <head>, <title>, and <body> elements must also exist, and you must specify an XML namespace for the document using the XMLNS attribute in < HTML >.

The following example shows an XHTML document with the fewest required tags:

<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Transitional / / EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <meta charset="utf-8">
  <title>Document title</title>
</head>
 
<body>The document content</body>
 
</html>
Copy the code

XHTML elements must be properly nested

In HTML, some elements can be unnested, like this:

<b><i>Bold and italic text</b></i>
Copy the code

In XHTML, all elements must be reasonably nested within each other, like this:

<b><i>Bold and italic text</i></b>
Copy the code

XHTML elements must have closing tags

Examples of errors:

<p>This is a paragraph<p>This is another paragraphCopy the code

Correct examples:

<p>This is a paragraph</p>
<p>This is another paragraph</p>
Copy the code

The empty element must contain a close tag

Examples of errors:

<img SRC ="happy.gif" Alt ="happy face">Copy the code

Correct examples:

Branch:<br />Horizontal line:<hr />Image:<img src="happy.gif" alt="Happy face" />
Copy the code

 

XHTML elements must be lowercase

Examples of errors:

<BODY>
<P>This is a paragraph</P>
</BODY>
Copy the code

Correct examples:

<body>
<p>This is a paragraph</p>
</body>
Copy the code

Attribute names must be lowercase

Examples of errors:

<table WIDTH="100%">
Copy the code

Correct examples:

<table width="100%">
Copy the code

 

Attribute values must be quoted

Examples of errors:

<table width=100%>
Copy the code

Correct examples:

<table width="100%">
Copy the code

 

Examples of incorrect property abbreviations not allowed:

<input checked>
<input readonly>
<input disabled>
<option selected>
Copy the code

 

Correct examples:

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
Copy the code

How do I convert HTML to XHTML

  1. Add an XHTML
    into your web page
  2. Add the XMLNS attribute to the HTML element of each page.
  3. Change all elements to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. All attribute values are quoted

 

  • HTML multimedia

Multimedia on the Web refers to sound, music, video, and animation.

Modern Web browsers already support many multimedia formats.

 

What is multimedia?

Multimedia comes in many different formats. It can be anything you hear or see, text, pictures, music, sound effects, recordings, movies, animations, and more.

On the Internet, you will often find multimedia elements embedded in web pages, and modern browsers have support for multiple multimedia formats.

In this tutorial, you will learn about the different multimedia formats and how to use them in your web pages.

 

Browser support

The first Internet browsers supported only text, and even text support was limited to a single font and a single color. Browsers that supported color, font, and text styles followed, and image support was added.

Different browsers handle support for sound, animation, and video in different ways. Some elements can be handled inline, while others require additional plug-ins.

 

 

Multimedia format

Format Multimedia elements, such as video and audio, are stored in media files.

The most common way to determine the media type is to look at the file extension. When the browser gets the file extension.htm or.html, it assumes that the file is an HTML page. The.xml extension indicates XML files, while the.css extension indicates stylesheets. Image formats are identified by.gif or.jpg.

Multimedia elements also have file formats with different extensions, such as.swf,.wmv,.mp3, and.mp4.

 

Video format

MP4 is the Internet’s new video format.

YouTube recommends using MP4.

Flash Players support MP4

HTML5 supports MP4.

Sound format

MP3 is an Audio compression technology, its full name is Moving Picture Experts compression standard Audio Layer 3 (Moving Picture Experts Group Audio Layer III), referred to as MP3. It is designed to dramatically reduce the amount of audio data. If your site is music, you can choose mp3 format.

 

HTML5’s latest standard supports MP3, WAV, and Ogg audio formats.

 

  • HTML plugin

The function of the plug-in is to extend the functionality of the HTML browser.

 

Helper applications are programs that can be launched by a browser. Ancillary applications are also called plug-ins.

Assistive programs can be used to play audio and video (among other things). Helper programs are loaded using tags.

One advantage of using assistive programs to play video and audio is that you can allow the user to control some or all of the playback Settings.

Plug-ins can be added to a page by tag or tag.

Most assistive applications allow manual (or programmatic) control of volume Settings and playback functions such as back, pause, stop, and play.

 

We can use the <video> and <audio> tags to display video and audio

 

The < object > element

All major browsers support the <object> tag.

The <object> element defines an object to be embedded in an HTML document.

This tag is used to insert objects (such as embedding Java applets in web pages, PDF readers, Flash players).

The <object> element can also be used to contain HTML files

Or insert a picture:

<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>
Copy the code

The < embed > element

All major browsers support the <embed> element.

The < Embed > element represents an HTML Embed object.

The <embed> element has been around for a long time, but was not specified before HTML5. This element is validated on HTML5 pages, not HTML 4.

The <embed> element can also be used to include HTML files:

Or insert a picture:

Note: The element has no closing tag. Alternate text cannot be used.

<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="snippet.html">
<embed src="audi.jpeg">
Copy the code

 

  • HTML Audio

Sounds can be played in different ways in HTML.

 

Playing audio in HTML is not easy!

You need to master a number of techniques to ensure that your audio files play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

 

Using plug-ins:

A browser plug-in is a small computer program that extends the standard functions of the browser.

Plug-ins can be added to a page using tags or tags.

These tags define containers for resources (usually non-HTML resources) that are displayed either by the browser or by external plug-ins, depending on their type.

 

Tags define containers for external (non-HTML) content. (This is an HTML5 tag, illegal in HTML4, but valid in all browsers).

The following code snippet displays an MP3 file embedded in a web page:

<embed height="50" width="100" src="horse.mp3">
Copy the code

Question:

  • Tags are not valid in HTML 4. The page cannot be verified by HTML 4.
  • Different browsers have different support for audio formats.
  • If the browser does not support the file format, the audio cannot be played without the plug-in.
  • If the user’s computer does not have a plug-in installed, audio cannot be played.
  • If you convert this file to another format, it still won’t play in all browsers.

 

 

Use the <object> element

Tags can also define containers for external (non-HTML) content.

The following code snippet displays an MP3 file embedded in a web page:

<object height="50" width="100" data="horse.mp3"></object>
Copy the code

Question:

  • Different browsers have different support for audio formats.
  • If the browser does not support the file format, the audio cannot be played without the plug-in.
  • If the user’s computer does not have a plug-in installed, audio cannot be played.
  • If you convert this file to another format, it still won’t play in all browsers.

 

Use HTML5 <audio> elements

HTML5

The element is an HTML5 element that is illegal in HTML 4 but is valid in all browsers.

 

Browser compatibility problems

The number in the box represents the first browser version number that supported the property.

Here’s what we’ll use

Below we will use the <audio> tag to describe MP3 files (valid in Internet Explorer, Chrome, and Safari) and also add an OGG file (valid in Firefox and Opera browsers). If it fails, it displays an error text message:

Example:

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>
Copy the code

Question:

  • Tags are not valid in HTML 4. Your page cannot be verified by HTML 4.
  • You must convert the audio file to a different format.
  • Element does not work in older browsers.

 

Best HTML solution

The following example uses two different audio formats. HTML5 <audio> elements will try to play audio in MP3 or OGG. If this fails, the code falls back on the attempted <embed> element.

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>
Copy the code

Question:

  • You must convert the audio to a different format.
  • The element cannot be rolled back to display an error message.

 

Use hyperlinks:

If a web page contains a hyperlink to a media file, most browsers use a “helper application” to play the file.

The following code snippet shows the link to the MP3 file. If the user clicks on the link, the browser launches a “secondary application” to play the file:

Example:

<a href="horse.mp3">Play the sound</a>
Copy the code

Inline voice description:

When you include sound in a web page, or as part of a web page, it is called inline sound.

If you plan to use inline sounds in your Web applications, you need to realize that many people find inline sounds irritating. Also note that users may have turned off the inline sound option in their browsers.

Our best advice is to include inline sounds only where users expect to hear them. A positive example is when the user wants to hear a recording and clicks on a link, the page opens and the recording plays.

 

HTML Multimedia tag

 

 

  • HTML video (Videos)

There are many ways to play video in HTML.

 

HTML Videos are played

 

Playing video in HTML is not easy!

You need to master a number of techniques to ensure that your video files play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

 

Use the <embed> tag:

Tags are used to embed multimedia elements in AN HTML page.

The following HTML code displays the Flash video embedded in the web page:

<embed src="intro.swf" height="200" width="200">
Copy the code

Question:

  • HTML4 could not recognize the tag. Your page could not be verified.
  • If the browser does not support Flash, the video will not play
  • The iPad and iPhone can’t display Flash video.
  • If you convert the video to another format, it still won’t play in all browsers.

Using the <object> tag:

Tags are used to embed multimedia elements in AN HTML page.

The following HTML snippet shows a Flash video embedded in a web page:

<object data="intro.swf" height="200" width="200"></object>
Copy the code

Question:

  • If the browser does not support Flash, the video cannot be played.
  • The iPad and iPhone can’t display Flash video.
  • If you convert the video to another format, it still won’t play in all browsers.

 

Using HTML5 elements

The HTML5 <video> tag defines a video or movie.

The <video> element is supported in all modern browsers.

The following HTML snippet displays a video embedded in the web page in OGG, MP4, or WebM format:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">Your browser does not support the video TAB.</video>
Copy the code

Question:

  • You have to convert the video to many different formats.
  • Element is not valid in older browsers.

Best HTML solution

Four different video formats are used in the following example. The HTML 5 <video> element attempts to play the video in one of mp4, OGG, or WebM formats. If all fail, fall back to the <embed> element.

 

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>
Copy the code

Question:

You have to convert the video to many different formats

 

Youku solutions

The easiest way to display video in HTML is to use video sites like Youku.

If you want to play the video in the web page, you can upload the video to youku and other video sites, and then insert HTML code into your web page to play the video.

You can find the embedded HTML code in the share portal of every major video site.

 

<embed src='https://player.youku.com/player.php/sid/XMTQ3MjM5Mjc0MA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
Copy the code

 

Use hyperlinks

If a web page contains a hyperlink to a media file, most browsers use a “helper application” to play the file.

The following code snippet shows the link to the AVI file. If the user clicks the link, the browser launches an “auxiliary application”, such as Windows Media Player, to play the AVI file:

<a href="intro.swf">Play a video file</a>
Copy the code

 

Notes on inline video

When a video is included in a web page, it is called inline video.

If you plan to use inline video in your Web application, you need to realize that many people find inline video irritating.

Also note that users may have turned off the inline video option in their browsers.

Our best advice is to include inline videos only where users expect to see them. A positive example is when the user wants to see a video and clicks on a link, the page opens and the video plays.

 

HTML Multimedia tag

 

 

 

 

Here, HTML tutorial demo here, including the mainstream HTML knowledge on the market, I hope you can get quality improvement