编程知识 cdmana.com

December 2020 - front end Basics - Common HTML tags

1. HTML Commonly used labels

First HTML and CSS It's two completely different languages , What we learn is structure , Just write HTML label , Just know the label . No more styles for structure tags .

HTML There are a lot of labels , Here we learn the most commonly used , There are some less useful ones in the back , We can check the manual .

1.1 Typesetting labels

Typesetting label mainly and css Use it with , A label that shows the structure of a web page , It is the most commonly used label for web layout .

1) Title Tag h ( Memorization )

Abbreviations of words : head Head title title Document title

In order to make the web page more semantic , We often use title tags in our pages ,HTML Provides 6 The title of a level , namely Title tag semantics : Use as a title , And according to the decreasing importance

The basic syntax is as follows :

<h1>    Title Text    </h1>
<h2>    Title Text    </h2>
<h3>    Title Text    </h3>
<h4>    Title Text    </h4>
<h5>    Title Text    </h5>
<h6>    Title Text    </h6>

The display effect is as follows :

Summary :

  • The text with the title will become bold , The font size will increase in turn
  • There can only be one title in a row

2) Paragraph Tags p ( Memorization )

Abbreviations of words : paragraph The paragraph [ˈpærəgræf] Don't remember the word

Functional semantics :

You can put HTML The document is divided into paragraphs

In the web page to display the text methodically , Paragraph labels are indispensable , Just like we usually write articles , The whole page can also be divided into several paragraphs , And the paragraph label is

<p> Text content </p>

yes HTML The most common tags in documents , By default , Text in a paragraph will automatically wrap according to the size of the browser window .

3) Horizontal label hr( know )

Abbreviations of words : horizontal Horizontal line [ˌhɔrəˈzɑntl] ditto

In the web page, we often see some horizontal lines to separate paragraphs , Make the document structure clear , distinct . These horizontal lines can be achieved by inserting pictures , It can also be done simply by tagging ,

<hr /> It's about creating labels across the horizontal line of a web page . The basic syntax is as follows :

<hr /> It's a single label

Display the horizontal line of the default style in the web page .

4) Line wrap label br ( Memorization )

Abbreviations of words : break interrupt , Line break

stay HTML in , The text in a paragraph will be arranged from left to right , Up to the right end of the browser window , And then auto wrap . If you want some text to be forced to wrap , You need to use a newline label

<br />

If it's still like word Hit the Enter key directly in line feed will not work .

5)div and span label ( a key )

div span There is no semantics Is the main layout of our web page 2 Boxes You must have heard of it css+div

div Namely division Abbreviation Division , Division means There are many div To combine web pages .

span span , Span ; Range

Grammar format :

<div> The box , There can only be one </div> <span> The box , You can put more than one in a row </span>

They're both boxes , Used to hold our web page elements , It's just that they're different , Now we mainly remember the usage and characteristics

  • div label For layout , But now you can only put one in a row div
  • span label For layout , There can be many in a row span

I'll talk about the display mode later , I'll tell you

Typesetting label summary

Tag name Definition explain
<hx></hx> Title Tag Use as a title , And according to the decreasing importance
<p></p> Paragraph Tags You can put HTML The document is divided into paragraphs
<hr /> Horizontal label There's nothing to say , It's just a line
<br /> Line wrap label Line break
<div></div> div label For layout , But now you can only put one in a row div
<span></span> span label For layout , There can be many in a row span

1.2 Text formatting labels ( Memorization )

In the web page , Sometimes you need to bold the text 、 Italics or underline effect , It needs to be used HTML Text formatting tags in , To display in a special way .

difference :

b It's just bold strong In addition to being bold, there are Emphasis means , More semantic .

The rest is the same ...

Please remember The first two groups In bold and tilt The latter two groups didn't remember to come back to check

1.3 Tag attributes

The so-called attribute is External characteristics such as The color of the cell phone Cell phone size , Summary is mobile phone :

  • The color of the mobile phone is black
  • The size of the cell phone is 8 "
  • The length of the horizontal line is 200
  • Width of picture yes 300

