Article

Java learning notes (No.22)

HTML5 details of Java (No.22) 1,H...
1,HTML(Hyper Text Markup Language)
2. HTML5 advantages
3,W3C(World Wide Web Consortium)
4. W3C standard
5. HTML basic structure
6. HTML basic Tags
7. Image tag
8. Hyperlink tag
9. Inline elements and block elements
10. List tag
11. Table tag
12. Video and audio
13. Page structure analysis
14. Iframe inline framework
15. Form tag
Reference data:
Learning website address (i.e. "learning website address"):
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:[email protected]">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 namedescribeheaderThe 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 pagearticleIndependent article contentasideRelated 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.

attributeexplaintypeSpecify 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_-]$"></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="[email protected]" maxlength="30" size="30" pattern="^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.])$"> </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

14 September 2021, 22:48 | Views: 4394

Add new comment

For adding a comment, please log in
or create account

0 comments