HTML5 Notes + Cases

Posted by MannyG on Tue, 23 Jun 2020 04:11:34 +0200

HTML Notes

File extension

Word.docx Excel.xlsx PPT.pptx
How to open a file extension:
[External chain picture transfer failed, source station may have anti-theft chain mechanism, it is recommended to save pictures and upload them directly (img-Vty2rmPe-15928773052) (D:Static Web Page MakingNotesNotes and Cases 2.png)]
Or:
[External chain picture transfer failed, source station may have anti-theft chain mechanism, it is recommended to save pictures and upload them directly (img-qDz7k8tM-15928773055) (D:Static Web Page MakingNotesNotes and Cases 3.png)]

Introduction to html

1. What is HTML?

HTML: Hyper Text Markup Language Hypertext Markup (Label) Language

A variety of tags to make a web page and how the browser should display it

2. Role

Make web pages to control the display of web pages and content
Insert multimedia like pictures, music, videos, animations, etc.
Retrieving information through links
Use forms to get users'data and interact

3.HTML version

www: World Wide Web C: consortium
W3C: Internet Consortium, an organization that formulates standards and specifications for Web technology, HTML is the standard set by W3C
Two versions: HTML 4.0.1, HTML 5.0--- usually H5
Official website:https://www.w3school.com.cn

4. Extensions

html file extension:.html or.htm end

2. HTML Document Structure

1. Basic structure

1.1 Introduction

HTML transitions are keywords enclosed in angle brackets, such as tags that usually appear in pairs.as
Think of it as a root tag, containing the head and body parts
The header provides summary information about the page, such as labels, document types, character encoding, keywords, etc.
The main part provides the content to be displayed on the page, really showing the content in the page
Reasonable indentation
Label names are case insensitive, but typically lower case

1.2 Development Tools

Notepad notebook, sublime, notepad++, Dreamweaver, VScode, webstorm, etc.

Steps to use:

1. Create a new file (Ctrl+N), then save it (Ctrl+s), specify the extension.html

2. Write html code

3. Open the file in the browser to verify the effect

1.3 Browser

Common browsers, IE Microsoft, Chrome Google, Firefox, Safari Apple
Browser function: Read html files and display them as web pages
Instead of displaying html tags directly, browsers use tags to interpret the content of a web page

Case:

<html>
	<head>
	         <title>HTML Study</title>
	</head>
	<body>
	       welcome to html!
	</body>
</html>

<html>
	<head>
	         <title>Hello, HTML</title>
	         <meta charset ="utf-8">
	</head>
	<body>
	       welcome to html!
	</body>
</html>

2. Labels

Composition of 2.1 Labels

Composition of a complete html tag:

<Tag Name Attribute Name="Attribute Value">Content</Tag Name>

Attribute values are quoted, typically using double quotes

2.2 Label Classification

According to whether the label is closed or not, it can be divided into: closed type and non-closed type.

Closed: Start tag again, and end tag, usually in pairs

<title>Label</title>
<head>head</head>
<body>subject</body>
<h1>Level 1 Label</h1>

Non-closing tag: only start tag, no end tag

<meta>
<br>
<hr>

Labels are divided into block-level labels and row-level labels, depending on whether they are exclusive or not

Block level labels: shown as blocks, one exclusive line

<h1></h1>
<hr>

Line-level labels: Show in line, can be displayed in line with other text content

<span></span>

Case:

<html>
	<head>
		<title>Composition of labels</title>
	<meta charset ="UTF-8">
    </head>
    <<body bgcolor ="red" text="blue">
    	Composition of labels
    	<hr>

    	 html From Beginning to Proficiency
    	 <hr>

    	 <h1>Title Level 1</h1>
    	 <hr>

    	 <h2>Secondary Label</h2>
    	 
    	 
    	 <h1>Ha-ha</h1>Ha-ha
    	 <hr>

    	 <span>Hey</span>Roar
    </body>
</html>

2.3 Comments

Comments are not displayed in the browser and are used to annotate interpretations of html statements, but can be seen from source code

<! - --- Comment content - ->

Case:

<html lang ="en">
	<head>
		<meta charset ="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<!--First Comment-->
	</body>
</html>

2.4 Entity Characters

Entity characters, also known as special characters, are used to display special symbols such as

Name of entity symbol;

Common Entity Characters

< <less than sign less than 
>> greater than sign great than 
  Spacespace in html for consecutive white space characters (spaces, indents, line breaks, etc.) can only be displayed as one space in the browser&&and 
" "double apostrophe" 
copyright symbol 
® register symbol 
× close symbol

Note: Entity characters are case sensitive, that is, case sensitive

2.5 Document Types

In the first line of an HTML document, declare the type of the HTML document using <!DOCUTYPE HTML>

Used to tell the browser page the html document type, simply to specify the html version specification

It's basically html5.

Case:

<html lang ="en">
	<head>
		<meta charset ="UTF-8">
		<title>Document</title>
	</head>
	<body>
		books:&lt;&lt;HTML From Beginning to Proficiency&gt;&gt;
		<hr>

		Beijing&nbsp;&nbsp;&nbsp;&nbsp;Shanghai&nbsp;&nbsp;&nbsp;&nbsp;Guangzhou&nbsp;&nbsp;
	    <hr>

	    stay html Of use&amp;&lt;Express<Less than sign
	    <hr>

         "html language"perhaps   &quot;html language&quot;
         <hr>

         Copyright &copy;  2000-2020  Higher Education Training
         <hr>

         &reg;
         <hr>

         &times;Close Symbol
         <hr>

         &amp;Entity character names are case sensitive,Case Sensitive

	</body>
</html>

3. Common Labels

1. Basic tables

Label	Meaning	Explain
	Line break label	Non-Closed Label
	Paragraph Label	Closed label, fast label, clear distance between front and back paragraphs
h1.h2.h3...h6	Title Label	Titles h1 to h6 get smaller, block-level labels, bold
	Preformatted Label	Preserve format when encoding
	Partition Label	Common containers for page layouts, block-level labels
	Range Label	No effect by default, typically used to set special formatting in line
,	Ordered List	A sequential list of items
,	Unordered List	Unordered list of items
,,	Definition List	List describing and defining terms, pictures, etc.
	Horizontal line label	Non-Closed Label, Block Level Label
	Image Label	Non-Closed Label, Row Level Label

1.1 Ordered List

