preface
The full name of HTML is hypertext markup language, which is a markup language. It includes a series of labels, which can unify the document format on the network and connect the scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can explain text, graphics, animation, sound, tables, links, etc.
Tip: the following is the main content of this article. The following cases can be used for reference
1, What is HTML?
1. Characteristics of HTML
Hypertext markup language document production is not very complex, but it has powerful functions. It supports the embedding of files in different data formats, which is also one of the reasons why the world wide web (WWW) is popular. Its main features are as follows:
1. Simplicity: hypertext markup language version upgrade adopts superset mode, which is more flexible and convenient.
2. Extensibility: the wide application of hypertext markup language brings requirements such as strengthening functions and adding identifiers. Hypertext markup language adopts the way of subclass elements to ensure system expansion.
3. Platform independence: although personal computers are popular, many people use MAC and other machines. Hypertext markup language can be used on a wide range of platforms, which is another reason for the prevalence of the world wide web (WWW).
4. Generality: in addition, HTML is the general language of the network, a simple and general all set markup language. It allows web producers to create complex pages of text and pictures that can be viewed by anyone else on the Internet, no matter what type of computer or browser they use.
2.HTML editing method
HTML is actually text, which needs the explanation of the browser. Its editor can be divided into the following types:
1. Basic text and document editing software can be written using Microsoft's own Notepad or WordPad. Of course, you can also write it with WPS or Word, but please use. htm or. html as the extension when saving, so that the browser can recognize it and explain it directly.
2. Semi WYSIWYG software, such as fck editor, e-webeditor and other online web page editors; Special recommendation: Sublime Text code editor (developed by Jon Skinner, Sublime Text2 charges but can be tried indefinitely).
3. WYSIWYG software, the most widely used editor, can make web pages without knowing HTML, such as AMAYA (production unit: World Wide Web Alliance); FRONTPAGE (produced by Microsoft); Dreamweaver (produced by Adobe). Microsoft Visual Studio (production company: Microsoft): compared with semi WYSIWYG software, WYSIWYG software has faster development speed, higher efficiency and stronger intuitive performance. Any modification can be displayed only by refreshing. The disadvantage is that the generated code structure is complex, which is not conducive to the realization of advanced functions such as multi person cooperation and accurate positioning of large websites.
2, Basic format of HTML
1. Basic structure of HTML body format
<!DOCTYPE html> <html> <head> <mate charset="utf-8"/> <title>title</title> </head> <body> primary coverage </body> </html>
The whole HTML format is divided into two parts, one is the head part and the other is the body part. The head part is used to write web page style and the body part is used to write web page theme
2. Common labels (the changed contents are written in the middle of the paired labels):
<head></head>Defines the information for the document <title></title>Defines the title of the document <link></link>Defines the relationship between a document and external resources <style></style>Defined HTML Style files for documents <h1></h1>Title Tag ... <h6></h6> <p></p>Paragraph label <b></b> <strong></strong>Bold <i></i>tilt <br/>Line feed Space <img src="" alt="" title=""/> Picture[ gif，png，jpg]src:Link address of picture alt: The prompt text displayed in the original position of the picture when the picture fails to load title: The prompt text displayed when the mouse hovers <a href="" target=""></a> Hyperlinks href: Link address target: The opening method of opening a new web page is this page by default <div></div> layer
3.css Style:
Inline style: < Tag style = "attribute 1: attribute value 1; attribute 2: attribute value 2;..." > < / tag >
Internal style: add in head
4. Selector:
(1)Label selector: in<>Tags in can be used as label selectors
Syntax:
<style>
sign{
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
</style>
(2)class Selector: must be in style It is declared in, referenced in the label, and used when declaring“."Declaration, multiple class Selectors can act on one tag at a time.
Syntax:
<style>
.color1{
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
.color2{
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
</style>
<p class= "color1 color2">M</p>
id Selector: must be in style It is declared in, referenced in the label, and used when declaring“#”For declaration, it is unique. Keywords cannot be used when naming
Syntax:
<style>
#color1{
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
#color2{
Attribute 1: attribute value 1;
Attribute 2: attribute value 2;
}
</style>
<p id= "color1">M</p>
5. Common css attributes:
width: Width value px/% height: High value px/% background-color= background color font-size Font size (default 16) px) font-weight: bold；Bold font line-height Row height color Font color text-align: center/left/right Text centered/be at the left side/be at the right border: Border width border color border style; border box-showdow: The position of horizontal shadow, the position of vertical shadow, the distance of Gaussian blur, the width of shadow, the color and transparency of shadow, and the style of shadow border-radius: Border fillet transform: rotate(10deg) scale(1.2); Animation, rotating animation units deg Zoom animation transtion: all 0.3s； Transition animation, units ms/s margin: Margin padding: padding
6. Floating
Float: left; float left
Float: right; right float
Function: by floating, we can make block elements displayed on the same line
7. List
Unordered list <ul> <li></li> <li></li> ... </ul> Ordered list type Value of: 1 a,A,i,I <ol type=""> <li></li> <li></li> </ol> Custom list <dl> <dt>noun</dt> <dd>explain</dd> </dl>
8.css Style:
References to external styles <link href="Address of external style file"></link> Underline: text-decoration: none; Remove the default style of the list: list-style: none;
9. Background color
background: Background color background picture link address background picture tiling mode background picture horizontal position background picture vertical position
Parameter 2: url("")
Parameter 3: default repeat，no-repeat no-repeat repeat-x tile horizontally repeat-y vertical
Parameter 4: default left，Value left/right/center/px/%
Parameter 5: default top，Value top/bottom/center/px/%
10.position positioning
There are four orientations for positioning: left,top,right,bottom Absolute positioning: position: absolute； Feature: the reference is the parent element with positioning attribute and does not occupy the original position (away from the document flow) Relative positioning: position: relative； Features: the reference object is its original position and occupies its original position (not separated from the document flow). Generally, it is used as a containing block Fixed positioning: position: fixed； Feature: the current window of the reference object. Its position is independent of the parent element and the current position.
3, HTML static web page display
1. Use HTML basic elements to realize title, text, paragraph, picture, hyperlink, table, etc
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body background="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.apclc.com%2Fd%2Ffile%2Fmoban%2F62871%2Fimg%2Flitpic.jpg&refer=http%3A%2F%2Fwww.apclc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638102417&t=100ce68cf4fa82c96346265cbf1fe5c1"> <table align="center" border="10" bordercolor="#0000ff" width="700" height="150px" bgcolor="pink" cellspacing="5px" cellpadding="25px"> <caption><h1>Final transcript</h1><caption> <tr> <th>subject</th> <th>achievement</th> <th>Total score</th> </tr> <tr> <td>data structure</td> <td>99</td> <td rowspan="3">292</td> </tr> <tr> <td>operating system</td> <td>84</td> </tr> <tr> <td>computer network</td> <td>90</td> </tr> <tr> <td>Equal share</td> <td colspan="2">91</td> </tr> </table> <div align="center"> <p><big><big>I've heard the four most valuable words in the world:One is to believe, the other is to be serious,<br> One is persistence and the other is gratitude. Those who believe have the opportunity, and those who are serious have changed<br> Self, persistent people have changed their fate, and grateful people have retained their blessings. Some things, No<br> It is when you see hope that you insist, but when you insist, you have hope!</big></big><br></p> </div> <div align="center"> <a href="https://blog.csdn.net/weixin_ 51196032? SPM = 1001.2101.3001.5343 "> jump to Li Runsheng's blog</a> </div> </body> </html>
2. Effect display
summary
Hypertext markup language (HTML) is an application under the standard general markup language. It is also a specification and a standard. It marks all parts of the web page to be displayed through markup symbols. The web page file itself is a text file. By adding markup symbols to the text file, you can tell the browser how to display the content (for example, how to process words, how to arrange pictures, how to display pictures, etc.) The browser reads the web page files in order, and then interprets and displays the contents of the marks according to the marks. For the marks with writing errors, the error will not be pointed out, and the interpretation and execution process will not be stopped. The creator can only analyze the causes and parts of the errors through the display effect. However, it should be noted that for different browsers, the same mark may be incomplete Therefore, we need to constantly debug the code to achieve the coexistence of specification and aesthetics.
Software man, come on!