1. HTML First time to know
- HTML Hypertext markup language (Hyper Text Markup Language) It's a language used to describe Web pages .
- HTML Not a programming language , It's a kind of markup language (markup language)
- A markup language is a set of markup tags (markup tag)
A web page is made up of web page elements , These elements are made use of html The label describes , And then parse it through the browser , You can show it to the user .
Hypertext , Yes 2 Layer meaning ：
1. Because it can add pictures 、 voice 、 Animation 、 Multimedia and so on （ Beyond the limits of text ）
2. More Than This , It can also jump from one file to another , File connection with hosts around the world （ Hyperlink text ）.
<img src="timg.jpg" />
The effect page in Xiaobai's eyes
What we programmers are going to do html page
- html It's hypertext markup ( label ) Language
- We learn html Main learning html label
- We use it html Tags describe Web Elements . such as Picture label 、 Text label 、 Link tags, etc
- It has its own grammar standard , be-all html Labels are all made with <> It means
1.1 HTML Skeleton label
Letters of daily life , We have to follow a common agreement .
Empathy ：HTML It has its own framework of language grammar ：（ To follow , Be professional ） Be sure to write it down very smoothly .
<html> <head> <title></title> </head> <body> </body> </html>
html Skeleton tag summary
||HTML label||The biggest tag in the page , We call it the root tag|
||The head of the document||Pay attention to head The label we have to set in the label is title|
||The title of the document||Let the page have its own page title|
||The body of the document||The element contains all the contents of the document , The page content Basically, it's all in body Inside|
The team agreed on case
HTML Tag name 、 Class name 、 Tag attributes and most attribute values are in lowercase
<head> <title> My first page </title> </head>
Not recommended ：
<HEAD> <TITLE> My first page </TITLE> </HEAD>
1.2 HTML Element tag classification
stay HTML On the page , with “< >” The element of the symbol is called HTML label , As mentioned above html、head、body All are HTML Skeleton structure label .
1. Regular elements （ Double label ）
< Tag name > Content </ Tag name > such as <body> I am character. </body>
- In this grammar “< Tag name >” Indicates that the function of the label begins , Commonly referred to as “ The start tag （start tag）”,“</ Tag name >” Indicates the end of the label's function , Commonly referred to as “ End tag （end tag）”.
- Compared to the start tag , The end tag is just preceded by a close “/”.
- What we will contact in the future is basically double label
2. Empty elements （ Single label ）
< Tag name /> such as <br />
- Empty elements Use a single label to indicate , To put it simply , It doesn't need to contain content , There's only one start tag that doesn't need to be closed .
- There are very few single dog labels , Not much in all , Let's just remember more
After all, there are a few single dogs in the world , Most people still like to pair up , Don't leave your other half behind , Treat a double label from beginning to end .
1.3 HTML Tag relationships
Mainly for double label There are two kinds of interrelations of ： Please be familiar with this label relationship , Because we have a lot of nested tags in the back , It's easy to confuse their relationship .
1. Nested Models ( Father and son )
<head> <title> </title> </head>
2. Parallel relationship ( Brotherhood )
If the relationship between two tags is nested , It's best to indent a child element tab Body position of key （ One tab yes 4 A space ）. If it's a juxtaposition , Better align up and down .
html Double label Can be divided into Yes One is Father and son Tags that contain relationships One is Brothers The label of juxtaposition
2. Code development tools （ Write the code ）
- In order to improve our development efficiency
- Reducing code errors we don't advocate using Notepad to develop , We have better development tools .
Some people say ：
Ordinary young people Dreamweaver
Artistic young people sublime
Master and fool Use Notepad
As a matter of fact, sharpening a knife does not miss cutting wood , As long as their own technical strength is hard , What kind of development tools to use is not so important .
sublime There are many advantages , The happiest thing is that it's very lightweight , It's so fast to open , The higher function behind , Contact later .
sublime Generate html Skeleton tips
- Double click to open the software
- New file （ctrl+n）
- preservation （ctrl+s）, Save as ： file name .html （ Be careful The suffix must be .html )
- Zoom in and out of the code Hold down ctrl stay Scroll the mouse wheel perhaps ctrl+ plus key and ctrl + Minus key
- Generate page skeleton structure
html: 5 Press down tab key perhaps ! Press down tab key
- Preview the page in the browser
Right click on Open in the browser
3. The document type <!DOCTYPE>
<!DOCTYPE> Declaration at the top of the document , be in <html> Before the label . This tag tells the browser which document to use HTML or XHTML standard .
Just tell the browser to follow HTML5 Standard parsing page .
Team agreement ：
HTML The document must be accompanied by DOCTYPE Statement , And unified use HTML5 The document declaration of
4. Page language lang
<html lang="en"> Appoint html Language types
The most common 2 individual ：
en Define language as English 2.
zh-CN Define the language as Chinese
<html lang="zh-CN"> Specify the html label Content The language used is Chinese
Team agreement ：
Consider browser and operating system compatibility , It is still in use zh-CN Property value
@ Expanding reading ： Simply speaking , Maybe it doesn't do much for the program , But it can tell the browser , Search engine , Some of the processing Html The program of the page language content to do some corresponding processing or things . Such as can be
- According to the basis lang Property to set different languages css style , Or the font
- Tell search engines to do accurate identification
- Let the grammar checker do language recognition
- Help translation tools to identify
- Help the web reader to identify wait
5. Character set
<meta charset="UTF-8" />
Character set (Character set) It's a collection of characters . The computer should deal with all kinds of characters accurately , Character encoding required , So that computers can recognize and store all kinds of characters .
utf-8 Is currently the most commonly used character set encoding , There are also commonly used character set encoding methods gbk and gb2312.
- gb2312 Simple Chinese Include 6763 The Chinese characters GUO BIAO
- BIG5 Traditional Chinese Hong Kong, Macao and Taiwan
- GBK Contains all Chinese characters yes GB2312 An extension of , Add support for traditional characters , compatible GB2312
- UTF-8 It basically contains the characters needed by all countries in the world
- This code is very important , It's code that has to be written , Otherwise, it may cause garbled code .
This sentence is to let html The file is UTF-8 Code saved , The browser decodes the corresponding... According to the encoding html Content .
Team agreement ：
In general, the unified use of "UTF-8" code , Please try to write it as standard as possible "UTF-8", Don't write as "utf-8" or "utf8" or "UTF8".
6. HTML The semantics of labels
vernacular ： The so-called semantic label , It means the meaning of the label .
According to the semantics of the tag , Give the most reasonable label in the right place , Make the structure clearer .
1. Easy to read and maintain the code 2. At the same time, let the browser or web crawler can parse well , So that we can better analyze the content 3. Using semantic tags will have better SEO
Is the semantics good ： When we get rid of CSS after , The web structure is still organized , And it has good readability .( It's as good as running naked )
Principles to follow ： First determine the semantic HTML , Choose the right one CSS. therefore , Next we learn html label , Remember according to the meaning . HTML The implementation of any element in a web page depends on HTML label .
7. Expanding reading @
The origin of a single dog
The word "single dog" first came from the online community , The origin has something to do with the journey to the West .
The last scene of the wedding of the great sage in the journey to the West “ He's like a dog ” origin .
本文为[Liang Jing who loves to eat small oranges]所创，转载请带上原文链接，感谢