ol: ordered list

li: list item

Arabic numerals are used by default, marked from the beginning, and can be modified by attributes

Typee property: set the tag before the list, take value, number 1 (default), letter A or a, uppercase Roman numeral I or I
start property: Sets the starting value, the value must be a number

Case:

<!DOCTYPE html>
<html lang ="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
	   hello html
	   hello world
	   <br>
	   welcome to html
	   <p>
	   	stay HTML The first line of the document, using the declaration html The type of document used to tell the browser page HTML Document type, simply to specify which html Version Specification
	   </p>
	<hr>
	<h1>Level 1 Label</h1>
	<h2>Secondary Label</h2>
	<h3>Level 3 Label</h3>
	</body>
</html>

1.2 Unordered List

ul: unodered list

li: list item

By default, solid circles are used as symbol markers and can be modified by attributes

type property: set the symbol marker at the front of the list, take value; disc solid circle (default), circle hollow circle, square, none does not display symbol

Case:

<!DOCTYPE html>
<html lang ="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<pre>
			HTML From Beginning to Proficiency
			Audience: Zhang San
		</pre>
		<hr>
		<div style ="width:400px;height:100px;background:red">Navigation section</div>
		<div style ="width:400px;height:300px;background:yellow">Body part</div>
		<div style ="width:400px;height:100px;background:gray">Copyright section</div>
	     <hr>

	     Mobile phone not 8888,No 7777, as long as<span style ="font-size:50px;color:red">6666</span>
	</body>
	
</html>

1.3 Definition List

dl: definition list

dt: definition title

dd: definition description

Case:

<!DOCTYPE html>
<html lang ="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <h3>2020 Year Online Game Charts</h3>
 <ol type ="①" start=5>
 	<li>Glory of Kings</li>
 	<li>Eat chicken</li>
 	<li>LOL</li>
 	<li>wow</li>
 </ol>
 <hr>

     <h3>Lovely classmates</h3>

     <ul type ="circle">
 	     <li>Malacca</li>
 	     <li>King Five</li>
 	     <li>Zhang San</li>
 	     <li>Li Si</li>
    </ul>
    <hr>
    <h3>Interpretation of Terms</h3>
    <dl>
    	<dt>LOL</dt>
    	<dd>He is an online game proxied by Tencent and named in Chinese Heroes Alliance</dd>
    	<dd>It can be divided into mobile and PC end</dd>
    	<dt>HTML</dt>
    	<dd>Markup language for making web pages</dd>
    	<dt>JAVA</dt>
    	<dd>A Cross-Platform Programming Language</dd>
    </dl>

 </body>

</html>

1.4 Horizontal Label

Color color
Two ways of writing:
Color name: e.g. red, green, gray, black, white, pink, orange...

Hexadecimal RGB: Usage: #RGBRGBRGB Converts 0-255 for each color to 100-FF for hexadecimal

For example: #FF0000 Red #00FF00 Green #0000FF Blue

-#000000Black#CCCC #FF7300 Orange

size is a numeric value representing thickness
Width width

Two ways of writing:

Pixels: Absolute (Fixed)

Percentage: Relative value, a percentage determined relative to the width of the parent container where the label is located
align

Value: default center centered left right

Case:

<!DOCTYPE html>
<html lang ="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
   <hr color="gray">
   <hr size ="8px" color="red">
   <hr color ="yellow" width="400px">
   <hr color ="black" width ="50%" size="10">
   <div style ="width:500px;height:300px;background:#cccccc">
      <hr  color ="red" width="50%" align="center">
   </div>
   </body> 
</html>

1.5 Image Labels

img: image

Common picture formats:.Jpg.png.gif.bmp

Common attributes:

Src:sourceSpecify the path (source) of the picture, required parameters

If the picture is in the same folder as the html source code, you can write the name of the picture directly
Traditionally, multiple pictures are stored in a separate folder, such as project\image, where you need to add a path before the picture name
Classification of routes:

Relative Path

Indicates:. /Current Path

.../Upper folder in current location

Tip:.../image
alt: Information prompted when the picture does not display properly
title: Tips displayed when the mouse hovers over the picture
width/height: Set the width and height of the picture

By default, the original size display If only one is set, the other scales automatically. If both width and height are set, the picture may be distorted

Two ways of writing: Pixel: Absolute (Fixed)

Percentage, relative value, percentage of the width of the parent container on which the label resides

Case:

<!DOCTYPE html>
<html lang ="en">
      <head>
         <meta charset="UTF-8">
         <title>Document</title>
      </head>
    <body>
         <img src="../image/web Front end/12.jpg" alt="Picture loading failed.." title="This is the mascot of Tencent Group--penguin">
         <hr>
         <img src="../image/web Front end/2.gif" alt="Picture loading failed" width="500px" heighth="400px">
            <hr>
         <img  src="../image/web Front end/11.jpg" width="50%">
         <hr>
         <div style=width:800px;height:700px;background:red;>
         	<img src="../image/web Front end/9.png" width="50%">
         </div>


    </body>
 
</html>

2. Other labels

Label	Meaning	Explain
i	Italic	italic
em	Contents highlighted	Typically italicized when displayed in browsers
address	address	Typically italicized, block-level labels are displayed in browsers
b	Bold	bold
strong	Contents highlighted	Typically bold when displayed in browsers
del	Strikeout	delete
ins	Underline
sub	subscript
sup	Superscript
bdo	Set Text Direction	right to left by attribute dir="ltr" (left to right) "rtl"
abbr	Set up abbreviations	Set the prompt that appears when the current mouse hovers over text through the title property
small	Reduce font size by one compared to other current text
big	Increase the font size by one point relative to the other text in the current base

For better semantics

Case:

<!DOCTYPE html>
<html lang ="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
      </head>
    <body>
         welcome<i> to </i>  html!
         <hr>
         welcome<em> to </em>html!
         <hr>
         welcome to <address>Shanghai</address>
         <hr>
         html from<b>Introduction</b>reach<b>Master</b>
         <hr>
         html from<strong>Introduction</strong>reach<strong>Master</strong>
         <hr>
         Original price<del>188 element</del>，Concessional rate<span style="font-size:50px;color:red">98</span>element
         <hr>
         Audience:<ins>Fan Wenxin</ins>
         <hr>
         The chemical formula for water is: H<sub>2</sub>O
         <br>
         2<sup>4</sup>=16
         <hr>  
         <bdo dir="rtl">Welcome to beijing!</bdo>
         <br>
         <bdo dir="rtl">Shanghai tap water comes from Shanghai</bdo>
         <hr>
         <abbr title="happy new year">happy new year</abbr>
         <br>
         <span title="happy new year">happy new year</span>
         <hr>

         HTML from<small>Introduction</small>reach<small>Master</small>
         HTML from<big>Introduction</big>reach<big>Master</big>
    </body>
