Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title> ha ha </title>
<body>
<p> I was a little paragraph </p>
</body>
Correct answer: Add the semantics of the main title to the text
DocType defintionWeb page declaration Header, this line of statement, do not recite, who back who silly. The term is called DOCTYPE defintion, a document type definition, or DTD. This line of statements is very complex and implies a URL. The web is a standard organization. HTML, CSS, JS specifications are published in the definition of a. World Wide Web Coalition, the World Wide Web Consortium. Page declaration header can tell the browser, which is a standard page.
xmlns= "http://www.w3.org/1999/xhtml" namespace, is a specification;
xml:lang= "en" Language is English
The head tag is the configuration.
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >Configuration of the character set
The principle of Web page:After the user enters the URL, the corresponding server will find that someone has requested my web page, so this server will be the Web page and related images, JS files, CSS files, flash files are transmitted through the HTTP protocol to the user's computer. HTML pages are rendered in the user's computer. The HTTP protocol refers to the Hypertext Transfer Protocol. Each URL corresponds to the identified file on the server.
Plain text files: Only content, no style. Common plain text files are:. txt,. html,. js,. css,. java. Without semantics, even if the content in your file is clear, that's what people think, in fact, all the text in a plain text file is born equal, without any semantics.
Hypertext Markup Language, hypertext Markup Language. is to add semantics to plain text by tagging pairs of children. That is, text adds semantics to text, so this is called "hypertext." And a pair of children tag, also become "tag", so is "Hypertext Markup Language."
The semantics of the main title, H is the meaning of the English headline title.
Second Level title
Paragraph, p is the meaning of the English paragraph paragraph.
<p></p>
In addition to semantics, there is nothing else in HTML: No style, no interaction, no behavior.
So HTML can't center text, font size, color change, font, underline, tilt
Any standard HTML page, the first line must be a
<! DOCTYPE The statement that begins with the ......
.
This line is the document declaration header, DocType Declaration. This tag tells the browser which HTML or XHTML specification to use for the document. What are the specifications of the
?
First we determine one thing, we are now learning HTML4.01 This version, this version is IE6 start compatible. HTML5 is compatible with IE9 start. But IE6, 7, 8 these browsers can not be prematurely eliminated, so these years the web should be used HTML4.01 to make. You will be able to use HTML5 after you know the mobile and mobile pages. There are two major kinds of specifications in the
HTML4.01, each of which has 3 kinds of small specifications. So there are 6 types of specifications (see below): The
HTML4.01 contains two specifications, common and XHTML.
HTML feel that some of the rules are not rigorous, such as whether the label can be capitalized?
<H1></H1>
So, the HTML thought, put some standard strict standards, and developed a XHTML1.0. The letter X in XHTML, which means "strict".
Summing up, a total of 6 kinds of DTD, plainly, the first line of HTML statement a total of 6 kinds:
A small specification inside a large specification
HTML4.01 Strict Strict, reflected in some tags can not be used, such as U
Transitional normal.
Frameset a page with frames
XHTML1.0
Strictly reflected in lowercase tags, closed, quotes Strict Strict, reflected in some tags can not be used, such as U
Transitional normal (the version we study)
Frameset a page with frames
Strict said "strict", the requirements of this model is more stringent. Where is this strictly manifested? Some tags are not available.
For example, the U-tag is a way to underline an article, but this is in conflict with the nature of HTML, because HTML is only responsible for semantics, not for styles, and U is a style. Therefore, you cannot use the U-tag in strict.
<u> Xi Hee Hee </u>
How do I add an underscore to the text? Future CSS will be resolved using CSS properties.
Transitional says "Normal", and this pattern is that there are no other specifications.
FRAMESET represents "frames", which are used on the frames page.
What we are learning is the transitional version in XHTML1.0. Because occasionally we want to use some kind of tag like u (as a CSS hook) in our page.
Character
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
The character set is defined with a meta tag, and meta denotes "meta". A "meta" configuration represents a basic configuration item.
CharSet is the meaning of the charactor set "character set". This meta does not have the back, who backs who is silly, uses the sublime to generate on the line.
There are two types of character sets that can be used in Chinese:
The first type: UTF-8
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
The second type: gb2312
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
can also be written GBK
<meta http-equiv= "Content-type" content= "TEXT/HTML;CHARSET=GBK" >
What is a character set? Movable printing, all the characters have a small seal, the need for which word, whichever word.
However, two people have invented the font. Lao Wang invented one, and Lao Li also invented one.
For example, the same character, "Chuan" word in the old Wang's font is the 2nd big plate 4th row 43rd column.
And this Chinese character "biography" in Lao Li's font inside is the 5th big plate 6th row 13th column.
Computer, can not directly store Chinese characters, but stored is encoded, so, computer records "pass" The word, is so recorded:
Lao Wang:
20443
Lao Li
50613
There are two font UTF-8 and gb2312.
UTF-8 is the international universal font, which covers all the human languages on Earth, such as Arabic, Chinese, birds of the tongue ...
GB2312 is the national standard, is the Chinese font, which only covers the Chinese characters and some commonly used in foreign languages, such as Japanese katakana, and common symbols.
Font Size: UTF-8 (full-text) > gb2312 (Chinese only)
Note that because UTF-8 contains all the human languages in the world, it takes more code to describe a Chinese character.
UTF-8 stores a Chinese character 3 bytes. And the gb2312 stores a Chinese character 2 bytes.
Save Size: UTF-8 (more bloated, slower loading) > gb2312 (smaller, faster loading)
Summarize:
UTF-8 Word Many, there are various countries of the language, but the preservation of large size, file bloated;
gb2312 words, only in Chinese and a few foreign languages and symbols, but small size, file small.
List of 2 usage scenarios:
1) Your company is doing Japanese anime, often appear some of the names of Japanese animation, web pages to use UTF-8. If you use gb2312, you will not be able to display Japanese.
2) Your company is the Chinese web page, the extreme pursuit of Web page display speed, to use gb2312. If you use UTF-8 to add a byte to each character, so 5,000 kanji, more than 5kb.
Our pro-test:
QQ Network, NetEase, Sohu are using gb2312. These companies are looking to show speed.
Xinhua Tibetan Channel, using the UTF-8, to ensure the number of character sets.
Our courses, all use UTF-8, because we lazy, too lazy to change.
A browser is a meta-view of your character set, such as when you save meta-write, and the declaration of the mismatch, then the browser is garbled.
In addition to setting the character set, meta can also set keywords and page descriptions.
Settings page Description:
<meta name= "Description" content= "NetEase is China's leading internet technology company, to provide users with free mailbox, games, search engine services, open news, entertainment, sports and more than 30 content channels, and blogs, videos, forums and other interactive exchanges, The power of the web-gathering man. "/>
As long as the settings of the description page description, then Baidu search results, you can display these statements, this technology is called Seo,search Engine optimization, search engine optimization.
Abstract a bit:
<meta name= "" content= ""/>
Name is the meaning of "name", content is the meaning of "contents".
In other words, we define a meta that is named "Description" (description). The content is NetEase is China's leading ...
Define keywords:
<meta name= "Keywords" content= "netease, email, games, news, sports, entertainment, women, Asian Games, forum, SMS"/>
These keywords, is to tell the search engine, this page is why, can improve the search hit rate. Let others find you, search for you.
Keywords is the meaning of "key words".
So, a more complete skeleton is this:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<meta name= "Keywords" content= "awesome, very cool, especially good"/>
<meta name= "Description" content= "NetEase is China's leading internet technology company, to provide users with free mailbox, games, search engine services, open news, entertainment, sports and more than 30 content channels, and blogs, videos, forums and other interactive exchanges, The power of the web-gathering man. "/>
<title>Document</title>
<body>
</body>
Line 4th: Character Set settings
Line 5th: Keywords
Line 6th: Description
<title> title of the page </title>
Title is also conducive to SEO search engine optimization
The head tag of the Web page, which indicates the configuration of the page, what is the configuration?
Character sets, keywords, page descriptions, page titles.
In the future we can also see some configuration: IE adaptation, viewport, iphone small icon and so on ...
HTML only cares about the nested structure of tags, nested relationships. Who nested who, who was nested, and line-wrapping, tab-Independent.
No line break, tab not tab, does not affect the structure of the page.
In other words, HTML does not rely on indentation to represent nesting, that is, to look at the label's parcel relationship. However, we find that there is good indentation and the code is easier to read. Ask everyone to indent the label correctly.
Baidu in order to pursue the ultimate display speed, so the HTML tags are not wrapped, there is no indentation (tab), HTML and not to change the line, the level of the label is still clear, but the programmer is unreadable:
All the text in the HTML, if there are spaces, line breaks, tab will be collapsed to a space display.
Code: There are spaces, indents, line wrapping
The label is not closed is a disaster
HTML, CSS is writing code, not "programming", because there is no business logic, subtraction, and or not.
To put it bluntly, it is to draw with code.
......
The H tag does not have a nested relationship. Since H3 followed a H2, we knew this H3 was the H2 sub-title.
H is a container-level label. In theory, you can place the P, UL, only the legal permission, in the semantics, do not write so.
Paragraph, is the English paragraph "paragraph" abbreviation.
HTML tags are hierarchical, and HTML divides all tags into two categories: container-level, text-level.
As the name implies, container-level labels, which can be placed in anything, text-level labels, can only place text, pictures, form elements.
The P tag is a text-level label. From the beginning of the first day of learning p, it is necessary to remember: P inside can only put text, pictures, form elements. The others are not to be put.
The Chrome browser is the best browser in the world for HTML5 support. Provides a very good development tool that is ideal for our developers to use. The shortcut key for reviewing element functionality is F12.
Chrome's English original "Silicon" is Google's products, so also known as Google Browser.
Try putting H into the p:
<p>
I was a little paragraph
</p>
Browsers do not allow you to do so, we use Chrome's F12 review, you will find that the browser itself has closed the p, do not let you go to parcel H1.
<p>
I was a little paragraph
</p>
<p></p>
So, again, p is a text-level label, and P contains only text, pictures, and form elements.
You can insert pictures on the page, the types of images you can insert are: JPG (JPEG), GIF, PNG, BMP. What is the difference between a type and a type, the CSS class says.
Image formats that cannot be inserted into a Web page are: PSD, AI
The HTML page does not insert the image directly, but instead inserts the image's reference address, so you upload the image to the server.
Insert Method:
IMG is a shorthand for the English image "picture"
SRC is a shorthand for the English source "resource" and must not be written as SCR.
SRC is the property of the IMG tag, and baby.jpg is the value of this property.
This tag is different from what we learned before, because this tag is not "right". Self-enclosing labels, also known as single labels.
Why? The reason is simple, if it is the right child, there will be content, meaning to add semantics to this content. Like what
The picture is a picture, does not need to give any text to add the semantics, therefore is oneself a person to live quite well:
The meta of our study is also self-enclosing tags:
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8"/>
ALT attribute:
Alt is an English alternate "substitution" meaning, it means that for whatever reason, when the picture cannot be displayed, the alternate text appears (some browsers do not support).
This behavior does not occur with relative paths:
aaa/. /bbb/1.jpg
.. /either do not write, or write at the beginning.
A Web site, is composed of many HTML pages, HTML pages can be linked to each other through hyperlinks, thus forming a "net."
Grammar:
<a href= "1.html" > Wedding photo </a>
A is English anchor "anchor" meaning, as if this page throws an anchor to another page. is a text-level label.
HREF is an abbreviation for English hypertext reference hypertext address. Read "Drink Rafe", do not read as "drink husband".
Title Hover text
Whether Target opens in a new window
Target is actually the meaning of "goal".
<a href= "09_img.html" title= "very nice" target= "_blank" > Wedding photos </a>
Blank is the meaning of "white space", which means creating a new blank window. For Mao There is a _, is the rule, there is no good explanation.
That is, if you do not write target= "_blank" then it is open in the same tab page, if it is written, it is opened in a new blank tab.
Full hyperlink:
<a href= "1.html" title= "hover text" target= "_blank" > Linked content </a>
Separate the respective properties of the IMG and a tag:
<a href= "1.html" ></a>
The page can have an anchor point, the so-called anchor Point, is a small mark, this small mark is the user is not aware of, the user does not know that there is a mark.
The anchor point is set with the Name property, and a label if the name attribute (or ID attribute) is an anchor point for the page.
<a name= "Wdzp" > My works </a>
Or:
<a id= "Wdzp" > My works </a>
Then URL:
1.html#wdzp
You can have this anchor point displayed at the top of the page, where the page is scrolled.
This way, the user experience is better, and the user can see the contents of the page directly.
If you have a hyperlink that points to an anchor point in the page, it is:
<a href= "#wdzp" > Click to view my work </a>
For example, if all the text in a paragraph can be clicked, then you should:
P Package A:
<p>
<a href= "" > Paragraph paragraph paragraph paragraph passage paragraph </a>
</p>
Instead of a package p:
<a href= "" >
<p>
Paragraph paragraphs Paragraph paragraphs paragraph paragraphs paragraph
</p>
</a>
The semantics of a is less than p,a is can be treated as text, so p is equivalent to put in plain text.
Ability to create images that can be clicked
WordsStyle styles
Color font
Background-color background Color
Font-size Font Size
Font-weight Font Weight
font-family fonts
Font-style Font
Text-align text Alignment
Text-decoration text Decoration
Underline underline
None None
Italic Italic Body
Normal OK
Red color
Blue Blues
Green
Yellow Yellow
Pink Pink
Orange oranges
Black Noir
White
Gray Grey
====================================================
Top Up
Bottom under
Left
Right
In center
Width widths
Height altitude
padding inner margin
margin outer margin
Border border
Solid Solid Line
Dashed dashed line
Line-height Line Height
HTML Basic Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
