Here write custom directory title
1 HTML acquaintance
HTML (Hyper Text Markup Language English abbreviation of) Chinese translated as "Hypertext Markup Language" is a description of the main content of the page text, pictures, sound, etc. through HTML tags.
<strong> 我是加粗的字体 </strong>
1.1 HTML skeleton format
HTML has its own language syntax skeleton format:
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
1 HTML标签：
作用所有HTML中标签的一个根节点。
2 head标签：
作用：用于存放：
title,meta,base,style,script,link
注意在head标签中我们必须要设置的标签是title
3.title标签：
作用：让页面拥有一个属于自己的标题。
4.body标签：
作用：页面在的主体部分，用于存放所有的HTML标签：
p,h,a,b,u,i,s,em,del,ins,strong,img
1.2 HTML tags Categories
In the HTML page, with the "<>" symbol element is referred to as HTML tags, as mentioned above, <HTML>, <head>, <body> tags is HTML. Is placed in a so-called tag "<>" symbol tag indicating a function of the encoded commands, also known as HTML tags or HTML elements
1. Double label
<标签名> 内容 </标签名>
The syntax "<tag name>" tag indicates the beginning of the effect is generally referred to as "start tag (start tag)", "</ tag name>" tag indicates the end of the action, generally called "end tag (end tag) ". Compared start tag and the end tag added just in front of a closed symbol "/."
比如 <body>我是文字 </body>
2. Single-label
<标签名 />
Single-label also known as empty label refers to a label with the symbol can be completely described in the label of a function.
比如 <br />
1.3 HTML tag relationship
The relationship between the label will be divided into two types:
1. nesting relationship
<head> <title> </title> </head>
2. parallel relationship
<head></head>
<body></body>
2 HTML skeleton described
2.1 Document Type <!DOCTYPE>
<!DOCTYPE html>
This sentence is to tell us what html version? We are using a version of html 5. There are many versions of html, then we should tell the user and the browser version numbers we use.
<!DOCTYPE>Label is located on the top of the document, for explaining to the browser which HTML or XHTML document using the current standards, it is necessary to use at the beginning of <!DOCTYPE>all the XHTML document specifies XHTML version and type of label, the only way the browser to the specified document type of resolution.
Note: Some sites may use old or old versions of the document types such as XHTML, but we learned about HTML5, and HTML5 document type well compatible (backward compatible with the principle), so do not hesitate to use the HTML5 document type just fine.
2.2 Character Set
<meta charset="UTF-8">
utf-8 is the most common character set encoding, commonly used character set and encoding as well as gbk gb2312.
gb2312 simple Chinese characters include 6763
BIG5 Traditional Chinese Hong Kong, Macao, Taiwan and other use
GBK contains all the Chinese characters is an extension GB2312, adding support for complex characters, compatible GB2312
UTF-8 character contains all the world's countries need to use
记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
2.3 HTML tags
3 HTML tags
First HTML and CSS are two completely different languages, we learned about the structure, just write HTML tags, understanding labels on it. It does not specify the style of the structure to give the label.
HTML tags are many, here we learn the most commonly used, followed by some less used, we can look at the manual on it.
3.1 publishing label
Css layout and major labels with the use of display labels page structure, page layout is the most commonly used labels.
3.1.1 Title Tag
English abbreviations: head head title.
In order to make a more semantic web, we often use the title tag on the page, HTML offers six levels of the title, that is,
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
标题标签语义： 作为标题使用，并且依据重要性递减
The basic syntax is as follows:
<hn> 标题文本 </hn>
Note: h1 tag because it is important to minimize the use, not quick to throw you a h1. General h1 logo is to be used.
3.1.2 paragraph tag
English abbreviations: paragraph paragraph
The text on the page should be displayed orderly manner, is inseparable from paragraph tags, just as we normally write articles, the entire page can be divided into several paragraphs, and paragraphs label is
<p> 文本内容 </p>
HTML document is the most common label, by default, text in a paragraph wrap automatically based on the size of the browser window.
3.1.3 horizontal label
English abbreviations: horizontal dash
Page often see some horizontal lines separating between paragraphs and paragraphs, so that the structure of the document clear, structured. These horizontal lines can be achieved by inserting a picture, it can simply be done by the label, <hr />that label across the page to create horizontal lines. The basic syntax is as follows:
<hr />是单标签
On a web page displays the default style horizontal lines.
3.1.4 Break tag
English abbreviations: break interrupted wrap
In HTML, a paragraph of text will be arranged from left to right, until a right end of the browser window, and then wrap. If you want to display a certain text to force a line, you need to use the Break tag
<br />
If you like this time hit the Enter key line feed directly in the word will not work.
3.1.5 div span tag
div span is no semantic web layout is our main two boxes
div division is the abbreviation division, partition means in fact there are many div to combine pages.
span, the span, the span; ranges
Syntax:
<div> 这是头部 </div> <span>今日价格</span>
3.2 text formatting tags
Web page, sometimes you need to set bold, italic, or underline text effects, then you need to use text formatting tags in HTML, the text displayed in a special way.
b i s uOnly use did not emphasize the meaning ofstrong em del insSemantic more intense
3.3 Label properties
Property is the color characteristics such as cell phones the size of a mobile phone, is the summary of mobile phones. .
When using HTML to create web pages, HTML tag if you want more information, they can be set using attributes HTML tags. The basic syntax is as follows:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
In the above syntax,
1. The label can have multiple attributes, must be written at the beginning of the label, the name behind the label.
Regardless of the order between 2 properties, tag names and attributes, are separated from the space between the property and the property.
3. Any tag attribute has a default value, this attribute is omitted the default value.
Take the format of key value pairs = "value" format
such as:
<hr width="400" />
- Property is the width
- Value is 400
Advocate: try not to use the style attribute.
3.4 img tag
English abbreviations: image image
Implement any element of an HTML page must rely on HTML tags, in order to display the image you need to use the image tag, image tag will next be described in detail in the web page as well as and other relevant attributes. The basic syntax is as follows:
The src attribute syntax for specifying the image file path and file name, he is a required attribute of the img tag.
<img src="图像URL" />
3.5 Link Label
English abbreviations: anchor acronym. The basic explanation anchor, the anchor
Create a hyperlink in HTML is very simple, just use the tag to surround the object to be linked, the basic syntax is as follows:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
-
href: specifies the link destination url address, when the href attribute for the label applications, it has a hyperlink function. Abbreviation of Hypertext Reference. Meaning that hypertext reference
-
target: Specifies the link to open the way for the page, its value has _self and _blank two of them as the default value _self, _blank to open the way in a new window.
note:
-
External links need to add http: // www.baidu.com
-
Internal link Internal link directly to the page name such as <a href = "index.html"> Home
-
If you did not determine the link target, usually the href attribute value is defined as the link label "#" (ie href = "#"), indicates that the link is temporarily to an empty link.
-
Not only you can create a text hyperlink on the page in a variety of page elements, such as images, tables, audio, video, and so can add hyperlinks.
Anchor Position (difficulty)
By creating an anchor link, the user can quickly navigate to the target content.
Create anchor links in two steps:
1.使用“a href=”#id名>“链接文本"</a>创建链接文本。
2.使用相应的id名标注跳转目标的位置。
base label
You can set the overall link base open
base written <head> </head>between
3.6 Special characters in the tag (understand)
3.7 Notes Tab
In HTML, there is a special tag - comment tags. If you need to add some easy to read and understand but do not need to display the comment text on the page in an HTML document, you need to use comment tags. The basic syntax is as follows:
<!-- 注释语句 -->
Notes content is not displayed in the browser window, but as part of the HTML content of the document will be downloaded onto the user's computer, you can see when you view the source code.
4 path
In practice, typically create a new folder for storing an image dedicated file, then re-insert the image, you need to use the "path" in a manner to specify the location of the image file.
The path can be divided into: the relative and absolute paths
4.1 relative path
- HTML files and image files in the same folder: simply enter the name of the image file can be, as <img src = "logo.gif" />.
- The image file of the HTML file in a folder: Enter the folder name and file name, between a "/" to separate, such as <img src = "img / img01 / logo.gif" />.
- The image file of the HTML file on a folder: added before the filename "... /", if the two, you need to use the "... / ... /", and so on, such as <img src = "... / logo.gif "/>.
4.2 absolute path
Absolute path
"D: \ web \ img \ logo.gif", or the complete network address, such as "http://www.itcast.cn/images/logo.gif".
5 list of tags
5.1 ul unordered list
There is no distinction between the various levels of the order list items unordered list, are juxtaposed. The basic syntax is as follows:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
The following example, the news is not ordered, without queuing, first-served basis, after the release of the first display.
Foot care:
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
5.2 ordered list ol
Is the ordered list have a listing of the order, each of which defines the list items are arranged according to a certain order, ordered list of the basic syntax is as follows:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
All properties consistent with ul.
5.3 custom list
The term is often used to define a list of nouns or illustration and description, no bulleted list item defined before the list. The basic syntax is as follows:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
