Java learning notes (No.22)

HTML5 details of Java (No.22)

1,HTML(Hyper Text Markup Language)

HTML(Hyper Text Markup Language), where "hypertext" includes "text, picture, audio, video, animation, etc.".

2. HTML5 advantages

  • 2.1. Support from world-famous browser manufacturers.
    • 2.1.1,MicroSoft.
    • 2.1.2,Google.
    • 2.1.3,Apple.
    • 2.1.4,Opera.
    • 2.1.5,Mozilla.
  • 2.2 market demand.
  • 2.3 cross platform.

3,W3C(World Wide Web Consortium)

  • 3.1 W3C, full English name "World Wide Web Consortium", Chinese name "World Wide Web Consortium".
  • 3.2 established in 1994, it is the most authoritative and influential international "neutral technical standards organization" in the field of Web technology.
  • 3.3 W3C official website( http://www.w3.org/ ), China W3C official website( http://www.chinaw3c.org/ ).

4. W3C standard

  • 4.1. Structured standard language (HTML, XML < extensible markup language >).
  • 4.2. Presentation standard language (CSS < cascading style sheets >).
  • 4.3. Behavior standards (DOM, ECMAScript < JavaScript language >).

5. HTML basic structure

The basic structure of HTML is as follows.

<!--
<!DOCTYPE html>representative"Declaration specification",That is, tell the browser to use"HTML"standard.
-->
<!DOCTYPE html>
<!--
<html>And</html>Content representation between“ HTML Web page
 -->
<html lang="en">
<!--
<head>And</head>The content between represents the "page header"
-->
<head>
...
</head>
<!--
<body>And</body>The content between represents the "main part of the page"
 -->
<body>
...
</body>
</html>

6. HTML basic Tags

The basic tags of the web page are as follows.

<!--
<!DOCTYPE html>representative"Declaration specification",That is, tell the browser to use"HTML"standard.
-->
<!DOCTYPE html>
<!--
<html>And</html>,<head>And</head>,<body>And</body>Such as "open label" and "closed label".
<br>or<br/>or<br />,<hr>or<hr/>or<hr />The corresponding label is "self closing label".
-->
<!--
<html>And</html>Content representation between“ HTML Web page
 -->
<html lang="en">
<!--
<head>And</head>The content between represents the "page header"
 -->
<head>
    <!--
    meta Stands for "descriptive tag", which describes website information. It is generally used as SEO(Search Engine Optimization,Search engine optimization)
     -->
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML,HTML5">
    <meta name="description" content="study HTML5">
    <!--
    <title>And</title>The content between represents "page title"
    -->
    <title>HTML Basic label</title>
</head>
<!--
<body>And</body>The content between represents the "main part of the page"
 -->
<body>
    <!--
    This content represents "page comment information"
    <strong>And</strong>Represents "bold labels in font style labels"
    <em>And</em>Represents "Italic label in font style label"
    <h1>And</h1>,<h2>And</h2>,<h3>And</h3>,<h4>And</h4>,<h5>And</h5>,<h6>And</h6>Stands for "title label"
    <p>And</p>Stands for "paragraph label"
    &nbsp;Stands for "space symbol in special symbol",&lt;Stands for "special symbols smaller than symbols",&gt;Represents "greater than symbol in special symbol",&copy;Stands for "copyright symbol in special symbol"
    <br>or<br/>or<br />Represents "wrap label"
    <hr>or<hr/>or<hr />Represents "horizontal line label"
     -->
    <strong>Bold labels in font style labels</strong>
    <hr/>
    <em>Italic labels in font style labels</em>
    <hr/>
    <h1 style="color: red">Primary title</h1>
    <p>Paragraph label 1</p>
    <p>Paragraph label&nbsp;2</p>
    <p>Paragraph label&nbsp;&nbsp;&nbsp;3</p>
    <p>Java Study notes&copy;copyright&lt;Xueshan Xuehai&gt;</p>
    <br>
    <hr>
    <h2 style="color: green">Secondary title</h2>
    <br/>
    <hr/>
    <h3 style="color: blue">Tertiary title</h3>
    <br />
    <hr />
    <h4 style="color: rebeccapurple">Four level title</h4>
    <hr/>
    <h5 style="color: greenyellow">Five level title</h5>
    <hr/>
    <h6 style="color: blueviolet">Six level title</h6>
    <hr/>
</body>
</html>

7. Image tag

Image label, as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Image label</title>
</head>
<body>
<!--
img Represents "image label", where the parameter“ src"For "image address"(Required,Relative addresses are generally recommended)",
Parameters“ alt"Alternate text for image(Required)",Parameters“ title"Stands for "mouse over prompt text",
Parameters“ width"Represents "image width", parameter“ height"Stands for "image height".
-->
<img src="../resources/images/20210718002.png" alt="Each major Java platform" title="with Java Major platforms as backstage" width="300" height="300">
<br/>
<a href="Hyperlinks/Anchor hyperlink.html#Anchorhyperlink "> back to anchor hyperlink</a>
</body>
</html>

8. Hyperlink tag

  • 8.1. Hyperlink between pages.

    Hyperlinks between pages, as shown below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Inter page hyperlinks</title>
    </head>
    <body>
      <!--
      a Represent“ a Label, where parameters“ href"Represents the link path(Required)",
      Where parameters“ target"Represents "in which target window does the link open", and its value is“_blank"Represents "open in new label window", and its value is“_self"Represents "open in current tab window",
      Its value is“_parent"Represents "open in parent label window", and its value is“_top"Represents "open in top level label window".
      -->
      <a href="../HTML Image label.html" target="_blank">Open in new label window</a>
      <hr/>
      <a href="../HTML Image label.html" target="_self">Opens in the current tab window</a>
      <hr/>
      <a href="../HTML Image label.html" target="_parent">Opens in the parent label window</a>
      <hr/>
      <a href="../HTML Image label.html" target="_top">Opens in the top-level label window</a>
      <hr/>
      <a href="../HTML Basic label.html" target="_blank">
          <img src="../../resources/images/20210718002.png" alt="Each major Java platform" title="with Java Major platforms as backstage" width="300" height="300">
      </a>
    </body>
    </html>
    
  • 8.2 anchor hyperlink.

    Anchor hyperlink, as shown below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Anchor hyperlink</title>
    </head>
    <body>
    <!--
    Anchor link: 1. Need an anchor tag; 2. Jump to the anchor tag
    -->
    <a name="top">Top</a>
    <a href="AnchorHyperlink">Anchor hyperlink</a>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <p>123</p><br/>
    <a href="#Top "> back to top</a>
    </body>
    </html>
    
  • 8.3. Functional hyperlink.

    Functional hyperlinks, as shown below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Functional hyperlinks</title>
    </head>
    <body>
        <!--
        Mail link
        -->
        <a href="mailto:1207697231@qq.com">Click to contact me</a>
        <!--
        QQ link
        -->
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1207697231&site=qq&menu=yes">
            <img border="0" src="http://WPA. QQ. COM / PA? P = 2:1207697231:53 "ALT =" click here to send me a message "title =" click here to send me a message "/ >
        </a>
    </body>
    </html>
    

9. Inline elements and block elements

  • 9.1. Inline elements
    • 9.1.1. The width of the content can be arranged in one line if the left and right are elements in the line.
    • 9.1.2 common inline elements, such as "P (paragraph label), H1 ~ H6 (title label), HR (horizontal split line label), form (interactive form label), table (table label), div (common block level element, which is also the main label of css layout)".
  • 9.2. Block elements
    • 9.2.1. No matter how much content, this element is exclusive.
    • 9.2.2 common block elements, such as "a (anchor label), strong (BOLD label), EM (Italic label), IMG (image label), input (input box label), span (common inline container label, defining blocks in text), textarea (multi line text input box)", etc.

10. List tag

List is a kind of display form of information resources. It can make information structured and organized, and display it in the form of list, so that visitors can get the corresponding information more quickly.

  • 10.1 unordered list tag.

    Unordered list labels, as shown below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Unordered list</title>
    </head>
    <body>
    <!--
    Unordered list
     Generally used for "navigation, sidebar", etc
    -->
    <ul>
      <li>Unordered list 1</li>
      <li>Unordered list 2</li>
      <li>Unordered list 3</li>
      <li>Unordered list 4</li>
      <li>Unordered list 5</li>
      <li>Unordered list 6</li>
      <li>Unordered list 7</li>
      <li>Unordered list 8</li>
      <li>Unordered list 9</li>
    </ul>
    </body>
    </html>
    
  • 10.2 ordered list tag.

    Ordered list labels, as shown below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ordered list</title>
    </head>
    <body>
    <!--
    Ordered list
     It is generally used in "test paper, question and answer", etc
    -->
    <ol>
      <li>Ordered list 1</li>
      <li>Ordered list 2</li>
      <li>Ordered list 3</li>
      <li>Ordered list 4</li>
      <li>Ordered list 5</li>
      <li>Ordered list 6</li>
      <li>There is a sequence table 7</li>
      <li>There is a sequence table 8</li>
      <li>Ordered list 9</li>
    </ol>
    </body>
    </html>
    
  • 10.3. Defined list tag.

    Define the list label, as shown below.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Definition list</title>
    </head>
    <body>
    <!--
    Definition list:That is, customize the list
     Among them“ dl"Represents "list label"
    Among them“ dt"For "list name"
    Among them“ dd"Represents "list content"
    It is generally applied to "the bottom of the company website", etc
    -->
    <dl>
        <dt>Study class</dt>
        <dd>Java</dd>
        <dd>Python</dd>
        <dd>C#</dd>
        <dd>C++</dd>
        <dd>C</dd>
        <dt>personnel</dt>
        <dd>Xiao Hong</dd>
        <dd>Naranjito </dd>
        <dd>Xiao Huang</dd>
        <dd>Little green</dd>
        <dd>Blue </dd>
    </dl>
    </body>
    </html>
    

11. Table tag

Benefits of table labels: "simple, universal and stable structure".

Basic structure of table label: "cell, row, column, cross row, cross column".

Its sample code is shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table label</title>
</head>
<body>
<!--
table Represents "table label"
tr For "line"
td Represents "column"
rowspan Stands for "cross line"
colspan Stands for "cross column"
-->
<table border="1px">
    <tr>
    <td colspan="3">Cross column</td>
    </tr>
    <tr>
        <td rowspan="2">enjambment</td>
        <td>Row 2 column 1</td>
        <td>Row 2 column 2</td>
    </tr>
    <tr>
        <td>Row 3 column 1</td>
        <td>Row 3 column 2</td>
    </tr>
</table>
</body>
</html>

12. Video and audio

Video and audio (media elements), as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video and audio(Media element)</title>
</head>
<body>
<!--
Video: Video element
src: Resource path
controls: Control bar
autoplay: Auto play
-->
<video src="../resources/medias/StartMenu_Win10.mp4" controls autoplay></video>
<hr/>
<!--
audio: Audio element
src: Resource path
controls: Control bar
autoplay: Auto play
-->
<audio src="../resources/medias/Sleep_Away.mp3" controls autoplay></audio>
</body>
</html>

13. Page structure analysis

Page structure analysis is shown in the following table.

Yuansu namedescribe
headerThe content of the header area (for a page or an area in a page)
footerMark the content of the foot area (for the entire page or an area of the page)
sectionA separate area in a Web page
articleIndependent article content
asideRelated content or application (often used in the sidebar)
navNavigation auxiliary content

Page structure analysis sample code, as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page structure analysis</title>
</head>
<body>
<header>
  <h1>Web page header</h1>
</header>
<section>
  <h2>Web page subject</h2>
</section>
<article>
  <h3>Web content</h3>
</article>
<aside>
  <h4>sidebar </h4>
</aside>
<nav>
  <h5>navigation bar</h5>
</nav>
<footer>
  <h1>Web foot</h1>
</footer>
</body>
</html>

14. Iframe inline framework

Iframe inline framework, as shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Inline framework</title>
</head>
<body>
<!--
iframe: Inline framework
src: Reference page address
frameborder: Frame border
name: Frame ID
width: width
height: height
-->
<iframe src="https://gitee.com/mrxiaohu/openclass" frameborder="no" name="Iframe1" width="1200px" height="420px"></iframe>
<hr/>
<iframe src="https://gitee.com/xueshanxuehai/starred" frameborder="no" name="Iframe2" scrolling="no" allowfullscreen="true"></iframe>
<hr/>
<a href="https://Www.bilibilibili.com/video/bv1x4411v75c "target =" iframe1 "> click the jump link 1</a>
<a href="https://Jingyan. Baidu. COM / article / e6c8503cca1302a54f1a18d3. HTML "target =" iframe2 "> Click jump link 2</a>
</body>
</html>

15. Form tag

Form label elements, as shown in the following table.

attributeexplain
typeSpecify the type of form elements, such as text, password, checkbox, radio, submit, reset, file, hidden, Image and button. The default is text.
nameSpecifies the name of the form element.
valueSpecify the initial value of the form element, and a value must be specified when the type is radio.
sizeSpecifies the initial width of the form element. When the type is text or password, the size of the form pixel is in characters, while the width of other types is in pixels.
maxlengthThe maximum number of characters entered when type is text or password.
checkedWhen the type is radio or checkbox, specify whether the button is selected.

The sample code of the form label is shown below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form label</title>
</head>
<body>
<h1>register</h1>
<!--
form: Form label
action: The location of the form submission can be a website or a request processing address.
method: Form submission method, only“ get"And“ post"In two ways,
        get Submission method: it can be submitted in url The submitted information is not safe but efficient;
        post Submission method: cannot be submitted in url It is safe but inefficient to see the submitted information in, which is suitable for transmitting large files;
-->
<form action="" method="get">
    <!--
    input type="text": Text input box
    name: Text entry box name
    value: Default initial value of text input box
    maxlength: The maximum number of characters entered in the text input box
    size: The length and size of the text input box(In characters)
    readonly: read-only
    hidden: hide
    disabled: Disable
    placeholder: Text input box prompt
    required: Judgment of non empty text input box
    pattern: Text input box regular expression
    -->
    <p>Note 1:<input type="text" name="bz1" value="Note 1" readonly></p>
    <p>Note 2:<input type="text" name="bz2" value="Note 2" hidden></p>
    <p>Note 3:<input type="text" name="bz3" value="Note 3" disabled></p>
    <p>account number:<input type="text" name="uid" maxlength="20" size="20"
             placeholder="Please enter the account number" required pattern="^[a-zA-Z0-9_-]{3,16}$"></p>
    <!--
    input type="password": Password input box
    name: Password input box name
    value: Default initial value of password input box
    maxlength: The maximum number of characters entered in the password entry box
    size: Length and size of password input box(In characters)
    -->
    <p>password:<input type="password" name="pwd" maxlength="15" size="20" placeholder="Please input a password"></p>
    <!--
    input type="radio": Radio box label
    name: Group name of radio box
    value: Value of radio box
    checked: Select the currently assigned radio box
    -->
    <p>Gender:
        <input type="radio" name="sex" value="boy" checked/>male
        <input type="radio" name="sex" value="girl"/>female
    </p>
    <!--
    input type="checkbox": Multi box label
    name: Group name of the multi box
    value: The value of the multi check box
    checked: Select the currently specified multiple check box
    -->
    <p>interest:
        <input type="checkbox" name="interest" value="eat"/>having dinner
        <input type="checkbox" name="interest" value="sleep"/>sleep
        <input type="checkbox" name="interest" value="study" checked/>study
        <input type="checkbox" name="interest" value="run"/>run
    </p>
    <p>Button:
        <!--
        input type="button": Normal button
        name: Common button name
        value: Normal button text value
        -->
        <input type="button" name="btn1" value="Normal button">
        <!--
        input type="image": Image button
        name: Image button name
        value: Image button text value
        src: Reference image resource path of image button
        width: Image button width
        height: Image button height
        -->
        <input type="image" name="btn2" value="Image button" src="../resources/images/20210718002.png" width="60px"
               height="20px">
    </p>
    <p>country:
        <!--
        select: List box
        name: List name
        id: list ID
        -->
        <select name="select" id="s1">
            <!--
            option: List box options
            value: List box option value
            selected: Current list box selected value
            -->
            <option value="china" selected>China</option>
            <option value="America">U.S.A</option>
            <option value="Britain">britain</option>
            <option value="Russia">Russia</option>
        </select>
    </p>
    <p>Feedback:
        <!--
        textarea: Text field
        name: Text field name
        id: Text field ID
        cols: Number of text field columns
        rows: Number of lines in text field
        -->
        <textarea name="textarea" id="ta1" cols="30" rows="10" placeholder="Please enter feedback"></textarea>
    </p>
    <p>
        <!--
        input type="file": File domain
        -->
        <input type="file" name="files">
        <input type="button" name="upload" value="Upload file">
    </p>
    <p>Email:
        <!--
        input type="email": Mailbox input box
        name: Mailbox input box name
        value: Default initial value of mailbox input box
        maxlength: Maximum number of entries in the mailbox entry box
        size: Length and size of mailbox input box
        -->
        <input type="email" name="email" value="1207697231@qq.com" maxlength="30" size="30"
        pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$">
    </p>
    <p>URL: 
        <!--
        input type="url": url Input box
        name: url Input box name
        value: url Input box default initial value
        maxlength: url Maximum number of entries in the input box
        size: url Enter the length and size of the box
        -->
        <input type="url" name="url" value="https://gitee.com/xueshanxuehai/starred" maxlength="50" size="50">
    </p>
    <p>Quantity of goods:
        <!--
        input type="number": Digital input box
        name: Digital input box name
        max: Maximum value of digital input box
        min: Minimum value of digital input box
        step: Digital input box offset
        value: Default initial value of digital input box
        -->
        <input type="number" name="number" max="100" min="0" step="1" value="1">
    </p>
    <p>Volume:
        <!--
        input type="range": slider
        name: Slider name
        max: Slider Max
        min: Slider min
        step: Slider offset
        value: Slider default initial value
        -->
        <input type="range" name="voice" max="100" min="0" step="1" value="50">
    </p>
    <p>Search:
        <!--
        input type="search": search
        -->
        <input type="search" name="search">
    </p>
    <p>
        <!-- Enhance mouse availability -->
        <label for="mark">Enhance mouse availability</label>
        <input type="text" id="mark">
    </p>
    <p>
        <!-- input type="submit": Submit button -->
        <input type="submit">
        <!-- input type="reset": Reset button -->
        <input type="reset">
    </p>
</form>
</body>
</html>

Reference data: Regular expression quick look-up table

Learning website address (i.e. "learning website address"): HTML5 details of Java

Tags: Java html5 html

Posted on Tue, 14 Sep 2021 22:48:11 -0400 by rajivgonsalves