</html>

3. Header Tags

mata defines the summary information of a web page, such as character encoding, keywords, descriptions, authors, and so on
Title defines the title of a web page
Style defines the CSS style inside
link references external CSS styles
script Definition or Reference script
base Defines base Path

Default relative path to the location of the current page file

Case:

<!DOCTYPE html>
<html lang ="en">
    <head>
       <!-- Set character encoding -->
       <meta charset="UTF-8">
       <!-- Set Page Keyword SEO network optimization-->
       <meta name="keywords" content="IT education,Java Development,web Front end,Python,Android Development...">
       <!-- Set the description of the page -->
       <meta name="description" content="Professional Teachers Answer Questions Online">
       <!-- Set up authors for the site -->
       <meta name="author" content="Mr. Liu">
       <!-- Set up site jumps -->
       <!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com">  -->

       <title>Document</title>
       <!-- Define Internal CSS style -->
       <style>
           body{
           	color:gray;
           }
       </style>
       <link rel="stylesheet" href="CSS Path to file">
       <!-- Define or reference scripts -->
       <script>
       	   alert="Hey"
      </script>
      <!-- Define Base Path -->
      <base herf="../image/web Front end/">
    </head>
    <body>
         	IT Education, National Computer Examination Level Examination--Mr. Liu
         	<img src="../image/web Front end/3.gif" alt="">
         	<br>
         	<img src="../image/web Front end/2.gif" alt="">
    </body>
</html>

4. Nesting of labels

One tag nests another tag
Labels cannot be nested indiscriminately, as the following labels are incorrectly nested

<p style="width:300px;height:300px;background:green">        
     <div style="width:200px;height:200px;background:blue">                    world        
     </div>    
</p>

Page code displayed after browser rendering is different from when encoding
Developer tool provided by chrome browser: to help developers view and debug pages
How to open:

Right-click on the page ->Check/Review Elements/View Elements
Press F12

Common tools:

Elements: From a browser's perspective, the structure of the page when the browser renders it
console: console that displays various warnings and error messages
Network: View the network request information, which resources the browser requested from the server, the size of the resources, and the amount of time it took to load the resources

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <script>
                	alert("Hey!")
                </script>
        </head>
        <body>
        <div style="width:200px;heighe:200px;background:gray">
        	<p>
        		hello
        	</p>
        </div>
        <p style="width:100px;height:200px;background:green">
        <div style="width:200px;heighe:200px;background:red">
        	hello
        </div>
        </p>
        </body>
        
</html>

4. Hyperlinks

1. Introduction

Use hyperlinks to jump from one page to another to jump between pages

When the mouse moves over the hyperlink text, the mouse arrow becomes a small hand

There are three types of hyperlinks:

Normal Link/Page Link: Jump to another page
Anchor link: Jump to the stroke point (somewhere on the same page)
Function Link: Implement special functions (e-mail, download)

2. Basic usage

Use Label Create Hyperlink
Grammar Format:

<a href - "Link Address" target="Link Open Location">Link Text or Image</a>

Common attributes:
href link address or path: link address

Where the target link opens: Value:

_self itself, the current default value;
_Blank new, blank, new page
 _Parent parent framework
 _top Top Framework, Custom

Route classification:

Relative path:

Not rooted relative to the path where the page is located

. /Current Path

.../Represents parent path

Absolute Path: Path starting with root

file:///D:/static web page/b.html

https://www.baidu.com

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
        </head>
        <body>
        <a href="http://www.baidu.com">Baidu</a>
        <br>
        <a href="http://www.baidu.com" target="_blank">Baidu</a>
        <hr>
        <a href="d:/software/b.html" target="_blank">b.html</a>
        <hr>
        <a href="./c.html">c.html</a>
        <!-- ./current path -->
        <br>
        <a href="../d.html">d</a>
        </body>
        
</html>

3. Anchor Links

3.1 Introduction

Click the link and jump to the specified location of the page (anchor)
Classification of Anchor Links

