HTML (HTML), manufacturing web standard language of
"hypertext" refers to the inside pages can contain images, links, and even music, programs and other non-text elements.
table of Contents
A, HTML document structure
1.1 .htm or .html basic structure
<!DOCTYPE html> <!--文档类型：支持HTML5标准-->
<htlm lang="en"> <!--en:英文,zn:中文-->
<html>
<head> <!--头部：浏览器、搜索引擎所需信息-->
</head>
<body> <!--主体：网页中包含的具体内容-->
</body>
</html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容呀呀呀呀啊呀呀呀呀呀
</body>
</html>
Code results are as follows:
1.2 yuan Information
meta tag is used to describe a property of an HTML page document, at the head of its information is not displayed in the browser page, such as: author, date and time, page description.
The basic syntax:
<head>
<meta charset="UTF-8">
<meta name="" content="">
<meta http-equiv="" content="">
</head>
1.3 Subject property
The basic syntax
<body leftmarin="50px" tomargin="50px"
text="#000000" bgcolor="#339999"
link="blue" alink="white" vlink="red"
background="body_image.jpg">
Four color setting method:
. 1, the RGB (R & lt, G, B), R & lt, G, B are integers, range: 0 to 255;
color specific numerical values represented by the system can be built, or drawing function of the PPT color function View
2, RGB (R%, G%, B%), R, G, B are integers in the range: 0 to 100;
3, using three or six hexadecimal number #RGB or 3RRGGBB
4, the English name of the color, such as red, green, blue.
1.4 HTML document written specification
A. HTML page coding basic norms
1. tags can be nested, but not cross-use.
2. The case-insensitive in the HTML code.
3. Label can set various attributes, attribute values recommended are denoted by double quotes.
4. When writing the code should be used sawtooth structure, indented style, increase readability.
The two ways to add comments:
1. <!-- 注释信息 -->
2. <comment>注释信息</comment>
Two .HTML file naming conventions
1. It is recommended to use a unified html file extension
2. Document name only underscores the alphanumeric and can not contain special characters, it is recommended to start with a letter or an underscore
3. Document names are case sensitive
Home 4.Web server usually index.html or default.html
Second, the paragraph formatting text
2.1 add spaces and special symbols
Enter a space in the body tag, carriage returns will be ignored when the page is displayed
And the spaces and special symbols correspond to the code table:
2.2 formatted text label
Common text decoration Tags:
Common computer output Tags:
Font font tag:
font tag is used to change the default font, color, size and other attributes.
The basic syntax
<font face="" size="" color=""></font>
Paragraph 2.3 and layout tag
Paragraphs p label
Paragraphs p label automatically creates some gaps in its front and rear, to start a paragraph
The basic syntax
<p align="left|center|right">段落正文内容</p>
Br wrap label belongs to a single label, it indicates insert line breaks
Horizontal dividing line tag hr
The basic syntax
<hr size="" color="" width="" align="" >
Content is centered label center
Tag , the content can be achieved included a one-time center, no other property.
Paragraph indent blockquote tag
Tag , the content can contain retracted position five Western character of the right.
Preformatted label pre
For paragraphs of text pages of pre-formatted, the browser will retain formatting designer in the source file, as defined
, includes a variety of spaces, indentation, and special symbols.
The basic syntax
<pre>
哈哈
哈哈哈哈 #@#￥！%！@！……！……！……
哈哈哈哈哈哈哈 ！@%@！#%@#……@……！……
哈哈哈哈啊哈哈哈哈 ！@……#@……！@……#！…………
</pre>
Third, hyperlinks
3.1 Overview
Hyperlinks refers to point to a goal from a web connection relationship
this goal can be: web pages , images , e-mail addresses , files , applications
Is part of a web page on the hyperlink essence , it is a kind of allows us to other pages or sites with between
elements connected.
3.2 hyperlink syntax, route and classification
Hyperlink a label
The basic syntax
<a href="url" name="" title="提示信息" target="窗口名称">超链接标题</a>
1.href : link to the target file
2.NAME : create labels within the document
3.title : links pointing to prompt
4.target : Specifies the target window open.
Five kinds of values:
_parent # on a window; _blank # new window; _self # same window, the default value;
_top # entire window open; framename frame name;
Hyperlink Path :
There are two absolute path :
1. File path defined from the beginning of the letter, such as C: \ the User \ HASEE
2. the beginning of the URL of the URL defined in the agreement, such as: https: //www.baidu.com
Hyperlinks Categories
Hyperlinks can be divided into internal links and external links two kinds.
Internal links refers to links between the internal Web site files, external links refer to files within a website link
to a file outside of the site content.
3.3 hyperlinks application
1. Create HTTP file download hyperlinks
Site can provide software, download files and other information, the relative path to download the file pointed to where
or absolute path, file types: .doc / .pdf / .exe / .rar / etc.
The basic syntax
<a href="url">链接内容</a>
2. Create a bookmark link page
Bookmark article refers to internal links , but arbitrary jump between paragraphs.
To achieve such a link must first define the name of the bookmark and bookmark link .
The definition of basic grammar book signing
<a name="name">书签标题</a>
The basic syntax defined bookmark link
<a href="#name"书签标题</a> <!-- 同一页面内 -->
<a href="URL#name">书签标题</a> <!-- 不同页面内 -->
Create a hyperlink to access the FTP site
FTP server links and Web links difference is the protocol used, browse the Web using http protocol, and
FTP server using FTP connection.
The basic syntax *
<a href="ftp://服务器IP地址或域名">链接的文字</a>
Create an image link
The title is a link to an image, the image when you click the link, you can open the URL href set when browsing.
The basic syntax
<a href="https://www.baidu.com"><img src="url" width="" height="" hspace=""
vspace="" align="" border="" alt=""></a>
Fourth, the list of tables
4.1 List
Unordered list ul
<ul>
<li>无</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ul>
Results are as follows:
list item li
Ordered list ol
<ol>
<li>有</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ol>
Results are as follows:
Table 4.2
Tables are structured data sets (tabular data) of rows and columns, it enables you to quickly find a simple value representing a relationship between different types of data.
1. Each table contains one pair table label
2. In the table, the contents of the container is the smallest cell created with the label td, td label number represents the number of columns in the table
3. In the table, tr tag indicates the number of rows
4. th tag indicates the beginning of the header is added, usually in the row or column
The basic syntax:
<table border="1">
<tr>
<th>Animals</th>
</tr>
<tr>
<th>Hippopotamus</th>
</tr>
<tr>
<th>Horse</th>
<td>Mare</td>
</tr>
<tr>
<td>Stallion</td>
</tr>
<tr>
<th>Chicken</th>
<td>Cock</td>
</tr>
</table>
Fifth, insert images, background music
5.1 Insert Picture
Image Format
JPG : The most common format of digital cameras, which is characterized by good color reproduction, can photograph obvious in the case of distortion, dramatically reducing the volume, the volume is not large, the disadvantage is not supported transparent.
PNG : the network can be described as the most suitable picture! PNG advantage is clear, lossless compression, a high compression ratio, the gradation can be transparent, have the advantage of almost all GIF; JPG disadvantage is not as rich in color, the same volume is also slightly larger than JPG images.
GIF : lowest color effect, small size, has excellent compression, support for animation, and supports transparency, so the gradient although this is not transparent PNG transparent strong
Compare all respects
Compare Size: Generally, PNG ≈ JPG> GIF
Transparency: PNG> GIF> JPG
Richness of color: JPG> PNG> GIF
The degree of compatibility: GIF ≈ JPG> PNG
** img tag insert a picture **
We can use img tags to pictures on the page. It is an empty element (it does not contain text labels or closed), only a minimum of the src (its full name as a normal read source) to take effect. src attribute contains a link to an image we want to introduce the path, the path may be a relative or absolute URL, just like the href attribute of a tag.
<img src="dinosaur.jpg">
<img src="images/dinosaur.jpg">
You can use the width and height attributes to specify the height and width of your images, and alt attributes to increase the picture title (displayed when the mouse pointer to the image information)
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
Sets the alignment of the image
5.2 Background Music
Insert background music label bgsound
<bgsound src="背景音乐地址" loop="播放次数">
src: file name or address background music files (suffix)
loop: Views expressed in numbers. -1 means infinite and unlimited play until you close the page.
