HTML tutorial (after reading this is enough)

HTML tutorial (after reading this is enough)

 

Directory Structure

  • HTML tutorial 
  • Introduction to HTML
  • HTML editor
  • HTML basics 
  • HTML elements
  • HTML attributes
  • HTML title
  • HTML paragraph
  • HTML text formatting
  • HTML link
  • HTML head
  • HTML CSS
  • HTML image
  • HTML table
  • HTML list
  • HTML block-level elements
  • HTML layout
  • HTML form
  • HTML iframe
  • HTML colors
  • HTML color value
  • HTML color name
  • HTML script
  • HTML character entities
  • HTML URL
  • HTML cheat sheet
  • HTML summary
  • HTML XHTML
  • HTML multimedia
  • HTML plugin
  • HTML Audio (Audio)
  • HTML Video (Videos)

 

  • HTML tutorial 

Hypertext Markup Language (English: HyperText Markup Language, HTML for short) is a standard markup language used to create web pages.

You can use HTML to build your own WEB site. HTML runs on the browser and is parsed by the browser.

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

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

This tutorial contains hundreds of HTML examples.

Using the editor of this site, you can easily modify the HTML online and view the results of the instance operation.

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

The suffix of the HTML document

.html

.htm

It's all okay.

 

  • Introduction to HTML

Examples:

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

Example analysis

  • <!DOCTYPE html> declared as HTML5 document
  • The <html> element is the root element of the HTML page
  • The <head> element contains the meta data of the document. For example, <meta charset="utf-8"> defines the web page encoding format as utf-8.
  • The <title> element describes the title of the document
  • The <body> element contains the visible page content
  • The <h1> element defines a headline
  • The <p> element defines a paragraph

What is HTML?

HTML is a language used to describe web pages.

  • HTML refers to HyperText Markup Language: HyperText Markup Language
  • HTML is not a programming language, but a markup language
  • Markup language is a set of markup tags
  • HTML uses markup tags to describe web pages
  • HTML documents contain HTML tags and text content
  • HTML documents are also called web pages
  • HTML tags
  • HTML markup tags are often referred to as HTML

label

  • HTML tags are keywords surrounded by angle brackets, such as <html>
  • HTML tags usually appear in pairs, such as <b> and </b>
  • The first tag in the tag pair is the start tag, and the second tag is the end tag
  • Start and end tags are also called open tags and closed tags
<label>content</label> copy code

 

html element

"HTML tags" and "HTML elements" usually have the same meaning.

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

HTML elements:

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

web browser

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

The browser does not directly display HTML tags, but you can use tags to determine how to display the content of the HTML page to the user

html page structure

< html > < head > < title > Page title </title > </head > < body > < h1 > This is a heading </h1 > < p > This is a paragraph. </p > < p > This is another paragraph. </p > </body > </html > Copy code

html version:

<!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps to display the web page correctly in the browser.

There are many different files on the Internet. If the HTML version can be correctly declared, the browser can display the content of the webpage correctly.

The doctype declaration is case-insensitive, and the following methods are acceptable:

<!DOCTYPE html > <!DOCTYPE HTML > <!doctype html > <!Doctype Html > Copy code

html5

<!DOCTYPE html > Copy code

html4

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

xhtml1.0

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

Chinese encoding

At present, in most browsers, Chinese garbled characters will appear when directly outputting Chinese. At this time, we need to declare the characters as UTF-8 in the header.

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

Recommend several commonly used editors

Improve encoding speed plug-in Emmet plug-in

 

  • HTML basics 

html title

HTML Heading is defined by <h1>-<h6> tags.

< h1 > This is the first level heading </h1 > < h2 > This is the second level heading </h2 > < h3 > This is the third level heading </h3 > < h4 > This is the fourth level heading </h4 > < h5 > This is the fifth-level heading </h5 > < h6 > This is the sixth-level heading </h6 > Copy code

html paragraph

HTML paragraphs are defined by the tag <p>.

< p > This is a paragraph. </p > < p > This is another paragraph. </p > copy code

html link

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" > This is a link pointing to the beast called Sun Weibo </A > Copy the code

html image

HTML images are defined by img tags.

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

html element

html element syntax

  • HTML element to start tag start
  • HTML elements are terminated by closing tags
  • The content of the element is the content between the start tag and the end tag
  • Some HTML elements have empty content
  • The empty element is closed in the opening tag (ends with the end of the opening tag)
  • Most HTML elements can have attributes

Nested html elements

HTML documents are composed of nested HTML elements.

Example: (contains three elements)

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

Don't forget the closing tag

html empty element

HTML elements with no content are called empty elements. The empty element is closed in the opening tag.

<br> is an empty element without closing tag (<br> tag defines line break).

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

Adding a slash in the opening tag, such as <br/>, is the correct way to close empty elements. HTML, XHTML, and XML all accept this method.

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

 