Use HTML When making a web page , If you want to let HTML Tags provide more information , have access to HTML Set the properties of the tag . The basic syntax is as follows :

< Tag name   attribute 1=" Property value 1"  attribute 2=" Property value 2" …>  Content  </ Tag name >
< mobile phone   Color =" Red "  size ="5 " ">  </ mobile phone >

1.4 Image tag img ( a key )

Abbreviations of words : image Images

To display an image in a web page, you need to use image tags , Next, I will introduce image tags in detail <img /> And the attributes associated with him .( It's a single dog )

The grammar is as follows :

<img src=" Images URL" />

In this grammar src Property specifies the path and filename of the image file , He is img Required properties of tags .

border We'll use css To do it , Just remember this border Words are good

Be careful :

1. Tags can have multiple properties , It must be written in the start tag , After the tag name . 2. There is no order between attributes , Tagnames and properties 、 Properties are separated from properties by spaces . 3. Take the key value pair The format of key="value" The format of

such as :

     natural <br />
    <img src="cz.jpg" width="300" height="300" /><br />
      With a border <br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
     There are suggestive texts <br />
    <img src="cz.jpg" width="300" height="300" border="3" title=" This is a little dandelion " /><br />
     There are alternative texts <br />
    <img src="cz.jpg" width="300" height="300" border="3" alt=" Picture does not exist " />

1.5 Link tags ( a key )

Abbreviations of words : anchor Abbreviation [ˈæŋkə(r)] . Basic explanation anchor , Anchor Of

stay HTML Creating hyperlinks in is very simple , Just include the text with a label .

Grammar format :

<a href=" Jump to the target " target=" How to pop up the target window "> Text or image </a>

attribute effect
href Used to specify the link target url Address ,( Must attribute ) When applying for tags href Attribute , It has the function of hyperlink
target Used to specify how to open a linked page , Its value is self and blank Two kinds of , among _self As the default value ,__blank To open in a new window .

Be careful :

1. External links Need to add http://www.baidu.com
2. internal link Just link to the internal page name such as < a href="index.html"> home page </a >
3. If there is no link target at that time , Usually will link the tag's href The property value is defined as “#”( namely href="#"), Indicates that the link is temporarily an empty link .
4. Not only can you create text hyperlinks , All kinds of web elements in web pages , Such as images 、 form 、 Audio 、 You can add hyperlinks to videos, etc .

1.6 Comment tags

stay HTML There is also a special label in —— Comment tags . If you need to HTML Add some easy to read and understand notes in the document, but do not need to be displayed in the page , You need to use annotation tags .

Simple explanation :

The comments do not appear in the browser window , But as a HTML Part of the document content , It will also be downloaded to the user's computer , When you look at the source code, you can see .

Grammar format :

<!--  Comment statement  -->      Shortcut keys are :    ctrl + /        perhaps  ctrl +shift + / 

Note the importance :

Notes are for people to see , The purpose is to better explain what this part of the code is for , The program does not execute this code

Team agreement

Generally used for simple description , Such as some state descriptions 、 Attribute description, etc

A space character before and after the comment , The comment is above the code to be annotated , Take a line alone

recommend :

<!-- Comment Text -->
<div>...</div>

Not recommended :

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

2. route ( a key 、 difficulty )

In practice , We can't leave our papers about , Otherwise, it's hard to find them quickly , So we need a folder to manage them .

Directory folder :

It's a normal folder , It just stores what we need to do the page Relevant materials , such as html file , picture wait .

root directory

Open the first layer of the directory folder Namely root directory

There will be a lot of pictures on the page , Usually we create a new folder to store image files (images), Then insert the image , You need to use “ route ” To specify the location of the image file . The path can be divided into : Relative path and absolute path

Relative paths

Based on the location of the web page of the referenced document , And the directory path created . therefore , When a web page saved in a different directory references the same file , The paths used will be different , So it's called relative path .

Path classification Symbol explain
Same level path Just input the name of the image file , Such as <img src="baidu.png" />.
Next level path "/" The image file is located at HTML Files in the same level folder ( For example, the folder name is :images) Such as <img src="images/baidu.png" />.
Up path "../" Add... Before the file name “../” , If it's two levels up , You need to use “../ ../”, And so on , Such as <img src="../baidu.png" />.

Relative paths , It's from the file where the code is located , To find our target file , and What we say At the next higher level at the next lower level Same level In short , It's the picture in HTML Page location

Absolute path

Absolute path to Web The root directory of the site is the directory path of the reference base . It's called absolute , When all pages refer to the same file , The paths used are the same .

“D:\web\img\logo.gif”, Or a full network address .

Be careful :

Absolute paths are used less , We can understand it . But be careful , How it is written Especially symbols \ Not at all Relative path /

3. @ Expanding reading

3.1 Anchor positioning ( difficulty )

By creating anchor links , Users can quickly locate the target content .

There are two steps to creating an anchor link :

1.  Use corresponding id Name mark the location of the jump target . ( Find a target )
  <h3 id="two"> The first 2 Set </h3> 

2.  Use <a href="#id name "> Link text </a> Create link text ( Clicked ) ( Pull the strings )   I also have a grandfather named Bi ..
  <a href="#two"> 

Quick memory :

It's like looking for someone to do something , Find him first , And then pull the relationship , Finally, the effect .

3.2 base label

grammar :

<base target="_blank" />

summary :

1.base You can set the open state of the overall link
2.base writes <head> </head> Between
3. Put all the connections All add by default target="_blank"

3.3 Preformatted text pre label

Tags define pre formatted text .

Surrounded by <pre> label The text in the element usually retains spaces and line breaks . And the text will also appear as an equal width font .

<pre>

   This example demonstrates how to use  pre  label 

   To the empty line and   Space 

   Control 

</pre>

The so-called pre formatted text is , Display the page according to our pre written text format , Keep spaces and line breaks, etc .

With this label , The words inside , It's going to show the way we write , No need for paragraph and line breaks . however , Less use , Because it's not good for overall control .

3.4 Special characters ( understand )

Some special symbols , We will have a html It's hard or It's not convenient. It's direct Use , We can use the following alternative code at this point .

Although there are many , But we usually use less , Remember the space More than no. Less than no. That's all right. , The rest will come back for reference .

summary :

1. So the operator & start , With the semicolon operator ; ending .
2. They're not labels , It's the symbol .
3.HTML The less than sign cannot be used in “<” And the greater “>” Special characters , Browsers will parse them as tags , If you want to display , stay HTML Character entities are used in the source code

Team agreement

recommend :

<a href="#">more &gt;&gt;</a>

Not recommended :

<a href="#">more >> </a>

3.5 html5 The road to development

3.6 What is? XHTML

XHTML It's stricter and purer HTML Code .

  • XHTML Extensible HyperText Markup Language (EXtensible HyperText Markup Language).
  • XHTML The goal is to replace HTML.
  • XHTML And HTML 4.01 It's almost the same .
  • XHTML It's stricter and purer HTML edition .
  • XHTML As a kind of XML The application is redefined HTML.
  • XHTML It's a W3C standard .

3.7 HTML and XHTML What's the difference between ?

  • XHTML Extensible HyperText Markup Language
  • XHTML And HTML 4.01 It's almost the same
  • XHTML It's stricter and purer HTML edition .
  • XHTML As a kind of XML The application is redefined HTML.
  • XHTML yes 2001 year 1 Released on W3C Recommended standards
  • XHTML Supported by all major browsers
  • XHTML The element is based on XML formatted HTML Elements .XHTML It's a strict version of HTML, For example, it requires the label to be lowercase , The label must be properly closed , The order of the labels must be correct , Double quotation marks must be used for all attributes .

4. @ Read deeply

HTML5 The rise of the road

版权声明
本文为[Liang Jing, a little orange lover]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225131451451A.html

Scroll to Top