HTML basic grammar
1.1. Tag / tag
The symbols have the special features in the page, HTML tags to all <> marked to distinguish the role of plain text.
Tags Categories
1. Double label
In pairs, have started to end.
eg: <start label> tag content </ end tags>
2. Single-label
Only start tag, no closing tag, can be added manually, indicating the end.
eg: <tag name>
Nested labels
Other tags appear in pairs of tags.
Nested structure, the outer drive element to the parent element, the inner element called subelements
<a>
<b>你好</b>
</a>
<!--a标签是超链接标签-->
<!--b标签是文本加粗标签-->
Specification of
HTML insensitive, to maintain the proper code readability enhancement indented
1.2 Label properties
The main property of the label used to modify the label display.
Related syntax:
attribute by the attribute names and values: attribute name = "attribute value"
attribute declaration must be written in the start tag: <property name = start tag 'attribute'> ...
Each tag can set multiple attributes, use separated by spaces between attributes: <attribute name = start tag 'attribute' attribute name = "attribute value 'attribute name =" attribute value "> ...
Notes 1.3 HTML
comment statement:
Note:
Comments can not uninstall tag, such as
Comments can not be nested
1.4HTML structures
type declaration how the document is: at the beginning of the first line html5 declaratively <doctype html!>
Role: Tell HTML version of the browser is currently used, so that the browser can parse HTML tags and correct rendering styles.
Writing location: the very beginning of the document.
Start and end of the document
After document type declaration, using the label marking the beginning of a document and end
In the HTML tag, comprising two subelements
<html>
<head></head>
<body></body>
</html>
<head>标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
<body>标签表示网页的主体信息，网页所呈现的内容都要写在body里
<head>标签中包含的子元素
Set the page title to set the page character encoding
1.5 The text label
1.5.1 Character entity (symbol of special significance)
It means a space
<denotes less than the number <
> represents a number greater than>
'& Copy;' represents a copyright symbol
¥ ¥ symbol represents RMB
1.5.2. Text Styles
Italic text
Text Underline
Text bold effect
Text strikethrough
Superscript text
Subscript text
features: These tabs with other tags or text line display co
1.5.3. Title Tag
Display text in a different font size and bold way
Syntax: n value of 1-6, the font size is decreasing progressively
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
Features:
It will change the size of the text bold and having the effect of
each title will have a vertical gap distance
each title on a separate line, with the other elements were not displayed rows
each title may be added to align attribute
values: left / center / right
settings horizontal alignment of the text, the default left alignment
A title
1.5.4. Paragraph tag
Action: highlighting a text, each have a separate line or a text, a total of other elements not display rows, and also includes a vertical distance blank
Syntax:
1.5.5. Format label
Wrap Tags:
horizontal Tags:
1.5.6. Partition Label
Block partition
Role: divide the page structure, with css page layout features to achieve: an exclusive line of display elements partition Action: setting different styles of the same line of text, CSS characteristics in combination: text or other elements may be co-line display, allowing the use of a plurality of span line of text1.5.7. Label Category
Block elements
as long as a separate line on the page, the total of other elements of row elements not shown are block-level elements.
Action: all pages can be done layout
features: are added align attributes of setting the horizontal alignment
eg: h1 ~ h6, ul, ol, li, form, table, tr, p, div
inline elements / inline element
may be other elements total lines.
eg: ib strong sub sup span
1.6 List tab
Effect: according to a top-down manner to arrange the data
List consists of:
Ordered list
The default is numerical order according to
an unordered list
Default as solid as the origin identifier
list items
List is a list of each data item
syntax:
Note: The list of items to be used in a nested list tag
list properties
Ordered list -ol
property type: bulleted
1 ：按照数字排列显示，默认值
a : 按照小写字母顺序排列
A ：按照大写字母排列
i : 按照罗马数字排列
I : 按照罗马数字排列
start Properties: set the first few characters of the sort from the start
value: Digital
unordered list -ul
property type: bulleted
disc 实心圆点（默认）
circle 空心圆点
square 实心方块
none 不显示项目符号
Nested list
Other lists appear in a list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li>山东
<ol type="I">
<li>德州</li>
<li>青岛</li>
<li>济南</li>
<li>淄博</li>
</ol>
</li>
<li>吉林
<ol type="I">
<li>长春</li>
<li>吉林</li>
<li>白城</li>
<li>敦化</li>
</ol>
</li>
<li>北京
<ol type="I">
<li>朝阳</li>
<li>昌平</li>
<li>西城</li>
<li>东城</li>
</ol>
</li>
</ul>
</body>
</html>
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.