HTML fixed structure:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>HTML tags Categories:
- 1, the ditag <head> </ head> a couple
- 2, the number of very small single tag <br />
Wherein the "/" symbol called off
HTML tags relations:
- 1, nested relationships (parent-child relationships)
<html>
<head>
<title> </title>
</head>
</html>- 2, parallel relationship (brotherhood)
<head> </head>
<body> </body>Use Notepad to write development efficiency is very low, it is easy to overlook errors. Practice, for efficiency, it is recommended to use Subline tool.
Generating HTML skeleton shortcut keys:
Enter " HTML:. 5 ", press "TAB" key.
Enter " ! " And press the "TAB" key.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网 淘 你喜欢</title>
</head>
<body>
双十二马上要来了！
</body>
</html>When previewing, just click the right mouse button, open it in your browser.
- <DOCTYPE html!>: HTML version, HTML 5 version represented here, now basically use that version.
- lang = "en": language, although there is "en", but can also be entered Chinese.
- <Meta charset = "UTF-8">: Character Set, "UTF-8" is the most common character set encoding, commonly used as well as GBK and GB2312, GB2312 (GB) Simplified Chinese, including the 6763 characters , BIG5 for traditional Chinese Hong Kong, Macao, Taiwan and other use, GBK contains all Chinese characters, is an extension GB2312, adding support for complex characters and is compatible with GB2312, UTF-8 and contains the characters used in countries all over the world.
Semantic HTML tags
It is the vernacular, at first glance, you know that is the key, what the structure is, know what each is doing. The core is to give a reasonable label in the right place, it follows the principle is to first determine the semantic HTML, then select the appropriate CSS.
Common HTML tags
There are many HTML tags, you can query the manual normal learning.
First introduced here about the basic layout of the label.
1, header tags
<h1 of>, <H2>, <H3>, <H4>, <H5>, <H6>
the HTML title has 6 levels, successively smaller, may be used as the title, and the decreasing order of importance.
2, paragraph tag
<p> text </ p>
case, in a paragraph of text will automatically wrap to the window size of the browser default.
3, the horizontal line tag
<hr /> is a single tag
is a line.
4, the label wrap
<br /> is a single tag
is to force a line, press enter / space is not effective, is different from the paragraph tag line spacing.
5, div and span tags
div and span do not semantics, we are the two main boxes page layout, such as CSS + DIV.
<div> </ div>: div line can only have a
<span> </ span>: span may have a plurality of line
6, text formatting tags
in bold: <strong> </ strong> semantic strongly recommended
<b> </ b>
italic: <em> </ em> semantic strongly recommended
<i> </ i>
plus strikethrough: <del> </ del> semantic strongly recommended
<s> </ s>
underlined: <ins> </ ins> semantic strongly recommended
<u> </ u>
7, image tag
<img src = "Image URL" /> is a single tag
src attribute is one, indicating that the path of the image.
alt is a property which is the replacement text (text prompts), if the image from being displayed, may prompt text.
titile is one of the properties, the mouse put up (hover) text will be described.
width / height is one of the attributes indicates that the width and height of the image, a normal value can change, and automatically geometric scaling.
wherein the attribute is a border, the border may be added to the image.
8, the link tag
<a herf="跳转目标" target="目标窗口的弹出方式"> here put text or image </a>
the href attribute is specified url link destination address, external links http protocol can not be omitted ( For example http://www.baidu.com), if the link is there, but can not jump, then the "#" instead.
target is an attribute that specifies the way the page link to open, its value has self (default "_self") and blank (open in new window "_blank") two kinds.
9, anchor positioning
by positioning (create anchor points) way to quickly go to a certain location on the page (target content).
Achieved in two steps:
Use <a href="#id名"> link text link text </a> created
using the corresponding id name label position jump destination (using the id attribute id = "id name")
10, base label
<base /> is a single tag
in the head section, such a plurality of links in the page, a link may be provided integrally opened state.
<head>
<base target="_blank" />
</head>11, the special character labels
spaces: & nbsp;
less-than <: & lt;
greater than the number>: & gt;
Nos. &: & Amp;
Yuan ¥: & yen;
Copyright ©: & copy;
registered trademark ®: & reg;
Celsius °: & deg;
negative No. ±: & plusmn;
multiplication X: & times;
division sign ÷: & divide;
square (superscript 2) ²: & sup2;
cubic (subscript 3) ³: & sup3;
12, comment tags
<! - Comment ->
write a comment is a very good habit to write code, the browser will not execute.
13, route description
- relative path
In a same path: Direct Input <img src = "aa.jpg" / >
following a path: need to go through the appropriate folder to "/" apart <img src = "images / aa.jpg " />
in the a need to enter the "../"<img src =" ../ aa.jpg " />: a path
- Absolute path
Full path address <img src = "D: \ project \ images \ aa.jpg" />
In this manner does not substantially used.
14, a list of tag
inside the container loaded with a form of text or a graph is called the list.
The greatest feature list is neat and orderly.
Divided into the following three categories:
- Unordered list: order listed, there is no order, <ul> tag which can only put <li>, in <li> tags which can accommodate all unordered list with its own style attributes, in part of CSS Features;
<UL>
<Li> list item. 1 </ Li>
<Li> list item 2 </ Li>
<Li> list item. 3 </ Li>
...
</ UL>
- Ordered list: up and down sequence, <ol> tag which only put <li>, in <li> tags which can accommodate all
sequence <ol>, automatically 1,2,3,4 ... with the specific pattern is adjusted inside the CSS;
<Li> list item. 1 </ Li>
<Li> list item 2 </ Li>
< li> list item 3 </ li>
...
</ OL>
- Custom list: a term or terms often used to describe and explain, without any preceding list entry item;
<DL>
<dt> noun 1 </ dt>
<dd> 1 noun interpretation </ dd>
<dd> 1 noun interpretation </ dd>
...
<dt> noun 2 </ dt>
<dd> noun interpretation 2 </ dd>
<dd> 2 noun interpretation </ dd>
...
</ DL>