Anchor links within pages
Anchor links between pages

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
        </head>
        <body>
        	<ol>
        		<li><a href="#first">Introduction</a></li>
        		<li><a href="#second">HTML version</a></li>
        		<li><a href="#third">Features</a></li>
        		<li><a href="#forth">Edit Method</a></li>
        		<li><a href="#fifth">Overall Structure</a></li>
        		<li><a href="#sixth">Requirements</a></li>
        	</ol>
        	
    
    <p>
    	<a href="first">Introduction</a>
    </p>
    <P>
    The full English name of HTML is Hypertext Marked Language, or Hypertext Markup Language.HTML is a markup language created in 1990 by Tim Berners-Lee, the inventor of the Web, and Daniel W. Connolly, a colleague. It is an application of the standard generic markup language SGML.Hypertext documents written in HTML are called HTML documents and can be independent of operating system platforms such as UNIX, Windows, and so on.Using the HTML language, the information you need to express is written as an HTML file according to certain rules, recognized by a dedicated browser, and translated into recognizable information, that is, the web pages you see now.
    </p>
    <p>  
    HTML has been used as the information representation language for WWW since 1990. Files described in HTML need to be displayed through a WWW browser.HTML is a language for creating web page files, displaying images, sounds, pictures, text animations, movies and TV through tagged instructions (Tags).In fact, every HTML document is a static web page file, which contains HTML instruction codes, which are not a programming language, but a markup structure language for typesetting the location of data display in Web pages. It is easy to understand and very simple.The ubiquitous use of HTML is the technology that brings hypertext - jumping from one topic to another by clicking the mouse, from one page to another, and the File Link Hypertext Transfer Protocol with hosts around the world specifies the rules and operations that browsers follow when running HTML documents.The HTTP protocol provides browsers with uniform rules and standards when running hypertext.
    </P>
    <p>
    	<a href="second">HTML version</a>
    </p>
    <p>HTML is a grammatical rule used to mark how Web information is presented and other features. It was originally invented by Tim Berners-Lee of GERN in 1989.HTML is based on older language SGML definitions and simplifies the language elements.These elements are used to tell browsers how to display data on a user's screen, and have long been supported by various Web browser vendors. 
    </p>
    <p>There are the following versions in HTML history:  
    (1) HTML 1.0: Published in June 1993 as a working draft of the Internet Engineering Task Force (IETF).<br>
    (2) HTML 2.0: released as RFC 1866 in January 1995 and declared obsolete after its release in June 2000.<br> 
    (3) HTML 3.2:January 14, 1997, W3C Recommendation.<br>
    (4) HTML 4.0:December 18, 1997, W3C Recommendation.<br> 
    HTML 4.01 (minor improvements): December 24, 1999, W3C Recommendation.<br> 
    HTML 5:HTML5 is the well-known next generation Web language, which greatly improves the Web's ability in rich media, rich content and rich applications. It is known as an important pusher that will eventually change the mobile Internet.<br>
    </p>

    <p>
    	<a href="third">features</a>
    </p>
    <p>
    Super Text Markup Language (HTML) documentation is not very complex, but it is powerful and supports file mosaicking in different data formats, which is one of the reasons why the World Wide Web (WWW) is prevalent. Its main features are as follows: [4] 
    Simplicity: The Superset approach is used to upgrade the version of HTML for greater flexibility and convenience.[4] 
    Extensibility: The wide use of Hypertext Markup Language (HTML) has led to enhanced functionality and increased identifier requirements. HTML uses subclass elements to ensure system expansion.[4] 
    Platform independent: Although personal computers are popular, most people using other machines, such as MAC, use Hypertext Markup Language on a wide range of platforms, which is another reason for the popularity of the World Wide Web (WWW).[4] 
    Universality: In addition, HTML is the common language of the network, a simple and universal markup language.It allows web page creators to create complex pages that combine text with pictures that can be browsed by anyone else on the web, regardless of the type of computer or browser they use.
    </p>

    <p>
    	<a href="forth">Edit Method</a>
    </p>
    <p>
    HTML is actually text and requires browser interpretation. Its editors can be grouped into the following categories:
Basic text, document editing software, Notepad or Wordpad that comes with Microsoft can be written, of course, if you write with WPS, you can.However, use.htm or.html as the extension when you save, which makes it easier for the browser to recognize that the direct explanation is being executed.[7] 
Semi-WYSIWYG software, such as FCK-Editer, E-webediter and other online web page editors, is particularly recommended: Sublime Text Code Editor (developed by Jon Skinner, Sublime Text2 charges but can be tried indefinitely).[7] 
WYSIWYG software, the most widely used editor, can make web pages without any knowledge of HTML, such as AMAYA (Output Unit: World Wide Web Consortium); FRONTPAGE (Output Unit: Microsoft); Dreamweaver (Output Unit Adobe).Microsoft Visual Studio: WYSIWYG software is faster, more efficient and more intuitive than half-WYG software.Modifications anywhere require only a refresh to display.The disadvantage is that the generated code structure is complex, which is not conducive to the implementation of advanced functions such as multi-person collaboration and accurate positioning in large websites.
    </p> 


    <p>
    	<a href="fifth">Overall structure</a>
     </p>
    <p>
    A Web page corresponds to multiple html files. Hypertext Markup Language files have either an extension of.htm (a foreign language abbreviation restricted by the DOS of the disk operating system) or an extension of.html (a foreign language abbreviation).You can use any text editor that can generate a TXT-type source file to generate a hypertext markup language file, simply by modifying the file suffix.Standard hypertext markup language files have a basic overall structure, markup is generally paired (with the exception of partial markup such as <br/>), that is, the beginning and end markup of a hypertext markup language file and the header and entity of a hypertext markup language.There are three double markers used to confirm the overall structure of the page.[10] 
    The tag <html> indicates that the file is described in Hypertext Markup Language (the full Chinese name of this tag), which is the beginning of the file, and </html>, which indicates the end of the file, which is the beginning and end tags of the Hypertext Markup Language file.
    </p>

    <p>
    	<a href="sixth">Requirements</a>
    </p>
    <p>
    There are conventions or default requirements for editing hypertext markup language files and using markers.[9] 
    Text Markup Language source program file extensions default to htm (disk operating system DOS-restricted foreign abbreviations for extensions) or
    html (foreign language abbreviation for extension) for easy identification of the operating system or program, in addition to the custom Chinese character extension.When using a text editor, be careful to modify the extension.The common image file extensions are gif and jpg.[9] 
    The Hypertext Markup Language source program is a text file with unlimited column widths, in which multiple markup can be written on one line or even the entire file
    One line; if written in multiple lines, the browser generally ignores the carriage return character in the file (except as specified by the tag); the spaces in the file are usually not displayed as they would in the source program.Complete spaces can be denoted with a special symbol (entity character) "&nbsp (note that this letter must be lowercase to allow spaces)" for non-newline spaces; symbols "/" are used to denote file paths; and file names and path descriptions can be enclosed with or without quotation marks.[9] 
    Marker elements in markers are enclosed in angle brackets, and elements with slashes indicate the end of the marker description; most markers must be used in pairs to indicate the beginning and end of a function; marker elements ignore case, that is, they function the same, but complete spaces can use the special symbol'&nbsp'; many marker elements haveWith attribute descriptions, elements can be further restricted by parameters, multiple parameters or attribute items can be described in any order, separated by spaces; the contents of a tagged element can be written on multiple lines.[9] 
    Marker symbols, including angle brackets, marker elements, attribute items, etc., must use half-width Western characters, not full-width characters.[9] 
    HTML comments start with'<!--'and end with a symbol -->'End, e.g. <!--Comment content -->.Comments can be inserted anywhere in the text.Any marker marked as a comment will not be displayed if an exclamation mark is inserted in front of it.
    </p>
        </body>
        
</html>

Anchor links within 3.2 pages

Step 1. Define anchor point (marker)

<a name="anchor point name">target location</a>

Link anchor point

<a href="#Anchor Point Name'>Link Text </a>

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
        </head>
        <body>
           <ol>
        		<li><a href="#first">brief introduction</a></li>
        		<li><a href="#second">HTML Edition</a></li>
        		<li><a href="#third">Characteristic</a></li>
        		<li><a href="#forth">Editing Method</a></li>
        		<li><a href="#fifth">Overall structure</a></li>
        		<li><a href="#sixth">Relevant Requirements</a></li>
        	</ol>
        </body>   
