Front end learning HTML5-2021-09-05

HTML5 learning

HTML explanation

  • First knowledge of HTML
  • Web page basic Tags
  • Images, hyperlinks, web layout
  • List, table, media element
  • Form and form application
  • Form primary validation

What is HTML

HTML: Hyper Text Markup Language

Hypertext includes text, pictures, audio, video, animation, etc

History of HTML

HTML 5, which provides some new elements and some interesting new features, but also establishes some new rules. The establishment of these elements, features and rules provides many new web page functions, such as using web pages to dynamically render graphics, charts, images and animation, and directly using web pages to play videos without installing any plug-ins.

Advantages of HTML5

  • World famous browser manufacturers' support for HTML5
    • Microsoft
    • Google
    • Apple
    • Opera
    • Mozilla
  • Market demand
  • Cross platform

W3C standard

  • W3C
    • World Wide Web Consortium
    • Founded in 1994, it is the most authoritative and influential international neutral technical standards organization in the field of Web technology
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  • W3C standards include
    • Structured standard language (HTML,XML)
    • Presentation standard language (CSS)
    • Standards of conduct (DOM, ECMAScript)

Common IDE

  • Notepad
  • Dreamweaver
  • IDEA
  • WebStorm
  • ...

HTML basic structure

< body >, and other paired tags are called open tags and closed tags respectively. The tags presented separately (empty elements), such as

; Means to close an empty element with /

Basic information of web page

  • DOCTYPE declaration
  • label
  • label
<!--DOCTYPE:Tell browser,What specifications are we going to use -->
<!DOCTYPE html>
<html lang="en">
<!--- head The tag represents the header of the web page -->
<head>
    <!-- meta Descriptive tag, which is used to describe some information of our website  -->
<!-- meta Generally used to do SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="Nineteen bitches">
    <meta name="description" content="Come on, hi, PIP!">
        <!-- title Page title   -->
    <title>My first page</title>
</head>
<body>
<!-- body The tag represents the main body of the web page -->
Hello World!

</body>
</html>

Web page basic Tags

  • Title label
  • Paragraph label
  • Wrap label
  • Horizontal line label
  • Font style
  • Label notes and special symbols
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic label learning</title>
</head>
<body>
<!-- Title label -->
<h1>Primary label</h1>
<h2>Secondary label</h2>
<h3>Tertiary label</h3>
<h4>Four level label</h4>
<h5>Five level label</h5>
<h6>Six level label</h6>

<!-- Paragraph label -->
<p>Two tigers, two tigers,</p>
<p>Run fast, run fast,</p>
<p>One without eyes,</p>
<p>One without a tail,</p>
<p>How strange! How strange!</p>
<p>Two tigers, two tigers,</p>
<p>Run fast, run fast,</p>
<p>One has no ears,</p>
<p>One without a tail,</p>
<p>How strange! How strange!</p>
<!-- Horizontal line label-->
<hr/>

<!-- Wrap label -->

Two tigers, two tigers,<br/>
Run fast, run fast,<br/>
One without eyes,<br/>
One without a tail,<br/>
How strange! How strange!<br/>
Two tigers, two tigers,<br/>
Run fast, run fast,<br/>
One has no ears,<br/>
One without a tail,<br/>
How strange! How strange!<br/>

<!-- Bold, italic -->
<h1>Font style label</h1>
Bold:<strong>I love you</strong><br/>
Italics:<em>I love you </em>
<br/>
<!--Special symbols-->
Space:
empty&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Grid:
<br/>
<!--is-greater-than symbol-->
&gt;
<br/>
<!--Less than symbol-->
&lt;
<br/>
<!--Copyright symbol-->
&copy;Copyright 19
<!--
Special symbol memory mode
&   ;
-->

</body>
</html>

Images, hyperlinks, web layout

Image label

Common image formats

  • JPG
  • GIF
  • PNG
  • BMP
  • ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image label learning</title>
</head>
<body>
<!--img study
src: Picture address (Required)
     Absolute address
     ../   --Upper level directory
alt:Picture name(Required)
-->

<img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">

</body>
</html>

Link label

  • Text hyperlink
  • Image hyperlink

