Table of contents
2. The basic structure of HTML
2. Introduction to common tags in HTML
5. Table label (used to display data)
6. Form label (used to receive data)
1. Basic syntax of HTML
1. What is HTML?
● HTML is the acronym for HyperText Mark-up Language , that is, Hypertext Markup Language .
● HTML is not a programming language, but a markup language.
●Hypertext refers to a hyperlink, and a tag refers to a label. It is a language used to make web pages. This language is composed of individual labels .
●The file made in this language is saved as a text file, and the extension of the file is .html or .htm
●“A html document is also called a Web page, which is actually a web page. When an html file is opened with an editor, it displays text. It can be edited in the form of text.
●If you open it with a browser, the browser will render the file as a webpage according to the label description , and the displayed webpage can jump from one webpage link to another.
2. The basic structure of HTML
● HTML is composed of: tags and content .
●The syntax of HTML tags (tags) is enclosed by < and >.
● There are two types of HTML tags:
double tags : <tag name>....</tag name> and single tag : <tag name/>
●Attributes can also be added to HTML tags:
<tag name attribute name 1="value 1" attribute name 2 = "value 2" attribute name n = "value n">...</tag name>
●HTML tag specification: tag name is lowercase, attributes use double quotes, and tags must be closed. If the specification is not followed, the browser will not report an error, and will try to parse it as much as possible, and the worst case will not display the effect.
< ! DOCTYPE html><!--头部，是html的类型，此处代表的是采用html5版本，浏览器可以识别解析-->
<html lang="en">
<head>
<meta charset="UTF-8"><title>网页标题</title>
<!--此处可以写各种页头属性设置、CSS样式和Javascript脚本等...-->
</ head>
<body>
网页显示内容
</body>
</ html>3. HTML comments
Comments can be inserted in html code documents, which are instructions and explanations for the code
<!--This is the only HTML comment -->
4. Head header information setting in HTML
● Set webpage encoding: <meta charset="utf-8" />
● Keywords: <meta name="Keywords" content="Keywords"/>
● Description: <meta name ="Description" content="Introduction, description"/>
● Webpage title: <title>Title of this webpage</title>
● Import CSS file:: <link type="text/css" rel="stylesheet" href=" **.css"/>
● CSS code: <style type="text/css">embed css style code</style>
● JS file or code: <script >...</script>
2. Introduction to common tags in HTML
1. Text label
● <hn>..</hn> where n is a value from 1 to 6. Heading tags (bold, separate lines)
●<i>...</i>斜体
● <em>...</em> emphasized italics
● <b>.…/b> Bold
● <strong ...</strong> Bold emphasis
● Title of <cite></cite> work (citation)
● <sub>...</sub> subscripts
● <sup>...</sup> superscript
● <del>...</del> strikethrough
2. Formatting tags
● <br/> Line break
● <p>….</p> Change Paragraph
● <hr /> Horizontal dividing line
● List:
● <ul>...</ul> unordered list
● <ol>..</ol> ordered list where type type value: Aali 1 start attribute indicates the starting value
● <li>... </li> List Items
● <dl>..</dl> Custom List. <dt>...</dt> Custom List Header. <dd>...</dd> Custom List Content
● <div>...</div> is often used to combine block-level elements, so that these elements can be formatted by CSS <span...</span> is often used to contain text, you can use CSS to define it style, or manipulate it with JavaScript.
3. Image tags
● <img/> inserts an image into a webpage
● Attributes:
● src : image name and url address
● alt : prompt message when the image fails to load. title: text prompt property
● width : image width
● height: image height ● border : border line thickness
4. Hyperlink label
●<a href="">...</a> hyperlink tag, the attributes are as follows:
● href : required, refers to the link jump address
● target: indicates the opening method of the link:
● _blank new window
● _parent parent window
● _self this window (default)
● _top top-level window
● framename window name
● title : text prompt attribute (details)
●Anchor link:
● Define an anchor point: <a id="a1"></a> used to be <a name="a1"></a>
● Use anchor point: <a href="#a1">jump to a1</a>
5. Table label (used to display data)
● <table>..</table> table tag: attributes: border (the thickness of the table border), width, cellspacing (the spacing between cells). cellpadding (the distance between the contents of the cell and the cell border)
● <caption>...</caption> table title
● <tr>...</tr> row label
● <th>.../th> column header label (the content will be bold and displayed in the center) ● < td>...</td> Column label: cross-row attribute: rowspan cross-column attribute: colspan (the function of merging cells) ● <thead>...</thead> header ● <tbody>...</ tbody> table body
●<tfoot>...</tfoot>表尾
Note: The content in the table must be placed in the <th>, <hd> tags, otherwise it will be squeezed out of the table
6. Form label (used to receive data)
● <form>...</form> form tag <form action="" (fill in the target address, it will jump to this address after filling out the form) method="post/get" (post refers to jumping to the page After that, the content of the form is not displayed in the URL bar , get refers to displaying the content of the form in the URL bar after jumping to the page )>
● The <input /> form item tag input defines an input field in which the user can enter data.
● The <select>...</select> tag creates a drop-down list.
● <textarea>..</textarea> multi-line text input area
● <button>...</button> tags define buttons.
● The <fieldset>--</fieldset> element groups related elements within a form.
● The <legend></legend> tag defines titles for the <fieldest>, <figure> and <details> elements.
● <datalist> html5 tag--The <datalist> tag defines a list of optional data.
● <optgroup> html5 tag--The <optgroup> tag defines an option group.
7. Inline frame tags
●<iframe>...</iframe> inline frame
properties:
src : specifies the URL of the document displayed in the iframe
name : Specifies the name of the iframe
height: Specifies the height of the iframe.
width : defines the width of the iframe.
frameborder : Specifies whether to display a border around the frame.
●For example: <iframe src="1.html" name="myframe" width="700" height="500"></iframe>
8. Multimedia tab
● <audio>…</audio> audio tag
● <video>…</video> video tag
● tag for playing Flash
<embed src="./images/haowan.swf" width="300" height="300" />
For some specific usage, you can take a look if you are interested.