</html>

Anchor links between 3.3 pages

<a href="Target Page#Stroke Name">Link Text</a>

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
        </head>
        <body>
           <ol>
        		<li><a href="14.Anchor Link.html#first">brief introduction</a></li>
        		<li><a href="14.Anchor Link.html#second">HTML Edition</a></li>
        		<li><a href="14.Anchor Link.html#third">Characteristic</a></li>
        		<li><a href="14.Anchor Link.html#forth">Editing Method</a></li>
        		<li><a href="14.Anchor Link.html#fifth">Overall structure</a></li>
        		<li><a href="14.Anchor Link.html#sixth">Relevant Requirements</a></li>
        	</ol>
        </body>
</html>

4. Functional Links

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
        </head>
        <body>
        <a href="../image/web Front end/3.gif">Click here to download pictures</a>
        <br>
        <a href="mailto:1921117402@qq.com">Contact us</a>
        </body>  
</html>

5. URL

5.1 Introduction

URL: uniform resource locator Uniform Resource Locator, used to locate the location of the resource

1.https://www.baidu.com/img/bd_logo1.pngname=tom&age=2&sex=male 2.https://www.w3school.com.cn/html/html_quotation_elements.asp 3.file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html 
4.http://www.sxgjpx.net/ 
5.ftp://10.255.254.253/

5.2 Composition

1.https://www.w3school.com.cn/html5/index.asp 
2.http://www.sxgjpx.net 3.file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E  9%93%BE%E6%8 E%A5.html 
4.ftp://10.255.254.253/ 
5.https://www.baidu.com/img/bd_logo1.png

A complete URL consists of eight parts:

Protocol: prococol such as
http: Hyper text Transfer Protocol for accessing the web site Hyper text Transter protocol
https: More secure protocol, SSL Secure Sockets Sublayer
ftp: File transfer protocol used to access files on the server for file upload and download
file: file protocol, used to access local protocols
Host name hostname Server address or server netbios name, such asWww.baidu.comFtp://10.255.254.254
Port: The port is behind the host name, separated by a colon
Different protocols use different ports, such as http using port 80, https using port 443, ftp using ports 20 and 21
If the default port is used, the port can be omitted
If you are not using the default port, you must make the portHttp://59.49.32.213: 7070/
Path: The path structure where the path destination file is located, such asHttps://www.bilibli.com/video/av93425449//
Resources: Target files to be accessed by resource, such as bd_logo1.png
Query string: query string is also known as a parameter
Behind resources?Beginning set of names/values
Names and values are separated by = and multiple expressions are separated by & e.g. name=tom&age=2&sex=male
Anchor anchor, using text starting with #after a resource, such as #6
Authentication: authentication. Specifies identity information, such as ftp://account: password@ftp.bbshh010.com

5. Tables

1. Introduction

A table is a regular row and column structure. Each table is made up of rows, and each row is made up of cells.
table,row,column

2. Basic structure

2.1 table tag

Used to define tables

Common properties:

border: border, default 0

Width/heightWidth/Height

Alignment value: left, center, right

bordercolor: border color

bgcolor: background color

Background: background picture

cellspacing: spacing, the distance between cells

cellpadding: margin, distance between cell content and boundary

2.2 tr Tags

Used to define rows: table row

2.3 td Label

Used to define cells: table data

Common attributes: align, valign, bgcolor, background

Case:

<!DOCTYPE html>
<html lang ="en">
        <head>
                <meta charset="UTF-8">
                <title>Document</title>
        </head>
        <body>
        <table border="5" width="400px" height="300px" align="center" bordercolor="green" bgcolor="#cccccc" background="../../image/web Front end/2.gif" cellspacing="5" cellpadding="2px">
           <tr align="left" valign="top">
        	  <td>Zhang San</td>
        	  <td>Li Si</td>
        	  <td>King Five</td>
        	  <td>Malacca</td>
           </tr>
           <tr align="center" valign="middle" bgcolor="orange">
        	 <td>Li Si</td>
        	 <td bgcolor="yellow" valign="bottom">Zhang San</td>
        	 <td>King Five</td>
        	  <td>Malacca</td>
          </tr>
          <tr align="right" valign="bottom" background="../../image/web Front end/3.gif">
        	<td>Zhang San</td>
        	<td>Zhang San</td>
        	<td>Zhang San</td>
        	<td>Zhang San</td>
           </tr>
       </table>
</body>
</html>

3. Merge Cells

Merging cells is also known as cross-row and cross-column tables

Two attributes:

rowspan

Set the number of rows spanned by a cell, such as rowspan="2" to indicate that the number of rows spanned is 2

colspan

Set the number of columns the cell spans, such as clospan="4" to span four columns
Steps:

Setting rowspan/colspan properties in cells that span straight lines
Delete cells that will be spanned

Note: You must ensure that the actual number of columns per row is the same, otherwise the table may become confused

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- table>(tr>td{hello$}*4)*4 -->
    <table border="2" width="500px" height="400px">
    <tr>
        <td colspan="4" align="center">hello1</td>
    </tr>
    <tr>
        <td rowspan="3">hello1</td>
        <td>hello2</td>
        <td>hello3</td>
        <td>hello4</td>
    </tr>
    <tr>		
        <td>hello2</td>
        <td rowspan="2" colspan="2">hello3</td>		
    </tr>
    <tr>			
        <td>hello2</td>			
    </tr>		
    </table>
</body>
</html>

4. Advanced Labels

4.1 caption

Table Title Label

4.2 thead Tags

Head of table

4.3th Label

Header title of table
In thead, set header title instead of TD tag, differentiate from td, bold and centered

4.4 tbody label

The body of the table

4.5 tFoot Tags

The bottom table foot of the table

Case:

<html>
<body>
    <table border="1" height="300px" width="400px" align="center" bordercolor="yellow" bgcolor="pink">
    <caption><h2>Basic Information Table</h2></caption>
    <thead>
       <th>School Number</th>
       <th>Full name</th>
       <th>Age</th>
       <th>Gender</th>
    </thead>
    <tbody bgcolor="cyan" align="left">
    <tr>
       <td>1101</td>
       <td>King Five</td>
       <td>19</td>
       <td>male</td>
    </tr>
    <tr>
       <td>1102</td>
       <td>Li Si</td>
       <td>19</td>
       <td>male</td>
    </tr>
    <tr>
        <td>1103</td>
        <td>Zhang San</td>
        <td>20</td>
        <td>male</td>
    </tr>
    <tr>
        <td>1104</td>
        <td>Malacca</td>
        <td>20</td>
        <td>male</td>
    </tr>
    </tbody>