html tip: use lowercase tags

HTML tags are not case sensitive: <P> is equivalent to <p>. Many websites use uppercase HTML tags.

Sun called the beast uses lowercase tags, because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and will force lowercase in future (X)HTML versions.

 

  • HTML attributes

Attributes are additional information provided by HTML elements.

html attributes

  • HTML elements can be set attributes
  • Attributes can be added in the element additional information to the
  • The attributes are generally described in opening tag
  • Attributes always appear in the form of name/value pairs, for example: 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 point called the beast Sun Weibo hyperlink </A > Copy Code

html attribute value commonly used reference attribute value

The attribute value should always be enclosed in quotation marks.

Double quotes are the most commonly used, but there is no problem with using single quotes.

Tip:  In some individual cases, for example, the attribute value itself contains double quotes, then you must use single quotes, for example: name='BE BAGAN son'

 

HTML tip: use lowercase attributes

Attributes and attribute values are not case sensitive.

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

The new version of (X)HTML requires lowercase attributes.

 

html attributes: standard manual (reference documents for specific attributes, here are a few commonly used ones)

 

  • HTML title

Heading is defined by <h1>-<h6> tags.

<h1> defines the largest headline. <h6> Define the smallest heading.

< h1 > This is the first level heading. </h1 > < h2 > This is the second level heading. </h2 > < h3 > This is a three-level heading. </h3 > < h1 > This is a four-level heading. </h1 > < h2 > This is a five-level heading. </h2 > < h3 > This is the sixth level heading. </h3 > Copy code

Note: The  browser will automatically add blank lines before and after the title.

Title is important

Make sure to use HTML title tags only for titles. Don t use headings just to generate bold or large text.

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

Because users can quickly browse your web pages by headings, it is important to use headings to present the structure of the document.

You should use h1 as the main heading (the most important), then h2 (the second most important), then h3, and so on.

 

html horizontal line

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 code

html comment

You can insert comments into the HTML code, which can improve its readability and make the code easier to understand. The browser ignores the comments and does not display them.

The comment is written as follows:

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

Note : An exclamation mark is required immediately after the opening parenthesis (the parenthesis on the left), and it is not required before the closing parenthesis (the parenthesis on the right). Reasonable use of comments can help future code editing work.

 

How to view the source code in html?

Have you seen some web pages and marveled at how it is implemented.

If you want to find the mystery, you just need to right-click and select "View Source File" (IE) or "View Page Source Code" (Firefox). Other browsers do the same. Doing so will open a window containing the HTML code of the page.

 

html tag reference manual

  • HTML paragraph

HTML can divide a document into several paragraphs, which are defined by the <p> tag.

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

