1. Introduction to HTML

HTML (Hypertext Markup Language) is a markup language used to describe web page documents.

HTML markup tags are often called HTML tags (HTML tags). HTML provides many tags, such as paragraph tags, title tags, hyperlink tags, picture tags, etc. What content needs to be defined in the web page can be described with the corresponding HTML tags.

2. HTML structure

 1 <!DOCTYPE html><!-- 表示HTML5文档协议声明标签，协议的不同会影响整个页面的显示效果 --> 2 <html><!-- <html>表示文档标签 --> 3 <head><!-- <head>标签表示文档的头部标签，在<head>标签中的信息是用于给浏览器识别的内容，如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 --> 4     <meta charset="UTF-8"> 5     <!-- 这是注释，不会显示在网页上，注释的内容写在符号之间 --> 6     <title>第一个HTML文件</title><!-- <title>表示该文档的标题 --> 7 </head> 8  9 <body><!-- <body>标签为我们在浏览器中看到的内容 -->10     第一个HTML文件11 </body> 12 </html>

Copy after login

The content of the comment is written between the symbols , the running effect in the browser is as follows

3, HTML header tag

3.1, tag

tag is located at the front of the document and is used to indicate to the browser which HTML or XHTML standard specification the current document uses. Mainly used as the basis for browsers to parse document tags.

The tag is related to browser compatibility. If you delete , it means that the browser will display the content of the HTML page. At this time, the page may have as many display effects as there are IE6, IE7, IE8, Firefox2, Firefox3, and Chrome, and this is not allowed.

3.2. tag

tag is located after the tag, also called the root tag, which is used to inform the browser It is an HTML document in itself. The tag marks the beginning of the HTML document, and the tag marks the end of the HTML document. Between them is the head and body content of the document. All tags must be written between the two closing tags and . You can set the main language of the current document through the lang attribute to help search engines parse the document. For example: indicates that the current document language is Chinese.

3.3. tag

tag is used to define the head information of the HTML document, also called the head tag, followed by After the tag. The content defined by the head tag is only provided to the browser and is not used for user presentation. is mainly used to encapsulate other tags located at the head of the document, such as , <meta>, <link> and <style>, etc., used to describe the title, author and other documents of the document. Relationships etc. <span style="color: #ff00ff; font-size: 16px;">An HTML document can only contain a pair of <head> tags</span>, and the data contained in the header of most documents will not actually be displayed as content on the page. <br><br></p> <h4>3.4. <meta> tag</h4> <p><meta> tag can provide meta-information about the page, such as for search engines and update frequency. Degree description and keywords. The </p> <p><meta> tag is located at the head of the document and does not contain any content. The <meta> tag's properties define the name/value pairs associated with the document. For example: </p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="keywords" content="HTML,ASP,PHP,SQL"></pre><div class="contentsignin">Copy after login</div></div></div> <p>"keywords" is a frequently used name. It defines a set of keywords for the document. Some search engines use these keywords to classify documents when they encounter them. <br><br></p> <h4>3.5. <title> tag </h4> <p><title> tag is used to define the title of the HTML page, that is, to give the web page a name and must be located in the <head> ; within the mark. An HTML document can only contain a pair of <title> tags. The content between will be displayed in the title bar of the browser window. Its basic grammatical format is as follows:

<title>网页标题名称</title>

Copy after login

The title tag is crucial to the SEO of the website. The quality of the title directly affects the SEO of the website.

##3.6. tag

The most commonly used usage of the tag is to link external CSS files,

<link rel="stylesheet" type="text/css" href="theme.css?1.1.11" />

Copy after login

In addition, it can also be used to introduce the icon icon of the website

<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" />

Copy after login

4. HTML content tag

4.1. Title tag

The title tag uses

- defines the largest heading.
defines the smallest heading, from
-
, with decreasing importance relative to the current document. It is recommended that the h1 tag appear at most once in the entire page (of course it can be more, but it is not conducive to search SEO). Title tags are used to reflect the importance of the document content. Do not use titles just to produce bold or large text.

　

Note: The browser will automatically add blank lines before and after the title.

4.2. Paragraph tags

Paragraphs are defined through
tags. The p tags will not share a line with each other, but will occupy one or more lines of space.

　　　

4.3. Horizontal line mark

hr tag means inserting a horizontal line in the page, hr tag is a single tag , No closing tag is required.

　　

4.4. Line break tag

A simple line break character can be inserted, which is also a single tag , no closing tag is required.

　

4.5. span tag

tag is used to combine inline elements in the document. The span tag can be combined with other span tags Labels share one line. Typically, span tags need to be styled, otherwise they will be indistinguishable from other text on the page.

　

4.6. div tag

elements to combine block-level elements so that they can be formatted using styles.

　

4.7. img tag

tag embeds an image into a web page. Technically speaking, < The ;img> tag does not insert an image into the web page, but links the image from the web page. The tag creates a placeholder space for the referenced image.

The tag has two required attributes: the src attribute and the alt attribute.

　

5. HTML advanced tags

5.1. List tags

5.1.1.Unordered list

The unordered list is represented by the ul tag, and the list items are represented by the li tag. There is no order level between the various list items in the unordered list, they are parallel

　
5.1.2. Ordered list
The ordered list is represented by the ol tag, and the list items are also represented by the li tag. Each list item
is defined in a certain order

　##5.1.3. Customized list

Customized list Often used to explain and describe terms or nouns. There are no bullets
before the list items of the definition list.
　

5.2. Table tag

A simple HTML table consists of a table element and one or more tr, th or td elements. The tr element defines the table rows , the th element defines the table header, and the td element defines the table unit. A simple example is as follows:

　

5.3. Form tag

5.3.1 , Form tag

Field tag of the form, used to wrap the content of the entire form. A form is a virtual list for users to submit data to the backend. The form generally consists of text boxes, drop-down lists, radio selections, multi-selects, text fields, etc. The Action attribute is used to specify the address pointed to the backend when the current form is submitted.
　　

5.3.2. Input tag

The Input tag is a text box, radio selection, multi-selection, button, etc. Different values of the Type attribute determine the role of the input tag.

Text box: text
Password box: password
Single selection: radio
Multiple selection: checkbox
Button: button
Submit button: submit
Reset button: reset

The checked attribute of the Input tag has only one checked attribute value, and the attribute value can be omitted. In radio buttons and multi-select buttons, it means that this button is selected.

　

5.3.3. Select tag

The select element can create a single-select or multi-select menu, tag in the ; element defines the options available in the list.

　

Multipe: It is also a single attribute. There is only one multiple value. Setting this attribute means that the select tag behaves as a list tag. Otherwise, it represents the drop-down list label.

5.3.4. Text area label

Textarea text area label is a label used to enter a large amount of text. The cols of the text field label indicates how many columns of characters can be accommodated. How many rows of data Rows holds.

　

5.3.5, Lable label

Lable label allows the label to point to when the label text is clicked. The form label gets focus.

Two ways: 1. Use the for attribute to point to the form label; 2. Use the label label to wrap the form label.

　

The above is the detailed content of HTML introductory tutorial. For more information, please follow other related articles on the PHP Chinese website!