<tfoot>
    <tr>
       <td width="40%">Total number of people</td>
       <td colspan="3">4</td>
    </tr>
</tfoot>
    </table>
</body>  
</html>

6. Forms

1. Introduction

A form is an area that contains several form elements to obtain different types of usage information

Form elements are elements that allow users to enter information into a form, such as text boxes, password boxes,

Checkboxes, drop-down lists, buttons, etc.

2. Form structure

2.1 Form Syntax

<form action=""  method="">
    Multiple Form Elements
</form>

2.2form Label

Used to define a form and can contain multiple form elements

Common properties:

action submits data for processing, which is the program that processes the data, defaults to the current page, and is represented as a query string
method submits data in: get (default), post

The difference between get and post:

get is submitted as a query string, as you can see in the address bar, limited in length, unsafe

post is submitted as a form data group, not visible in the address bar, unlimited length, secure
enctype: Encoding of submission data, values: application/x-www-form-urlencode (default), multipart/form-data (file upload)

3. Form Elements

Most form elements are defined using tags, and different form elements are defined by setting the type property

<input type="Types of form elements" name="Name" value="Default value" size="">

Types of form elements	Meaning	Explain
text	Input	text is the default when omitted
password	Password box	Enter with dots, safe
redio	radio button	Only one of them can be selected
checkbox	check box	Multiple can be selected at the same time
submit	Submit button	Submit form data
reset	Reset	Reset the initial value of a form element
image	Image Button	You can use pictures as buttons
button	Normal Button	No function by default
file	JFileChooser	Select the file to upload
hidden	Hidden Fields	Not shown on the page, but submitted, which can be used to store data

3.1 Single Line Text Box

Common properties:

Name property: Name, it is important that if no name is specified, the form element cannot be submitted
Value property: The default value in the text box when the user does not enter data
size property: The display width of the text box
maxlength property: maximum number of characters, unlimited by default
Readonly property: read-only <readonly="readonly">, can be abbreviated as <readonly>, that is, write-only property name
Disabled property: not available, disabled.<disabled="disabled">, or write directly <disabled> completely disabled
The difference between readonly and disable: data from the former is submitted, and data from the latter is not mentioned

3.2 Radio Buttons

Common Properties

Name property: Name, multiple radios must have the same name property in order to be mutually exclusive (radio)
Value property: value,
Checked: There are two states for checked and unchecked, <checked="checked">Short form <checked>

3.3 Checkbox

Common properties are similar to radio s

3.4 File Selector

Common properties:

name property: name
accept sets the type of file you can choose to limit the type of file you upload

Restrict resource types using MIME format strings

Common MIME types:
- Plain text: text/plain text/heml text/xml
- Image: image/png image/gif image/jpeg

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>User registration</h2> 
    <form action="" method="get" enctype="multipart/form-data">
    	User name:<input type="text" name="fanwenxin" value="Fan Wenxin" size="4" maxlength="4">
    	<br>
    	Password:<input type="password" name="pwd" size="8" maxlength="8">
    	<br>
    	Age:<input type="text" name="age">
    	<br>
        Gender: <input type="radio" name="sex" value="male">
              <img src="../../image/web Front end/6.gif">
              <input type="radio" name="sex" value="female" checked>
              <img src="../../image/web Front end/5.gif">
        <br>
        Hobbies:
              <input type="checkbox" name="hobby" value="Having dinner">Having dinner
              <input type="checkbox" name="hobby" value="Sleep">Sleep
              <input type="checkbox" name="hobby" value="Bean Bean">Bean Bean
        <br>
        Head portrait:
              <input type="file" name="head" accept="image/jpeg">
              <input type="hidden" name="usr_id" value="9528">
        <hr>
    	<input type="submit">
        <input type="reset">
        <hr>
        <input type="image" src="../../image/web Front end/4.gif">
        <input type="image" src="../../image/web Front end/1.gif">
        <hr>
        <input type="button" value="Normal Button">
    </form>    
</body>     
</html>

4. Special Form Elements

Form Elements	Meaning	Explain
select	Spinner
option	List Options
optgroup	Option Group	Used to group option s
textarea	Text Field/Multiline Text Box	Used to create a multiline text box

4.1 Dropdown List

Selectect common properties:

Name attribute, name
The number of rows displayed in the size drop-down list with multiple options
Multiple, allowing multiple simultaneous selections

option common properties:

Value option value
Select, set the default selected item

Common optgroup properties:

Title of table grouping

4.2 Text Fields

Common properties:

name property: name
Rows property: number of rows
cols property: number of columns

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
      Education:
      <select name="degree">
      <option value="0">---Please choose your academic qualifications---</option>
      	 <option value="Junior College">Junior College</option>
      	 <option value="Undergraduate" selected>Undergraduate</option>
      	 <option value="Graduate student">Graduate student</option>
      	 <option value="master">master</option>
      	 <option value="doctor">doctor</option>
      </select>
      City:
      <select name="city">
          <optgroup label="Shanxi Province">
      	<option value="">Taiyuan</option>
      	<option value="">Lv Liang</option>
      	<option value="">Pingyao</option>
          </optgroup>
          <optgroup label="Shandong Province">
      	<option value="">Jinan</option>
      	<option value="">Qingdao</option>
      	<option value="">sunshine</option>
          </optgroup>
          <optgroup label="Jiangsu Province">
      	<option value="">Nanjing</option>
      	<option value="">Yangzhou</option>
      	<option value="">Xuzhou</option>
          </optgroup>
      </select>
      <br>
      Service agreement:
      <textarea name="intrduce" rows="10" cols="5" readonly>
        Please abide by the relevant agreements and national laws and regulations of this website
        Please abide by the relevant agreements and national laws and regulations of this website
        Please abide by the relevant agreements and national laws and regulations of this website
        Please abide by the relevant agreements and national laws and regulations of this website
        Please abide by the relevant agreements and national laws and regulations of this website
        Please abide by the relevant agreements and national laws and regulations of this website
      </textarea>
    </form>
    <input type="submit">
