Learning reason: because the interface in wechat applet is written by HTML, which is inconsistent with Qt control, understanding html is helpful to write wechat applet, and then my tutorial is actually to take a look Rookie tutorial , because it doesn't need to be proficient. It will become familiar with it when you use it more
1. Introduction to HTML
Html is not a programming language, but a markup language, which mainly contains HTML tags and text content
- Tags: Keywords surrounded by angle brackets appear in pairs. The first tag is the start tag and the second is the end tag. For example, < < tag > content < / tag >, HTML elements usually describe the same meaning as tags
Composition of HTML
<!-- <!DOCTYPE html>Declare as HTML5 file --> <!DOCTYPE html> <!-- <html>Element is HTML The root element of the page --> <html> <!-- <head>Element contains the metadata of the document( meta)data --> <head> <!-- <meta>The element defines the page coding format as utf-8 --> <meta charset="utf-8"> <!-- <title> The element describes the title of the document --> <title>Rookie tutorial(runoob.com)</title> <!-- <head>End tag for,And<head>Element as a part --> </head> <!-- <body>Element contains visible page content --> <body> <!-- <h1>Element defines a headline --> <h1>My first title</h1> <!-- <p>Element defines a paragraph --> <p>My first paragraph.</p> <!-- <body>End tag for,And<body>Element as a part --> </body> <!-- <html>End tag for,And<html>Element as a part --> </html>
2. HTML elements
HTML elements start with the start tag and end with the end tag. The content of the element is the content between the start tag and the end tag. Some HTML elements have empty content. Empty elements are closed in the start tag (end with the end of the start tag). Most HTML elements can have attributes (I think attributes and elements are very important)
Common elements are:
| element | function |
|---|---|
| Basic element | |
| <p> | Defines a paragraph in an HTML document |
| <body> | Defines the body of the HTML document |
| <html> | Defines the entire HTML document |
| <br> | Define simple line breaks. |
| <h1>to<h6> | Define HTML title |
| <!--...--> | Define a comment |
| Format element | |
| <address> | Define the contact information (e.g. email address) of the author or owner of the document. |
| <abbr> | Define an abbreviation. Is to replace a paragraph of text |
| <b> | Define bold text |
| <bdo> | Defines the direction of the text |
| <del> | Define deleted text |
| <i> | Defines italic text |
| <small> | Defines small text |
| <u> | Define underlined text |
| <wbr> | Specify where line breaks are appropriate in the text |
| form | |
| <form> | Define an HTML form for user input |
| <input> | Define an input control |
| <textarea> | Defines a multiline text input control |
| <button> | Define button |
| <select> | Define the selection list (the drop-down list is equivalent to the ConboBox of Qt) |
| <optgroup> | Defines the combination of related options in the selection list |
| <label> | Defines the annotation of the input element |
| <fieldset> | Define the border around the elements in the form (equivalent to Qt GroupBox) |
| <legend> | Defines the title of the fieldset element |
| <datalist> | List of possible options for input element (equivalent to ListWidget with Qt added) |
| <frame> | Define the window or frame of the frameset (equivalent to QWidget) |
| image | |
| <img> | Define the image. |
| <canvas> | Draw graphics through scripts (usually JavaScript) |
| link | |
| <a> | Define a link |
| <link> | Define the relationship between documents and external resources |
| <main> | Defines the body of the document |
| <nav> | Define navigation links |
| list | |
| <ul> | Define an unordered list |
| <ol> | Define a sequence table |
| <li> | Define a list item |
| <menu> | Define menu list |
| <command> | Define the commands that the user may call |
| Style / section | |
| <style> | Defines the style information of the document |
| <div> | Define sections in the document |
| <span> | Define sections in the document (mainly for text, div mainly for blocks) |
| Meta information | |
| <head> | Define information about the document |
| <meta> | Define meta information about HTML documents |
| <base> | Define the default address or default destination for all links in the page |
| program | |
| <script> | Define client script |
| <noscript> | Define alternative content for users who do not support client-side scripting |
| <object> | Define embedded objects |
| <param> | Define the parameters of the object |
3. Properties of HTML
HTML elements can set attributes. Attributes can add additional information to the element. Attributes are generally described in the start tag. Attributes always appear in the form of name / value pairs, such as name="value". Note that attribute values should always be included in quotation marks (case and single / double quotation marks are not sensitive).
Record the attributes that individuals may use
4. Common examples
4.1,<h1>
<h1>This is a title h1</h1> <h2>This is a title h2</h2> <h3>This is a title h3</h3>
4.2,<p>
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
4.3,<href>
<a href="https://www.runoob. Com "> this is a link</a>
4.4,<img>
<img src="/images/logo.png" width="258" height="39" />
4.5,<br>
<p>this<br>paragraph<br>Demonstrates the effect of the branch</p>
4.6,id
<p> <a href="#C2 "> see Chapter 4</a> </p> <h2>Chapter 1</h2> <p>The contents of this chapter are shown here</p> <h2><a id="C4">Chapter 2</h2> <p>The contents of this chapter are shown here</p> <h2>Chapter 3</h2> <p>The contents of this chapter are shown here</p>
4.7,base
<! The links on this page will be set to by default target The value of the property is "_blank"> <base href="http://www.runoob.com/images/" target="_blank">
4.8,link
<!-- <link> Tags define the relationship between documents and external resources --> <link rel="stylesheet" type="text/css" href="mystyle.css">
4.9,img
<p>Create picture link: <a href="http://www.runoob.com/html/html-tutorial.html"> <img border="10" src="smiley.gif" alt="HTML course" width="32" height="32"></a></p>
4.10,div
<div style="color:#0000FF"> <h3>This is a div The title in the element.</h3> <p>This is a div The text in the element.</p> </div>
4.11,span
<p>My mother has <span style="color:blue">blue</span> Your eyes.</p>
Rookie tutorial Quick reference list
HTML is actually relatively simple. It's mainly about getting familiar with the rules and usage. Specific things still need to be used more