Home > Developer > Web Develop
HTML needs to remember, or commonly used is not many, such as DIV,SPAN,H1~H6, etc., sticky is more commonly used
First, the font label
The font label contains: H1~h6, (useless in the back) <font>, <u>, <b>, <strong><em>, <sup>, <sub>
TitleThe title is defined using the to label. defines the maximum caption, which defines the smallest title. With the Align property, the property value can be: Left, center, right.
Second, the layout label paragraph label <p>Paragraph: is the abbreviation of English paragraph.
Property:
- Align= ' attribute value ': Alignment. Property values include: Left, center, right
Example:
<p> This is a paragraph </p><p align= "center" > This is another paragraph </p>
Effect:
OK, the following words, we must firmly remember. HTML tags are graded. HTML divides all the tags into two categories:
- Text-level Tags: p, span, a, B, I, U, EM. text, images, and form elements can only be placed in the label.
- Container-level Tags: div, h-series, Li, DT, DD. You can put anything in a container-level label.
From the beginning of the first day of learning p, we must remember:p tag is a text-level label, p can only put text, pictures, table elements . The others are not to be put.
Wrong wording: (Put the H-series label in P)
<p> I am a paragraph
The effect is as follows:
Display, the browser does not allow you to do so. We use Chrome's F12 review element to find out that the browser has closed the P itself and won't allow you to package the H2.
Ps: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.
Block-level labels <div> and <span>Div and span are very important tags, the semantics of Div is division "segmentation", and the semantics of span is span "scope, span". In the CSS course you will know that these two things are the most important "boxes".
Div: Treats the contents of the tag as a block (division). Must occupy a single row.
Attributes of the div tag:
align="属性值": Sets the position of the block. Property values can be selected: left, right, center
<span> and <div> The only difference is that there <span> is no line break, but a <div> newline.
If you insert these two elements separately in a Web page, you will not have any effect on the page. These two elements are specifically designed to define a CSS style. Or, div+css to implement various styles.
Example:
<body> <div> navigation bar </div> <div> Center banner </div> <span> Road Fly </span> <span>alex</span> </body>
Effect:
Div in the browser, the default is not to add any effect, but the semantics change, the div is a small area of all elements.
A div tag is a container-level label, where everything can be put, or even a div itself.
Span is also a label that expresses "small areas, small spans," but is a text-level label.
That is, span can only place text, pictures, form elements. Span inside can not put P, H, UL, DL, OL, Div.
Span Examples:
<p> Product Brief: <span> <a href= "" > Details </a> <a href= "> Production date </a> </span></p>
div Example:
<div class= "header" > <div class= "logo" ></div> <div class= "NAV" ></div> </div> <div class= "Content" > <div class= "Guanggao" ></div> <div class= "Shop" ></div> </div><div class= "Footer" ></div>
So, we affectionately call this model "div+css". DIV tags are responsible for the layout, responsible for the structure, and are responsible for chunking. CSS is responsible for styling .
PS: This class attribute name is very much related to CSS, and the CSS module will detail this piece of content.
Content Center Label<center>At this point the center represents a label, not a property value. As long as the content in this tag, will reside in the middle of the browser.
Example:
<center> <p> Pony Brothers </p></center>
The effect is as follows:
The center tag is not recommended for use in H5.
Predefined (pre-formatted) Tags:<pre>Meaning: All of the white space characters (spaces, line breaks) are preserved, and the output is unchanged (tell the browser not to ignore spaces and blank lines)
Description: The label is virtually unnecessary during a real row of pages <pre> . However, it is used in PHP to print an array.
Example:
<pre> Goose and Goose Li bai poems to Heaven song white hair floating green water </pre>
The effect is as follows:
, it seems that the pre tag part of the font is smaller, and there is indentation, OK, this is actually the browser of the ghost.
Why do you have to have <pre> this label? The answer is:
All browsers ignore spaces and blank lines by default.
Well, it's a little bit of a label, actually. The layout label will be introduced to you here.
Third, hyperlinksThere are three forms of hyperlinks:
1. External link : Link to external file. Example:
<a href= "new.html" > Click to go to New page </a>
A is the anchor meaning of English "anchor", as if this page throws an anchor to another page. is a text-level label.
HREF is an hypertext reference abbreviation for English hypertext address. Read "Drink Rafe", do not read as "drink husband".
Effect:
Of course, we can also directly click on the link to access a URL. examples are as follows;
<a href= "http://www.baidu.com" target= "_blank" > enter Baidu </a>
2. Anchor Chain Connection :
Refers to a hyperlink to a name, the role of this page or other pages in different locations to jump . For example, at the bottom of the page there is an upward arrow, click the arrow back to the top, this is the use of the anchor link.
First we create an anchor point , that is, use name a property or id attribute to give a name to that particular location. The effect is as follows:
Explained in:
11 lines of code indicate that the top of the anchor is named top.
The hyperlink is then set at the bottom and will go back to the top when clicked (at this point, the end of the URL in the page also appears #top ). Note that the number in the Red box section # should not be forgotten , indicating that jumping to a specific location named top is a rule. If the number is missing # , clicking on it will jump to the top file or the top folder.
If we write the 23rd line of code in:
<a href= "New.hhml#top" > Back to Top </a>
Then, click to jump to the .html top of the new page 锚点 .
Description: The Name property was previously used by HTML4.0, and the id attribute was HTML4.0 before it was used. For forward compatibility, both the name and ID properties are written, and the values are the same.
3. Mail link :
code example:
<a href= "Mailto:[email protected" > Contact us </a>
Effect: After clicking, it will pop up Outlook, which is not very useful.
Prerequisite: The mail client must be installed on the computer, and the message related information is configured
Special few links:Return to location at the top of the page
<a href= "#" > Jump to Top </a>
Related to JS:
<a href= "Javascript:alert (1)" > Content </a> <a href= "javascript:;" > Content </a>
- JavaScript: Indicates that nothing is done, so there is
<a> no response when clicked. For example: <a href="javascrip:;"> content </2
- JavaScript: Indicates that a piece
<a> of JavaScript code is executed when the default action is triggered. For example:<ahref="javascript:alert()">内容</a>
Properties of a hyperlink
href: Destination URLtitle: hover text.name: used primarily to set the name of an anchor point.target: tells the browser how to open the target page. targetthe properties have the following values:
_self: Displayed in the same Web page (default value)_blank: opens in a new window ._parent: Display in parent window_top: Display in the top-level window
Blank is the meaning of "white space", which means creating a new blank window. Why 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, if it target=”_blank” is written, it is opened in a new blank tab.
Ps:a is a text-level labelFor example, if all the text in a paragraph can be clicked, it should be p containing a;
<p> <a href= "" > Paragraph Paragraph paragraph paragraph paragraph paragraphs </a></p>
Instead of a package p:
<a href= "" > <p> Paragraph Paragraph paragraph paragraph paragraph paragraphs </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.
Four, the picture label IMG: Represents a picture. is a unilateral mark.
IMG is a self-enclosing tag, also known as a single label.
Types of images that can be inserted:
The types of images that can be inserted 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.
srcHere is an attribute of the picture:
srcProperties: Refers to the path of the picture.
There are two ways to write a path to a picture : relative path, absolute path
1.One: relative pathRelative to the path where the current page is located. Two tokens . and .. tables represent the current directory and the parent path.
Example 1:
<!--the picture in the current directory--> <!--the picture-->
IMG is shorthand for image "image", and SRC is the abbreviation for English source "resource".
Example 2:
The above code means that the current page has a side-by-side folder images , and a picture is stored in the folder images .1.jpg
2, two:Absolute Path(1) Absolute path starting with the drive letter. Example:
(2) Network path. Example:
Summary of relative paths and absolute pathsThe benefit of relative paths: The relative path relationship between files and pictures is constant regardless of where the site is copied.
Relative path usage There is a premise that the Web file and your picture must be on a server.
Question: My page is in the C drive, but the picture is in D, can I insert it?
Answer: With relative path cannot, with absolute path also cannot.
Note: You can use file://to insert, but this method doesn't make any sense! Because there is no so-called C-drive, D-Disk on the server.
The following method is line, but there is no engineering significance, because the server does not have a drive letter, the Linux system does not have a drive letter:
To summarize:
We are now either in the A tag, img tag, if you want to use the path. Only two paths are available, that is, the relative path and the absolute path.
The relative path is: /image/this path. Start from yourself and find someone else;
The absolute path is the path that starts with http://.
Absolutely not allowed to use the file://beginning of the thing, this is completely wrong!
Common other properties of the IMG tag
width: Widthheight: Heighttitle: prompt text . Public properties. The text that appears when the mouse hovers over it.align: Refers to the horizontal alignment of the picture, the property value can be: Left, center, rightalt: When the picture does not appear, instead of the picture display content. Alt is the meaning of English alternate "substitution". (Some browsers do not support)
47th Day about HTML
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