</body>  
</html>

5. Other Form Elements

5.1 label tag

Provides labels for form elements and automatically switches focus to the associated form elements when the text in the lable label is selected

Common properties:

for must set this property value to be the same as the id property value of the form element associated with it

Note: Almost all HTML tags have all ID attributes, and ID attribute values must be uniform

5.6 button tag

Also represents a button, similar to an input button

Grammar:

<button type="button type">button text or image</input>

Common properties:

Type button type: value submit (default), reset, button

5.3 fieldset and legend Tags

fieldset tag, grouping form elements

legend tags: add titles to groups

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <fieldset>
    	<legend>Personal information</legend>
	    <label for="name">User name:</label>
        <input type="text" name="usrname" id="name">
        <br>
        <label for="email">Mailbox:</label>
        <input type="text" name="email" id="email">
        <hr>
	</fieldset>
    <input type="submit" value="Submit button">
    <input type="reset" value="Reset">
    <input type="image" src="../../image/web Front end/4.gif">
    <input type="button" value="Normal Button">
    <hr>
    <button type="submit">Submit button</button>
    <button type="reset">Reset</button>
    <button type="button">Normal Button</button>
    <button><img src="../../image/web Front end/4.gif" alt=""></button>
    <fieldset>
    	<legend>Institution Information</legend>
    	School Number:<input type="text" name="stuID"><br>
        School:<input type="text" name="stuschool"><br>
        Professional:<input type="text" name="stumajor"><br>
    </fieldset>
</body>     
</html>

7. Embedded Frame

1. Introduction

Use iframe to refer to another page in one page, so that page code can be reused and flexible

2. Basic Grammar

grammar

<iframe src=""></iframe>

Common properties:

src attribute: referenced interface
frameborder property: Whether to show a border, 1 (yes), 0 (no)
scrolling property: whether to display scrollbars, yes, no, auto (automatic)
width/height attribute: width, height, percentage, pixel ratio

3. Open hyperlinks in frames

<iframe name="hello"></iframe>

<a href="Link Address" target="hello"><Linked text or image</a>

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	<iframe src="top.html" width="100%" height="200" frameborder="1" scrolling="auto"></iframe>
    <h3>Principal structure</h3>
    <hr>
    <a href="01.form.html" target="hello">01.html</a>
    <a href="02.merge cell.html" target="hello">02.html</a>
    <hr>
    <iframe src="button.html" width="600px" height="600px"frameborder="1" name="hello"></iframe>
</body>  
</html>

top.html

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	<ul>
		<li>Webpage</li>
		<li>information</li>
		<li>video</li>
		<li>picture</li>
		<li>know</li>
		<li>library</li>
		<li>Post Bar</li>
		<li>Map</li>
	</ul>
</body>  
</html>

button.html

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>Bottom and Copyright</p>
</body>  
</html>

8. Introduction to HTML

1. Development

The W3C released the HTML 4.0.1 standard in December 1992

The W3C released the HTML5 standard in October 2014

2. Characteristics

Remove obsolete tags, such as font, center, etc. They are limited to showing the look
Some more semantic tags have been added, such as header, footer, aside, etc.
Add some function tags, such as audio, video, canvas, etc.
Some form controls have been added, such as emile, date, time, URL, search, etc.
Can draw directly in the browser (canvas), without flash
Added local storage capabilities

3. Compatibility

http://caniuse.com

Provides support for html5 and CSS3 specifications across browser versions

9. Additions to HTML5

1. Structure-related labels

Used for page structure layout, without any special style, need to use CSS for style setting

Articles define an independent content, complete article
section defines the chapters and paragraphs of a document
Header, header, title of header article
Footer article bottom, footer, label, footnote
aside Defines Sidebar
figure picture area
figcaption picture title
navigate navigation

A structure note simply indicates the role of each part, without the actual look and feel of the div

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	<article>
		<header>Title</header>
		<section>
			First paragraph 
		</section>
		<section>
			The second paragraph 
		</section>
		<footer>footnote</footer>
	</article>
	<aside>Advertisement</aside>
	<br>
	<figure>
		<img src="../../image/web Front end/8.png" alt="">
		<img src="../../image/web Front end/9.png" alt="">
	</figure>
</body>  
</html>

2. Semantic Labels

2.1 mark tag

Marker, used to highlight text, with yellow shading or background added by default

2.2 time label

Define date and time

2.3 details and summary Tags

Show content in summary by default, and details by clicking

Note: Not all browsers are compatible, Chrome, Opera support, Firefox support

2.4 meter tag

Technical instrument, representing measurement

Common properties:

max defines the maximum value, defaulting to 1
min defines the minimum value, defaulting to 0
Value defines the current value
The high definition is limited to a high value
Low is defined as a low value
optimum defines the best value

rule

1. If optimum is greater than high, it means that the larger the value, the better

Green when value is greater than high

Yellow when value is between high and low

Red when value is less than low

2. If optimum is less than low, it means that the smaller the value, the better

Green when value is less than low

Yellow when value is between high and low

Red when value is greater than high

3. When optimum is between low and high, it means that the value is best between low and high

Green when value is between low and high, otherwise yellow

2.5 programs tag

Progress bar, indicating progress in progress

Common properties:

Value defines the current value
max defines the completed value

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    welcome <mark>to</mark> shanghai!
    <hr>
    I am here<time datetime="2020-3-14">Valentine's Day</time>There will be a meeting!
    <hr>
    <details>
    	<summary>html brief introduction</summary>
    	<p>HTML Is a label language for making web pages</p>
    	<p>HTML Can contain pictures, audio, text, video and other multimedia information</p>
    	<p></p>
    </details>
    <meter max="100" min="1" value="30"></meter>
    <hr>
    <meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>
    <meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
    <hr>


    <meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
    <meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
    <meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter>
    <hr>


    <meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
    <meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
    <meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="15"></meter>
    <hr>
    
    
    <meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
    <meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter>
    <meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
    <hr>

    <progress value="20" max="50"></progress>
</body>    
</html>

3. Form Relevance

3.1 New Form Elements

email: accept mailbox
url: accepts url (unified acceptance resourcer)
tel: accepts phone numbers and is currently available only on mobile devices
Search: search text box
number/range: accepts a number/number slider with min, max, step attributes
Date/month/week/time/date time: represents a date, but is not compatible
Color: color pickup