Note: The browser will automatically add blank lines before and after the paragraph. (</p> 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 a paragraph <p>This is another paragraph Copy code

The above example is fine in most browsers, but don't rely on this approach. Forgetting to use the closing tag can produce unexpected results and errors.

Note:  In future HTML versions, it is not allowed to omit the closing tag.

 

html wrap

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

< P > This < br > paragraph < br > demonstrates the effect of branches </P > copy the code

The br element is an empty HTML element. Since the closing tag has no meaning, it has no closing tag.

 

html output reminder

We are unable to determine the exact effect of the HTML being displayed. The size of the screen and the adjustment of the window may lead to different results.

For HTML, you cannot change the output effect by adding extra spaces or line breaks in the HTML code.

When the page is displayed, the browser will remove extra spaces and blank lines in the source code. All consecutive spaces or blank lines will be counted as one space. It should be noted that all consecutive blank 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 > computer automatically output </code > < br/> < Sub > index </Sub > < sup > superscript </sup > copy code

html formatting tags

html computer output tag

html citations, citations, tag definitions

 

  • HTML link

HTML uses hyperlinks to connect to another document on the web. You can find links on almost all web pages. Click the link to jump from one page to another.

 

HTML uses tags to set up hypertext links.

A hyperlink can be a word, a word, or a group of words, or an image. You can click on these contents to jump to a new document or a certain part of the current document.

When you move the mouse pointer to a link in a web page, the arrow will turn into a small hand.

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

By default, the link will appear in the browser in the following form:

  • An unvisited link is displayed in blue font and underlined.
  • Visited links are shown in purple and underlined.
  • When you click the link, the link is displayed in red and underlined.

Note: If CSS styles are set for these hyperlinks, the display 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 beast called Sina Weibo </A > Copy the code

The href attribute describes the target of the link.

Tip"Link text"  does not have to be text. Pictures or other HTML elements can become 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 called the beast on Sina Weibo </a > copy code

The _blank attribute 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 post I wrote before, the parent window, the top open, the new browser page, etc. 4 attributes.

 

html link--id attribute

The id attribute can be used to create bookmark tags in an HTML document.

prompt:  Bookmarks are not displayed in any special way. They are not displayed in HTML documents, so they are hidden from readers.

Insert ID in HTML document:

< A ID = "Tips" > Helpful Hints portion </A > copy the code

Create a link to "Useful Tips (id="tips")" in the HTML document:

< A the href = "#tips" > access to useful tips part </A > copy the code

Or, create a link from another page to the "useful tips section (id="tips")":

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

html link tag

  • HTML head

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

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

 

title element in html

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

<title> is required in HTML/XHTML documents.

<title> element:

* Defines the title of the browser toolbar * When the webpage is added to the favorites, the title displayed in the favorites * The title displayed on the search engine results page Copy code

A simple HTML document:

Instance

<!DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title > Document title </title > </head > < body > Document content... </body > </html > Copy code

 

base element in html

The <base> tag describes the basic link address/link target. This tag serves as the default link for all link tags in the HTML document:

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

 

  • HTML CSS

CSS (Cascading Style Sheets) is used to render the style of HTML element tags.

 

CSS was used in HTML 4 and was introduced for better rendering of HTML elements.

CSS can be added to HTML in the following ways:

  • Inline style-use the "style" attribute in HTML elements
  • Internal style sheet-use the <style> element to include CSS in the <head> area of the HTML document
  • External references-use external CSS files

The best way is to reference the CSS file externally.

 

When special styles need to be applied to individual elements, inline styles can be used. The way to use inline styles is to use style attributes in related tags. Style attributes can contain any CSS attributes. 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 code

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

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

The early background-color property (background-color) was defined using the bgcolor property.

 

We can use the font-family (font), color (color), and font-size (font size) attributes to define the font style:

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

Now usually use font-family (font), color (color), and font-size (font size) attributes to define the text style, instead of using the <font> tag.

 

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

< H1 of style = "text-align = left: Center;" > This is horizontally centered title </h1 of > < P style = "text-align = left: left;" > This is a paragraph left-aligned </P > copy the code

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

Internal style sheet:

When a single file requires a special style, the internal style sheet can be used. You can define the internal style sheet through the <style> tag in the <head> section:

< header > < style type = "text/css" > body { background-color : aqua;} p { background-color : red;} </style > </header > Copy code
< header > < link rel = "stylesheet" type = "text/css" href = "mysheet.css;" > </header > Copy code

External style sheet:

When the style needs to be applied to many pages, an external style sheet will be the ideal choice. Using an external style sheet, you can change the appearance of the entire site by changing one file. As above:

 

Style tag:

 

 

 

  • HTML image

In HTML, images are defined by tags.

<img> is an empty tag, which means that it only contains attributes and there is no closing tag.

To display an image on the page, you need to use the source attribute (src). src means "source". The value of the source attribute is the URL address of the image.

syntax:

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

URL refers to the location where the image is stored. If the image called "alipay-redpack.png" located www.erawork.cn the images directory, then the URL is  erawork.cn/ images /alipay-redpack.png  .

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

 

The alt attribute is used to define a string of alternative text for the image.

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

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

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

 

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

The default unit of the attribute value is pixel:

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

 

Tip: It is a good habit to specify the height and width of the image. If the image has a specified height and width, the specified size will be retained when the page loads. If the size of the image is not specified, the overall layout of the HTML page may be destroyed when the page is loaded.

 

Precautions:

Note: If an HTML file contains ten images, 11 files need to be loaded in order to display this page correctly. It takes time to load pictures, so our advice is: use pictures with caution.

Note: When loading the page, pay attention to the path of the image inserted on the page. If the location of the image cannot be set correctly, the browser cannot load the image, and the image tag will display a broken image.

Image label:

 

  • HTML table

The table is 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, which is the content of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.

 

Table example:

< html > < header > < meta charset = "UTF-8" > < title > Sun called the beast test form </title > </header > < body > < table border = "1" > < tr > < td > I It s Sun Called Beast </td > < td > This is Sun Called Beast s blog </td > </tr > <tr > <td > I am Sun Called Beast </td > < td > This is Sun Called Beast's blog </td > </tr > < tr > < td > I am Sun Called Beast </td > < td > This is Sun Beast's Blog </td > </tr > </table > </body > </html > Copy code

Browser effect:

 

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

Use the border property to display a table with a border

< table border = "1" > < tr > < td > I am Sun Called Animals </td > < td > This is Sun Called Animals Blog </td > </tr > < tr > < td > I am Sun Calling the Beast </td > < td > This is Sun Calling the Beast's blog </td > </tr > < tr > < td > I am Sun Calling the Beast </td > <td > This is the Sun called the beast blog </td > </TR > </the Table > Copy the code

 

Table header:

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

Most browsers will display the header as bold and centered text:

< html > < header > < meta charset = "UTF-8" > < title > Sun called the beast test form </title > </header > < body > < table border = "1" > < tr > < th > Table Head 1 </th > < th > table head 2 </th > </tr > <tr > < td> I'm Sun Jiao Beast </td > < td > This is Sun Jiao Shou's blog </td > </tr > < tr > < td > I am Sun Jiao Shou </td > < td > This is Sun Jiao Beast s Blog </td > </tr > </table > </body > </html > Copy code

Browser effect:

html table tag:

  • HTML list

HTML supports ordered, unordered and custom lists:

 

Ordered list:

An ordered list is a list of items, and the list items are marked with numbers. The ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

List items are marked with numbers

< ol > < li > Baidu </li > < li > Google </li > < li > NetEase </li > </ol > Copy code

Browser effect:

Unordered list:

An unordered list is a list of items. The items in this column are marked with bold dots (typical small black circles).

Unordered lists use the <ul> tag

< ul > < li > Baidu </li > < li > Google </li > < li > NetEase </li > </ul > Copy code

Browser effect:

Custom list:

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

The custom list starts with the <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item starts 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 company </dd > </dl > Copy code

Browser effect:

 

Tip:  Paragraphs, line breaks, pictures, links, and other lists can be used 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 elements or inline elements.

When block-level elements are displayed in the browser, they usually start (and end) with a new line.

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

 

html-div element

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

When block-level elements are displayed in the browser, they usually start (and end) with a new line.

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

 

html-span element

The HTML <span> element is an inline element and 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 part of the text.

 

html group tag:

 

 

  • HTML layout

Page layout is very important to improve the appearance of the website.

Please carefully design your web page layout

 

Most websites will arrange content into multiple columns (just like magazines or newspapers).

Most websites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create a background and colorful appearance for the page.

 

Tip: Although we can use the HTML table tag to design a beautiful layout, the table tag is not recommended as a layout tool-a table is not a layout tool.

 

<div> element

The div element is a block-level element used to group HTML elements.

<!doctype html > < html > < head > < meta charset = "UTF-8" > < title > Sun called the beast's blog </title > </head > < body > < h1 style = "background-color: beige ; margin-bottom: 0;" > Sun called the beast's website </h1 > < div id = "container" style = "width: 1800px; background-color: bisque;"> < divid = "menu" style = "background-Color: Bisque; width: 100px; a float: left; font-size: 15px;" > < B > Menu </B > < br > HTML < br > CSS < br > JavaScript < br > </div > < div ID = "content" style = "width: 1700px; background-Color: Aqua; height: 200px; a float: left; font-size: 20px;" > this is the content portion </div > < div id = "footer" style = "font-size: 16px;background-color: yellow;height: 20px;clear: both; text-align: center;" > Copyright, @ </div > </div > </body > </html > Copy code

The effect is as follows:

 

html layout-use table

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

Most sites can use <div> or <table> elements to create multiple columns. CSS is used to position elements, or to create a background and colorful appearance for the page.

Even though HTML tables can be used to create beautiful layouts, the purpose of designing tables is to present tabular data-tables are not a layout tool!

<!doctype html > < html > < head > < meta charset = "UTF-8" > < title > Sun called the beast's website </title > </head > < body > < table style = "width: 1800px;" border = "0;" > < tr > < td colspan = "2" style = "background-color: yellow;"> < h1 > Sun Jiaoshou s website </h1 > </td > </tr > < tr > < td style = "background-color: beige;font-size: 16px; width: 100px;height: 200px;" > < b > 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 @ </td > </tr > </table > </body > </html > Copy code

Browser effect:

Tip: The  biggest advantage of using CSS is that if you store the CSS code in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages

Tip:  Since creating advanced layouts is very time consuming, using templates is a quick option. Many free website templates can be found through search engines (you can use these pre-built website layouts and optimize them).

 

html layout tag:

 

 

  • 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 users to enter content in the form, such as: textarea, drop-down list, radio-buttons, checkboxes, and so on.

The form uses the form tag <form> to set:

<!Doctype html > < html > < head > < meta charset = "UTF-8" > < title > Sun called the beast test form </title > </head > < body > < form > < input > I am me, It's a different firework in the sky! </form > </body > </html > Copy 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). The most frequently used input types are as follows:

 

Text Fields

<input type= text >

<!Doctype html> <html> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <form> <input type="text;" name="name;"><br> <input type="text" name="phone"> </form> </body> </html>

20

 

<input type= password >

<!Doctype html> <html> <head> <meta charset="UTF-8"> <title> </title> </head> <body> <form> <input type="text;" name="name;"><br> <input type="text" name="phone"> < Br > User Name: < the INPUT of the type = "text" name = "username" > < br > Password: < the INPUT of the type = "password" name = "pwd" > </form > </body > </HTML > Copy code

The browser display effect is as follows:

Note: The characters in the password field will not be displayed in plain text, but replaced by asterisks or dots.

 

Radio Buttons

The <input type="radio"> tag defines the radio button options of the form

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

Browser effect:

Checkbox (Radio Buttons)

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

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

 

Browser effect:

Submit Button

<input type="submit"> defines the submit button.

When the user clicks the confirmation button, the content of the form will be transferred to another file. The action attribute of the form defines the file name of the destination file. The file defined by the action attribute usually processes the received input data. :

<!Doctype html > < html > < head > < meta charset = "UTF-8" > < title > Sun called the 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 code

Browser display effect:

html form tag:

 

 

 

  • HTML iframe

 

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

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

The demonstration is as follows:

iframe syntax:

The URL points to a different web page.

 

Iframe set height and width:

The height and width attributes are used to define the height and width of the iframe tag.

The attribute is in pixels by default, but you can specify that it is displayed proportionally (eg "80%").

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

Iframe remove border:

The frameborder attribute is used to define whether the iframe indicates whether to display a border.

Set the attribute value to "0" to remove the border of the iframe:

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

Use iframe to display the target link page:

iframe can display a target link page

The attributes of the target link must use the attributes of the iframe, as 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 the beast's blog </a > </p > Copy code

Browser effect:

html iframe tag:

 

 

  • HTML colors

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

 

Color value:

HTML colors are defined by a hexadecimal notation, which is composed of red, green, and blue values (RGB).

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

This table shows the specific effects of the three colors mixed:

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

Effect picture:

16 million different colors:

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

In the color table below you will see different results, red from 0 to 255, and set the value of green and blue to 0 at the same time. As the value of red changes, different values show different colors.

Gray tones:

The following shows the gray to black gradient

Web safe color?

A few years ago, when most computers only supported 256 colors, a series of 216 Web-safe colors were recommended as Web standards. The reason is that Microsoft and Mac operating systems use 40 different reserved fixed system colors (approximately 20 colors are used by each side).

We are not sure how meaningful this is now, because more and more computers are capable of processing millions of colors, but it is up to you to make the choice.

Initially, 216 cross-platform web-safe colors were used to ensure that when computers use a 256-color palette, all computers can display all colors correctly.

 

 

  • HTML color value

The color is composed of red , green (G), and blue (B).

 

Color value

The color value is represented by hexadecimal system for red, green, and blue (RGB).

The lowest value of each color is 0 (hex is 00), and the highest value is 255 (hex is FF).

The hexadecimal value is written as # sign followed by three or six hexadecimal characters.

The three-digit representation is: #RGB, converted to 6-digit representation: #RRGGBB.

 

Color example:

 

  • HTML color name

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 of all colors, including hexadecimal values.

Tip: 17 standard colors: black, blue, water, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, white, silver, blue-green, yellow. Click on one of the color names (or a hexadecimal value) to view the background color matched with different text colors.

 

Sort by color name

Click on a color name or hexadecimal value to view the background color that matches with 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 script statements or point to an external script file through the src attribute.

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

The following script will output "Hello World!" to the browser:

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

Browser effect:

 

HTML<noscript> Tag

The <noscript> tag provides alternative content when scripts cannot be used, such as when scripts are disabled in the browser, or when the browser does not support client-side scripting.

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

The content in the <noscript> element will only be displayed when the browser does not support scripting or scripting is disabled

< Script > ALRT ( "Helle world!" ); </Script > < noscript > Sorry, your browser does not support 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 code

Browser effect:

JavaScript event response:

<!Doctype html > < html > < head > < meta charset = "UTF-8" > < title > Sun called the beast test javaScript </title > </head > < body > < button type = "button" onclick = " Myfunction();" > click me </button > < script > function Myfunction () { alrt( "Beijing welcomes you!" ); } </script > </body > </html > Copy code

Browser effect:

JavaScript handles HTML style:

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

html script tag:

 

 

  • HTML character entities

The reserved characters in HTML must be replaced with character entities.

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

 

In HTML, certain characters are reserved.

You cannot use the less than sign (<) and greater than sign (>) in HTML, because the browser will mistake them for tags.

If we want to display reserved characters correctly, we must use character entities in the HTML source code. The character entity looks like this:

&entity_name; or &#entity_number; Copy code

To display the less than sign, we must write:

< or < or < copy code

Rendering effect: <or <or <

Tip: The advantage of using physical names instead of numbers is that the names are easy to remember. But the disadvantage is that the browser may not support all entity names (the support for entity numbers is good).

 

Non-breaking Space

The common character entity in HTML is non-breaking space ().

The browser always shortens the spaces in the HTML page. If you write 10 spaces in the text, the browser will delete 9 of them before displaying the page. To increase the number of spaces on the page, you need to use character entities.  

 

Combine phonetic symbols

The pronunciation symbol is a "glyph" added to the letter.

Some diacritics, such as acute accent ( ) and grave accent ( ).

The diacritics can appear above and below the letter, or inside the letter, or between two letters.

The diacritics can be used in combination with letters and numbers.

Here are some examples:

 

 

HTML character entities (entities are case sensitive)

 

 

  • HTML URL

URL is a web address.

URL can be composed of letters, such as "smlwd.home.blog", or Internet Protocol (IP) address: 192.68.XX.xx. Most people access the website using the website domain name, because the name is easier to remember than the number.

 

The web browser requests the page from the web server through the URL.

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

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

Syntax rules of a web page address example:

 

scheme://host.domain:port/path/filenameCopy code

Description:

  • scheme-defines the type of Internet service. The most common type is http/https/ftp/...
  • host-defines the domain host (the default host for http is www)
  • domain-defines the Internet domain name, such as axihe.com
  • :port-defines the port number on the host (the default port number for http is 80)
  • path-defines the path on the server (if omitted, the document must be located in the root directory of the website).
  • filename-defines the name of the document/resource

 

Common URL Scheme

 

url character encoding:

URL can only use ASCII character set.

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

URL encoding uses "%" followed by a two-digit hexadecimal number to replace non-ASCII characters.

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

 

 

URL encoding example

HTML basic document

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

Basic Tags

< h1 >The biggest headline </h1 > < h2 > ... </h2 > < h3 > ... </h3 > < h4 > ... </h4 > < h5 > ... </h5 > < h6 > Minimal headline </h6 > < p > This is a paragraph. </P > < br > (line feed) < HR > (horizontal) <! - this is a comment -> copy the code

 

Formatting

< B > bold text </B > < code > computer code </code > < EM > emphasized text </EM > < I > italic text </I > < kbd > keyboard </kbd > < pre > Pre Formatted text </pre > < small > Smaller text </small > < strong > Important text </strong > < abbr > (abbreviation) < address > (contact information) < bdo > (text direction) < blockquote > (part quoted from another source) < cite > (name of job) < del > (deleted text) < ins > (inserted text) < Sub > (subscript text) < SUP > (superscript text) copying the code

 

Links

Common Link: < A the href = "http://www.example.com/" > link text </A > Image Link: < A the href = "http://www.example.com/" > < IMG the src = "the URL" Alt = "replacement text" > </A > Mail link: < A the href = "mailto: webmaster@example.com" > send-mail E </A > Bookmark: < A ID = "Tips" > Tip section </A > < A the href = "#tips" > Jump Tips section </A > copy the code

Images

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

 

Styles/Sections:

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

 

Unordered list

< ul > < li > Project </li > < li > Project </li > </ul > Copy code

Ordered list

<ol> <li>First item</li> <li>The second item</li> </ol> Copy 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 > Table title </th > < th > Table title </th > </tr > < tr > < td > Table data </td > < td > Table data </td > </tr > </table Copy 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 code

Entities

< Same as< > Same as> Same as Copy code

 

 

  • HTML summary

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

HTML is a general markup language used on the Web. HTML allows you to format text, add pictures, create links, enter forms, frames and tables, etc., and save it as a text file, which can be read and displayed by the browser.

The key to HTML is tags, which are used to indicate what will appear.

Now that you have finished learning HTML, what should you learn next?

 

Learn css

CSS is used to control the style and layout of multiple web pages at the same time.

By using CSS, all formatting can be stripped from HTML and stored in a separate file.

 

Learn JavaScript

JavaScript can make your web pages more vivid.

If you only want to display content, a static website is a good display image. If you want to exchange with users or make web pages more vivid, you need to use Javascript.

JavaScript is the most popular scripting language on the Internet, and all major browsers currently support Javascript.

 

Site server

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

1. Hardware expenditure

If you want to run a "real" website, you have to buy powerful server hardware. Don't expect low-priced PCs to handle these tasks. You also need a stable (24 hours a day) high-speed connection.

2. Software expenditure

Keep in mind that server authorization is usually more expensive than client authorization. Please also note that server authorization may have a limit on the number of users.

3. Labor costs

Don't expect low labor costs. You must install your own hardware and software. You have to deal with vulnerabilities and viruses at the same time to ensure that your server runs normally in an environment where "anything can happen" at all times.

 

Use an Internet Service Provider (ISP)

It is also common to rent a server from an ISP.

Most small companies store 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

The ISP's web server is usually powerful enough to share resources by several websites. You also need to see if the ISP provides efficient load balancing and the necessary backup servers.

3. Safety and reliability

 

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

 

Points to note when choosing an ISP:

 

24 hours support

Ensure that your ISP provides 24-hour support. Don't put yourself in an embarrassing situation where you can't solve a serious problem, and you must wait for the second working day at the same time. If you don t want to pay for long-distance calls, then free phone service is also necessary.

 

Daily backup

Make sure that your ISP will perform daily backup routines, otherwise you may lose valuable data.

 

flow

Study the ISP's traffic restrictions. If there is an unexpected surge in visits due to the popularity of the site, you need to make sure that you won t pay extra for it.

 

Bandwidth or content restrictions

Study the bandwidth and content limits of your ISP. If you plan to post pictures or broadcast video or audio, please make sure you have this permission.

 

E-mail function

Please make sure your ISP supports the e-mail function you need.

 

Database access

If you plan to use the data in the website database, make sure that your ISP supports the database access you need.

 

  • HTML XHTML

XHTML is HTML written in XML format.

What is XHTML?

  • XHTML refers to Extensible Hypertext Markup Language
  • XHTML and HTML4 are almost the same
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined in the way of XML application
  • XHTML is a W3C recommended standard published by the "W3C XHTML Campaign" in January 2001
  • XHTML is supported by all major browsers

Why use XHTML?

Many pages on the Internet contain "bad" HTML.

If viewed in a browser, the following HTML code works perfectly (even if it does not comply with HTML rules):

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

 

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

There are a few different browser technologies in today's technology world. Some of them run on computers, while others may run on mobile phones or other small devices. Small devices often lack the resources and capabilities to explain "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 difference compared to HTML:

1. Document structure

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

2. 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 use lowercase XHTML attribute values must be enclosed in quotation marks XHTML attributes minimized is also prohibited

<!DOCTYPE .> is mandatory

XHTML documents must have an XHTML DOCTYPE declaration (XHTML DOCTYPE declaration).

The <html>, <head>, <title>, and <body> elements must also exist, and the xmlns attribute in <html> must be used to specify the xml namespace for the document.

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

<!DOCTYPE html 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 > Document content </body > </html > Copy code

XHTML elements must be properly nested

In HTML, some elements may not be nested within each other, like this:

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

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

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

XHTML elements must have closing tags

Examples of errors:

< P > This is a paragraph < P > This is a paragraph further duplicated code

Correct example:

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

Empty element must contain closing tag

Examples of errors:

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

Correct example:

Branch: < br/> level: < HR/> Photo: < IMG the src = "happy.gif" Alt = "Happy face"/> copy the code

 

XHTML elements must be lowercase

Error example:

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

Correct example:

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

Property name must be lowercase

Examples of errors:

<table WIDTH="100%"> Copy code

Correct example:

<table width="100%"> Copy code

 

The attribute value must be quoted

Examples of errors:

<table width=100%> Copy code

Correct example:

<table width="100%"> Copy code

 

Examples of errors that do not allow shorthand attributes:

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

 

Correct example:

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

How to convert HTML to XHTML

  1. Add an XHTML <!DOCTYPE> to 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. Modify all attribute names to lowercase
  6. Add quotes to all attribute values

 

  • HTML multimedia

Multimedia on the web refers to sound effects, 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, etc.

On the Internet, you will often find multimedia elements embedded in web pages. Modern browsers already support multiple multimedia formats.

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

 

Browser support

The first Internet browser only supported text, and even text support was limited to a single font and a single color. Then a browser supporting colors, fonts, and text styles was born, and image support was added.

Different browsers handle support for sound effects, animations, and videos in different ways. Some elements can be processed inline, while some require additional plugins.

 

 

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 will assume that the file is an HTML page. The .xml extension indicates the XML file, and the .css extension indicates the style sheet. The picture format is identified by .gif or .jpg.

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

 

Video format

MP4 is a new video format introduced by the Internet.

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 Group Audio Layer III (Moving Picture Experts Group Audio Layer III), referred to as MP3 for short. It is designed to drastically reduce the amount of audio data. If your site is of music type, you can choose mp3 format.

 

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

 

  • HTML plugin

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

 

A helper application is a program that can be launched by a browser. Auxiliary applications are also called plug-ins.

Auxiliary programs can be used to play audio and video (among others). Auxiliary programs are loaded using tags.

One advantage of using auxiliary programs to play video and audio is that you can allow users to control some or all of the playback settings.

Plugins can be added to the page via tags or tags. 

Most auxiliary applications allow manual (or programmatic) control of volume settings and playback functions (such as rewind, pause, stop, and playback).

 

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

 

<object> element

All major browsers support the <object> tag.

The <object> element defines the object embedded in the 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

<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 it was not explained in detail before HTML5. This element will be validated on HTML 5 pages, but not on HTML 4.

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

Or insert a picture:

Note: The element does not have a closing tag. Alternative 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 code

 

  • HTML Audio (Audio)

Sound can be played in different ways in HTML.

 

Playing audio in HTML is not easy!

You need to be familiar with a lot of techniques to ensure that your audio files can be played in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

 

Use plug-ins:

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

Plugins can be added on the page using tags or tags. 

These tags define the container of resources (usually non-HTML resources). Depending on the type, they will be displayed by the browser or by external plug-ins.

 

The tag defines a container for external (non-HTML) content. (This is an HTML5 tag, which is illegal in HTML4, but it is valid in all browsers).

The following code snippet can display MP3 files embedded in web pages:

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

problem:

  • Tags are invalid in HTML 4. The page cannot pass HTML 4 verification.
  • Different browsers support different audio formats.
  • If the browser does not support the file format, the audio cannot be played without a plug-in.
  • If the plug-in is not installed on the user's computer, audio cannot be played.
  • If the file is converted to other formats, it still cannot be played in all browsers.

 

 

Use the <object> element

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

The following code snippet can display MP3 files embedded in web pages:

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

problem:

  • Different browsers support different audio formats.
  • If the browser does not support the file format, the audio cannot be played without a plug-in.
  • If the plug-in is not installed on the user's computer, audio cannot be played.
  • If the file is converted to other formats, it still cannot be played in all browsers.

 

Use HTML5 <audio> element

HTML5

The element is an HTML5 element, which is illegal in HTML 4, but it works in all browsers.

 

Browser compatibility issues

The number in the box indicates the first browser version number that supports the attribute.

Below we will use

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

Examples:

< 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 code

problem:

  • Tags are invalid in HTML 4. Your page cannot pass HTML 4 verification.
  • You must convert the audio file to a different format.
  • The element does not work in older browsers.

 

The best HTML solution

The following example uses two different audio formats. The HTML5 <audio> element will try to play audio in mp3 or ogg. If it fails, the code will fallback to try the <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 code

problem:

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

 

Use hyperlinks:

If the web page contains hyperlinks to media files, most browsers will use "helper applications" to play the files.

The following code snippet shows the link to the mp3 file. If the user clicks on the link, the browser will launch an "assisted application" to play the file:

Examples:

< A the href = "horse.mp3" > Play Sound The </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 a web application, you need to realize that many people find inline sounds annoying. Please also note that the user may have turned off the inline sound option in the browser.

Our best advice is to include them only where the user expects to hear inline sounds. A positive example is that when the user needs to hear the recording and click on a link, the page will be opened and the recording will be played.

 

HTML multimedia tags

 

 

  • HTML Video (Videos)

There are many ways to play a video in HTML.

 

HTML video (Videos) playback

 

Playing videos in HTML is not easy!

You need to be familiar with a lot of techniques to ensure that your video files can be played in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

 

Use the <embed> tag:

The role of tags is to embed multimedia elements in HTML pages.

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

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

problem:

  • HTML4 does not recognize the <embed> tag. Your page could not be verified.
  • If the browser does not support Flash, the video will not play
  • iPad and iPhone cannot display Flash video.
  • If you convert the video to other formats, it still cannot be played in all browsers.

Use the <object> tag:

The role of tags is to embed multimedia elements in HTML pages.

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

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

problem:

  • If the browser does not support Flash, the video cannot be played.
  • iPad and iPhone cannot display Flash video.
  • If you convert the video to other formats, it still cannot be played in all browsers.

 

Use HTML5 elements

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

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

The following HTML snippet shows a video in ogg, mp4 or webm format embedded in a webpage:

< 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 tag. </video > copy code

problem:

  • You must convert the video to many different formats.
  • The element is not valid in older browsers.

The best HTML solution

4 different video formats are used in the following examples. The HTML 5 <video> element will try to play the video in one of mp4, ogg or webm format. If both 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 code

problem:

You have to convert the video to many different formats

 

Youku Solutions

The easiest way to display videos in HTML is to use video sites such as Youku.

If you want to play the video on a web page, you can upload the video to a video site such as Youku, and then insert the HTML code in your web page to play the video.

You can find the embedded HTML code in the sharing entrance of major video websites.

 

< embed src = 'https: //player.youku.com/player.php/sid/XMTQ3MjM5Mjc0MA==/v.swf ' allowFullScreen = 'true' quality = 'high' width = '480' height = '400' align = 'Middle' the allowScriptAccess = 'Always' type = 'file application/X--Shockwave Flash' > </the embed > copy the code

 

Use hyperlink

If the web page contains hyperlinks to media files, most browsers will use "helper applications" to play the files.

The following code snippet shows the link to the AVI file. If the user clicks on the link, the browser will launch an "assisted application", such as Windows Media Player to play this AVI file:

< A the href = "intro.swf" > Play Video File A </A > copy the code

 

A note about inline videos

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

If you plan to use inline video in a web application, you need to realize that many people find inline video annoying.

Please also note that the user may have turned off the inline video option in the browser.

Our best advice is to only include them where users want to see inline videos. A positive example is that when a user needs to see a video and click on a link, the page will open and the video will be played.

 

HTML multimedia tags

 

 

 

 

At this point, the html tutorial is demonstrated here, including the mainstream html knowledge on the market, I hope everyone can get a qualitative improvement