Front End (1) HTML

Source: Internet
Author: User

To view the source code for the specified element in the page:
In the browser, press F12 to open "Check Elements", tab select "Elements" or "element", click on the upper left corner of the "SELECT Element" button, the button becomes blue, you can use the mouse to select the specified element in the page, click on the source bar will automatically jump to the source code corresponding to the element.

Each label has a default style, you can customize the label, or you can change the default style of the label.

H1~h6:
Six Standard title tags
Suggest a page only a H1 tag, is advantageous for search engine search.

P:
Paragraph label, end Wrap (display:block)

B:
Bold label, no Line break (Display:inline)

Strong:
Emphasis on bold tags, no line break (display:inline), facilitate search engine search

I:
Italic label, no Line break (Display:inline)

Em:
Emphasis on italic label, non-line break (display:inline), facilitate search engines

HR:
Horizontal line Label

Br:
Line break label

Special symbols
Less than number:--<
Greater than sign:-->
Space Number:--12    34
Blank bit:--12 34
& Character:--&
Copyright Symbol:--©

A:
Hyperlink label

<ahref= "Http://www.baidu.com"Target= "_blank">Go to Baidu</a><!--link jump to Baidu -<ahref="#">#</a><!--Refresh the current page -<ahref= "javascript:void (0);">Dead link</a><!--dead link, won't jump -<ahref= "#box">Anchor Point</a>

<!--

Only the A tag with the Name property has an anchor
other tags can implement an anchor point through the id attribute, a tag can also be an anchor point with an id attribute
Target property
_self The current page opens the default
_blank opens in a new window
_ Open in
_top top-level frame open
ID name
ID can only have one name, and the same name can only appear once in the page, equivalent to the identity card number
Class name
class can appear multiple times, And the same name can have multiple, equivalent to a person name
-->
IMG:
Image label

<src= "Http://mat1.gtimg.com/ipad/qq_time/imgs/slider_20180216_chunjie.jpg" > <  src= "img/0.jpg"  alt= "cute"  width= "Max"  Height= "Max">

<!--

SRC definition picture Path
Alt picture description, for SEO search
width defines picture widths
Height defines picture heights
When Width/height gives only one value, another value is scaled, if not configured, the default picture size
-

UL > LI:
Unordered list
Quick action: Enter ul>li*4, press TAB, automatically appear under the UL tag 4 li tags appear

<ultype= "Square"><Li>1</Li><Li>2</Li><Li>3</Li><Li>4</Li></ul>

Type property, with a value of

Disc default Small black dot
Circle Hollow Circle
Square Small Square box

OL > LI:
Ordered list

<oltype= "1"Reversed Start= "2"><Li>10</Li><Li>20</Li><Li>30</Li><Li>40</Li></ol>

Type property, with a value of

1 1 2 3 4 default
A A B c D
A a B C D
I
I
Reversed attribute Descending sort
Start property ordered list start value

DL > DT > DD:
Definition List

<DL><DT>Title</DT><DD>Item 1</DD><DD>Item 2</DD><DD>Item 3</DD></DL>

Div and Span:

<div> tags divide the document into separate, distinct parts. It can be used as a strict organizational tool and is not associated with any format.
<span> tags are used to combine inline elements in a document.
DIV, one line alone (Display:block)
SPAN, not exclusive row (Display:inline), does not support setting the width height, which is supported by the inline element.
If the display of the div is set to inline, the Div also does not support setting the width height, does not own a row, and becomes the same as the span label, and the Display:block,span to the span tag is also a div
Inline block elements: Display:inline-block block-level elements can be displayed horizontally, and inline elements can be set to a wide height
Hidden elements: Display:none includes his child tags, which do not occupy a position in the page, the equivalent of disappearing

Style settings:
Insert <style> tags in the

<style>Div{width:100px;Height:100px;background:Blueviolet;Display:Inline-block;vertical-align:Top;}span{background:Blue;}. Box{Display:None;}</style>

<style> tag, the label is configured, the tag name is used to borrow curly braces, configure the style; To configure a class, add a '. ' Before the class name. To configure an ID, add a ' # ' before the ID name.

Front End (1) HTML

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.