Effect:

Function with format checking
Can be associated with a mobile device's keyboard

3.2 New Form Properties

form tag properties:

Whether autocomplete enables the autocomplete function of the form, with values on (default), off
novialldate submits the form without checking, which is done by default

3.3 New Form Element Properties

Add form element attributes, input/select/textarea, etc.

placeholder: prompt text
Required: is it required
Autocomplete: Enable autocomplete for this form element
autofocus: Set the initial focus element
pattern: data validation using the correct expression (explained later in RegExp)
List: To make a text element drop-down list, you need to configure the datalist to be used with the option tag
Form: Form elements can be written outside the form tag and then associated to the specified form through this property

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" autocomplete="on" id="myform">
    <label for="email">mailbox</label>
    <input type="email" name="email" id="email">
    <br>
    <label for="home">Personal Home Page</label>
    <input type="url" name="home" id="home">
    <br>
    <label for="phone">Telephone</label>
    <input type="tel" name="phone" id="phone">
    <br>
    <label for="keyword">Keyword</label>
    <input type="search" name="keyword" id="keyword">
    <br>

    <label for="num">number</label>
    <input type="number" name="num" id="num" max="10" min="1" step="3">
    <br>
    <label for="birthday">date</label>
    <input type="month" name="birthday" id="birthday">
    <br>
    <label for="color">colour</label>
    <input type="color" name="color" id="color">
    <br>
    <label for="usrname">User name:</label>
    <input type="text" name="name" id="usrname" placeholder="Please enter your username" required  autocomplete="off" autofocus>
    <br>
    <label for="age">Age</label>
    <input type="text" name="age" id="age" pattern="\d(1,2)">
    <br>
    <label for="city">City</label>
    <input type="text" name="city" id="city" list="citylist">
    <datalist id="citylist">
    	<option value="1">Beijing</option>
    	<option value="2">Shanghai</option>
    	<option value="3">Nanjing</option>
    	<option value="4">Shenzhen</option>
    </datalist>
    <hr>
	</form>
    <hr>
	<input type="submit" form="myform">
</body>      
</html>

4. Multimedia Labels

4.1 audio tag

Insert audio on the page, different browsers do not support the audio format consistently

Common audio properties:

src: Source of audio file
controls: whether to display the control panel, not by default
autoplay: play automatically or not, not automatically by default
Loop: whether to loop
muted: mute or not
Preload: whether to preload.Value: none not preloaded, auto preloaded (default), metadata only loads metadata
If the autoplay property is set, it is invalid

Multiple audio files can be specified in conjunction with the source tag, and the browser will detect and use the first available audio file

4.2video Tags

Insert videos into the page, different browsers support different video formats

Usage and audio tags are basically the same, adding attributes

Size of widith/height video player
Pictures poster displays before video is loaded

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <audio src="../../audio/water.mp3" controls autoplay loop></audio> -->
    <audio>
    	<source src="../../audio/earth.ogg">
    	<source src="../../audio/water.mp3">
    	The current audio cannot be played. Please change your browser
    </audio>
    <hr>

    <video src="../../video/volcano.mp4" controls width="600px" poster="../../image/web Front end/12.jpg"></video>

</body>      
</html>

Um ">number

date

colour

User name:

Age

City

Beijing
Shanghai
Nanjing
Shenzhen

```

4. Multimedia Labels

4.1 audio tag

Insert audio on the page, different browsers do not support the audio format consistently

Common audio properties:

src: Source of audio file
controls: whether to display the control panel, not by default
autoplay: play automatically or not, not automatically by default
Loop: whether to loop
muted: mute or not
Preload: whether to preload.Value: none not preloaded, auto preloaded (default), metadata only loads metadata
If the autoplay property is set, it is invalid

Multiple audio files can be specified in conjunction with the source tag, and the browser will detect and use the first available audio file

4.2video Tags

Insert videos into the page, different browsers support different video formats

Usage and audio tags are basically the same, adding attributes

Size of widith/height video player
Pictures poster displays before video is loaded

Case:

<!DOCTYPE html>
<html lang ="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- <audio src="../../audio/water.mp3" controls autoplay loop></audio> -->
    <audio>
    	<source src="../../audio/earth.ogg">
    	<source src="../../audio/water.mp3">
    	The current audio cannot be played. Please change your browser
    </audio>
    <hr>

    <video src="../../video/volcano.mp4" controls width="600px" poster="../../image/web Front end/12.jpg"></video>

</body>      
</html>

Topics: Attribute less html5 encoding

Programmer Think

HTML5 Notes + Cases

HTML Notes

File extension

Introduction to html

1. What is HTML?

2. Role

3.HTML version

4. Extensions

2. HTML Document Structure

1. Basic structure

1.1 Introduction

1.2 Development Tools

1.3 Browser

2. Labels

Composition of 2.1 Labels

2.2 Label Classification

2.3 Comments

2.4 Entity Characters

2.5 Document Types

3. Common Labels

1. Basic tables

1.1 Ordered List

1.2 Unordered List

1.3 Definition List

1.4 Horizontal Label

1.5 Image Labels

2. Other labels

3. Header Tags

4. Nesting of labels

4. Hyperlinks

1. Introduction

2. Basic usage

3. Anchor Links

3.1 Introduction

Anchor links within 3.2 pages

Anchor links between 3.3 pages

4. Functional Links

5. URL

5.1 Introduction

5.2 Composition

5. Tables

1. Introduction

2. Basic structure

2.1 table tag

2.2 tr Tags

2.3 td Label

3. Merge Cells

4. Advanced Labels

4.1 caption

4.2 thead Tags

4.3th Label

4.4 tbody label

4.5 tFoot Tags

6. Forms

1. Introduction

2. Form structure

2.1 Form Syntax

2.2form Label

3. Form Elements

3.1 Single Line Text Box

3.2 Radio Buttons

3.3 Checkbox

3.4 File Selector

4. Special Form Elements

4.1 Dropdown List

4.2 Text Fields

5. Other Form Elements

5.1 label tag

5.6 button tag

5.3 fieldset and legend Tags

7. Embedded Frame

1. Introduction

2. Basic Grammar

3. Open hyperlinks in frames

8. Introduction to HTML

1. Development

2. Characteristics

3. Compatibility

9. Additions to HTML5