Hyperlinks

  • Links between pages
    • Link from one page to another
  • Anchor link
  • Functional links
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link label</title>
</head>
<body>
<!--use name Mark-->
<a name="top">Top</a>

<!--a label
href : Required,Indicates that you want to jump to that page
target: Indicates where the window opens
      _blank  Open in new tab
      _self   Open in your own web page
-->

<a href="1.My first page.html" target="_blank">Click me to jump to page 1</a>
<a href="https://www.baidu.com" target="_ Self "> Click to jump to Baidu</a>
<br/>
<a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a>

<p><a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a>
</p><p><a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a>
</p>
<p><a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a></p>
<p><a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a></p>
<p>
    <a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a></p>
<p><a href="1.My first page.html">
    <img src="../resources/image/1.png" alt="Nineteen pictures" title="Hover text" width="500" height="200">
</a></p>
<!--Anchor link
1.An anchor tag is required
2.Jump to tag
#
-->
<a href="#Top "> back to top</a>
<a name="down">down</a>


<!--Functional links

Mail link: mailto:
QQ link
-->
<a href="mailto:wyy19666@126.com">Click to contact me</a>


<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1968916211&site=qq&menu=yes">
    <img border="0" src="http://WPA. QQ. COM / PA? P = 2:1968916211:41 "ALT =" Hello, add me to browse good things "title =" Hello, add me to browse good things "/ ></a>
</body>
</html>

Inline and block elements

  • Block element
    • No matter how much content, this element has one row
    • (p, h1-h6...)
  • Inline element
    • The width of the content extension. The left and right are elements in the line, which can be arranged in one line
    • (a. strong. em...)

List, table, media element

list

  • What is a list
    • List is a form of display of information resources. It can make the information structured and organized, and display it in the form of list, so that visitors can get the corresponding information more quickly
  • Classification of lists
    • Unordered list
    • Ordered list
    • Definition list
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List learning</title>
</head>
<body>
<!--Ordered list
 Scope of application:test paper,Q & A ....
-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>Operation and maintenance</li>
    <li>C</li>
    <li>c++</li>
</ol>

<hr/>
<!--Unordered list
 Application: navigation,sidebar  ...
-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>Operation and maintenance</li>
    <li>C</li>
    <li>c++</li>
</ul>

<!--Custom list
dl: label
dt: List name
dd: List content

Bottom of company website
-->
<dl>
    <dt>subject</dt>

    <dd>java</dd>
    <dd>python</dd>
    <dd>Linux</dd>
    <dd>C</dd>
    <dd>C++</dd>

    <dt>position</dt>

    <dd>Beijing</dd>
    <dd>Shanghai</dd>
    <dd>Shenzhen</dd>
    <dd>Tianjin</dd>
    <dd>Zhengzhou</dd>
</dl>

</body>
</html>

form

  • Why use forms
    • Simple and general
    • Structural stability
  • Basic structure
    • Cell
    • column
    • enjambment
    • Cross column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form learning</title>
</head>
<body>
<!--form table
 that 's ok   tr    rows
 column   td
-->

<table border="1px">
    <tr>
<!--  colspan Cross column       -->
        <td colspan="3">&nbsp;&nbsp;Student achievement</td>
    </tr>
    <tr>
<!--   rowspan enjambment     -->
        <td rowspan="2">nineteen</td>
        <td>chinese</td>
        <td>100</td>
    </tr>
    <tr>
        <td>mathematics</td>
        <td>100</td>
    </tr>
    <tr>
    <!--   rowspan enjambment     -->
    <td rowspan="2">eighteen</td>
    <td>chinese</td>
    <td>100</td>
    </tr>
    <tr>
        <td>mathematics</td>
        <td>100</td>
    </tr>

</table>

</body>
</html>

Media element

Video and audio

  • Video element
    • video
  • Audio element
    • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media element</title>
</head>
<body>
<!--Audio and video
src:    Resource path
controls: Control bar
autoplay:  Auto play

-->

<video   src="../resources/video/001 Guidance.mp4" controls autoplay ></video>

<audio src="../resources/audio/Falling in love alone(Lin Yin%20remix).mp3" controls autoplay ></audio>
</body>
</html>

Tags: html5 html

Posted on Sun, 05 Sep 2021 23:46:34 -0400 by BhA