HTML: hyper text markup language (Hyper Text Markup Language)
HTML5: provides some new elements and some interesting new features, but also establishes some new rules. The establishment of these elements, characteristics, and rules provides many new webpage functions, such as using webpages to realize dynamic rendering of graphics, charts, images, and animations, and directly playing videos on webpages without installing any plug-ins.
W3C
world wide web consortium (World Wide Web Consortium)
was established in 1994, the most authoritative and influential international neutral technical standard organization in the field of web technology
http://www.w3.org/
http://www.chinaw3c.org/
W3C standards include
structured standard language (html, xml)
performance standard language (css)
behavioral standard (dom, ECMAScript)
html basic organization
<body>, </body> and other pairs of tags, which are called open tags and closed tags
A tag (empty element) rendered alone, such as <hr/>; means to use / to close the empty element
1. Basic information of the webpage
DOCTYPE declaration
<title> tag
<meta> tag
<!--DOCTYPE: tell the browser what specification we want to use -->
<!DOCTYPE html>
<html>
<!--head tag represents the head of the web page -->
< head>
<!--meta descriptive tag, which is used to describe some information of our website-->
<!--meta is generally used for SEO-->
<meta charset="UTF-8">
<meta name= "keywords" content="java">
<meta name="description" content="Learning java">
<!--title page title-->
<title>Title</title>
</head>
<!--body The label represents the main body of the web page -->
<body>
hello
</body>
</html>
03. Basic web page tags
Heading tags
Paragraph tags Line
break tags
Horizontal line tags
Font style tags
Comments and special symbols
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic tags</title>
</head>
<body>
<!--title tag-->
<h1>Level 1 label</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<h4>Level 4< /h4>
<h5>Level 5</h5>
<h6>Level 6</h6>
<!--Paragraph tag-->
<p>Goose Goose Goose,</p>
<p>The song item Xiang Tiange. </p>
<p>White hair floats in green water,</p>
<p>Anthurium dials clear waves. </p>
<!--Horizontal line label-->
<hr/>
<!
--Line break label--> Goose Goose Goose, <br/>
The song goes to the sky song. <br/>
White hair floats in green water,<br/>
Anthurium dials clear waves. <br/><h1>Font Style Tag</h1>
<!--Bold, Italic-->
Bold: <strong>i love you</strong>
Italic: <em>i love you</em><br/> < ! -- Special symbols --
>
Space:
Empty & nbsp ;
& nbsp ; </body> </html>
04. Common image formats for image tags
jpg
gif
png
bmp
…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image tag learning</title>
</head>
<body>
<! --
img learning
src: image address (required)
relative address (recommended)
Jedi address../ Upper level directory
alt: image name (required)
-->
<img src="../resource/img/5efaffbac96db.jpg" alt="image" title="hover text" width="300" height="300">
<a href="Link tag.html#down">Jump</a>
</body>
</html>
04. Block elements and inline elements
- Block element No matter how much content, this element occupies a single line (p, h1-h6, ...)
- Inline elements The width of the content is stretched, and the left and right are inline elements that can be arranged in a row (a strong em …)
05. List label unordered ordered list definition list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List learning</title>
</head>
<body>
<!--
Ordered list
application Scope: Exam papers, questions and answers. . .
-->
<ol>
<li>java</li>
<li>python</li>
<li>C</li>
<li>C++</li>
</ol>
<!--
Unordered list
application Scope: navigation, sidebar. . .
-->
<ul>
<li>java</li>
<li>python</li>
<li>C</li>
<li>C++</li>
</ul>
<!Scope of application: bottom of company website
-->
<dl>
<dt>Discipline</dt>
<dd>java</dd>
<dd>python</dd>
<dd>C</dd>
<dd>C++</ dd><dt>Location</dt>
<dd>Xi'an</dd>
<dd>Chongqing</dd>
</dl>
</body>
</html>
06. Table label
Why use a table with a simple and general structure and a stable
basic structure cell row and column across rows and columns
<!--
表格
行 tr
列 td
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
07. Media elements Video elements
<!--
Audio and video
src resource path
controls control bar
autoplay autoplay
-->
<video src="../resource/video/1.mp4" controls autoplay></video>
<audio src="../ resource/audio/1.mp3" controls autoplay></audio>
08. Typesetting labels
b and strong text in bold
i and em text in italics
s and del text are displayed with a strikethrough
u and ins text are underlined
09. Links
<a href="http://www.qq.com" target="_blank">腾讯</a>
Internal links
Interlinks between internal websites, just link internal page names directly.For example <a href="index.html">Homepage</a>
10. Character code
11. Form
input control
<input type="attribute value" value="hello">
The meaning of input The <input /> tag
sets different attribute values for the single tag type attribute to specify different control types
In addition to the type attribute, there are other attributes
12. Input type new attribute value:
week <input type="week" 周