1, Introduction to HTML
First, html is a hypertext markup language, which wraps the content in various HTML tags, which are parsed by the browser and presented to the user. It is the main content of the Web front end, and html is not case sensitive. The suffix names of HTML files are ". HTML" and ". htm".
The version number of HTML is determined by <! DOCTYPE > label. The latest version is HTML5.
Common HTML tags are:
| element | explain |
|---|---|
| html tag | Defines the entire HTML document |
| head tag | The element contains the meta data of the document and the title |
| title Tag | Describes the title of the document |
| body tag | Contains visible page content |
| h label | Title label, 7 levels in total |
| p tag | Paragraph label |
| div tag | Block label |
For detailed elements, please refer to rookie tutorial > > >
2, HTML syntax
Html is a markup language defined by HTML elements. The main usage is to include content with elements, so most elements are composed of two tags - start tag and end tag.
Note: the ending label shall be closed with "/".
A basic HTML page:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>HelloWorld</title> </head> <body> <h1>HelloWorld</h1> </body> </html>
3, Element attribute
In the HTML language, almost every element has attributes, and attributes are divided into global attributes and private attributes. As the name suggests, global attributes are owned by every HTML element, and private attributes are unique to the element itself. Attributes are generally described in the start tag in the form of key value pairs, such as class = "nav".
Common attributes:
| Yuan Su Ming | Properties and values | effect |
|---|---|---|
| p | class = "firstP" (global) | Give the element the relevant settings of the specified class |
| div | height = "10px" (global) | The height unit of the definition element can be px, em, etc |
| p | color = "red" (global) | Specifies the color of the text |
| a | href = "baidu.com" (private) | Defines the address of the hyperlink |
| div | Data name = "Zhang San" (global) | HTML5 new attribute for storing custom data of the page |
For detailed attribute information, please refer to rookie tutorial > > >
4, HTML text processing
1. Title Category
The title class is marked by h element and divided into 7 levels. The smaller the number, the larger the font.
<h1>I'm a first-class title</h1> <h2>I'm a secondary title</h2> <h3>I'm a three-level title</h3> <h4>I'm a level 4 title</h4> <h5>I'm a five level title</h5> <h6>I'm a level six title</h6> <h7>I'm a seven level title</h7>
2. Paragraphs
Paragraphs are marked by p elements. One line per p tag.
<p>This is a paragraph </p> <p>This is another paragraph</p>
3. Text formatting
Text formatting is divided into bold, italic, superscript and subscript, etc.
<b>The text is bold</b> <br /> <strong>The text is bold</strong> <br /> <big>This text font is enlarged</big> <br /> <em>The text is italicized</em> <br /> <i>The text is italicized</i> <br /> <small>The text is reduced</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>Superscript</sup>
5, CSS cascading style sheet
1. Introduction to CSS
css style defines how to display HTML elements. It is usually stored in style sheets, which are divided into internal and external. External style sheets can greatly improve work efficiency, facilitate modification, and save files css end. The internal style sheet can be wrapped in the style tag or written in the style attribute of the element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<style>
p{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>I'm the interior style</p>
<h1 style="clolr:yellow;">I'm in-line style</h1>
</body>
</html>
The appearance of CSS cascading style sheet makes HTML more beautiful and easy to use. It complements HTML. It can directly modify the attributes of HTML elements, and the development is simple.
2. CSS usage
In addition to inline style sheets, CSS needs to use selectors to select HTML elements. Selectors are divided into ID and class selectors, element selectors, etc. Common forms are: "#id", "class".
After the element is selected, unload the attribute to be set into braces.
.p{
color:red;
text-align:center;
}//Class selector
3. CSS properties
Common css attributes are:
| Attribute name | value | effect |
|---|---|---|
| background | #000000 | Background color or picture |
| display | none/block | Element invisible / visible |
| border | 5px solid red | Style four borders |
For detailed attribute information, please refer to rookie tutorial > > >
6, HTML layout
HTML mainly consists of two layout modes, table layout and div module layout.
1. table layout
When the table element is laid out, the page is relatively neat and easy to align, which is mainly suitable for the login page.
The table element is mainly composed of tr row labels and td cells
<table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main page title</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;vertical-align:top;"> <b>menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;"> The content is here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> copyright © runoob.com</td> </tr> </table>
2. div module layout
Compared with table layout, div is more flexible, floating and nested, making web pages more hierarchical. In order to adapt to the change of multi terminal screen size, div layout is more used.
<div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main page title</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> The content is here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> copyright © runoob.com</div> </div>
7, HTML form
The form can collect the information submitted by users and send the content to the server through network protocol. Form elements allow users to enter content in the form, such as text fields, drop-down lists, radio buttons, checkboxes, and so on. Forms are set using form labels.
8, Summary
The above is a review of the basic knowledge of html. Part of the content is copied from the rookie tutorial.
Html is a general markup language used on the Web. HTML allows you to format text, add pictures, create links, input forms, frames and tables, and save them as text files that can be read and displayed by the browser.
The key to HTML is tags, which indicate what will appear.
And the use of CSS cascading style sheets.
This is the end of this issue. The next issue will review the new features of HTML5, Javascript and jQuery.
Click here to view - rookie's review road - Advanced HTML (Part 1)