编程知识 cdmana.com

December 2020 - front end Basics - understanding HTML

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)

html effect

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 summary

  • 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

Tag name Definition explain
<html></html> HTML label The biggest tag in the page , We call it the root tag
<head></head> The head of the document Pay attention to head The label we have to set in the label is title
<titile></title> The title of the document Let the page have its own page title
<body></body> 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

recommend :

<head>     
        <title> My first page </title>
 </head>

Not recommended :

<HEAD>     
        <TITLE> My first page </TITLE>
</HEAD>

1.2 HTML Element tag classification

label :

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 .

classification :

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 )

<head></head>
<body></body>

Initiative :

 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 .

  • Dreamweaver
  • SublimeText
  • WebStorm
  • HBuilder
  • VScode

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>

usage :

<!DOCTYPE html> 

effect :

<!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 :

1.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]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224214750760p.html

Scroll to Top