HTML5 Basics -5 HTML images, links

First, the URL

Directory structure

(1) The directory is the name of the folder in the Web site

-Contains multiple directories

-Each directory contains different parts of the site

(2) The home directory of the Web site, called the root directory of the Web site

-Other folders located in the root directory, called subdirectories

-Each sub-directory will contain the next level subdirectory of the specific function

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7D/A8/wKioL1bs0tqjIyX_AAEOkoPIqfU545.png "title=" Web.png "alt=" Wkiol1bs0tqjiyx_aaeokopiqfu545.png "/>

Url

(1) URL (Uniform Resource Locator): Unified Resource Locator to identify any resource on the network

-Text, pictures, audio and video files, paragraphs, or other hypertext

(2) path, which is the route from the current position to the target location lock

(3) There are three main forms of path in Web page

-Absolute path

-Relative path

-Root Relative path

Absolute path

(1) refers to the full path of the file from the Advanced directory, regardless of the current path, using an absolute path to always find the file to be linked

(2) The complete URL composition

-Protocol, host name, directory path, file name

Http://www.w3c.org/TR/CSS/syndata.html

/http: Protocol name (separated by://)

Www.w3c.org: Host Name

/tr/css/: Directory path

syncdata.html: The file name to link to

Relative path

(1) Relative path

-Refers to the location of the file relative to the current file, which includes the directory name, or a path to a file that can be found from the current directory

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7D/A8/wKioL1bs1X_g7DWbAAEK-LkYfo4547.png "title=" Web.png "alt=" Wkiol1bs1x_g7dwbaaek-lkyfo4547.png "/>

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7D/AC/wKiom1bs1QnhvT2AAAFNit1ADTk774.png "title=" Web.png "alt=" Wkiom1bs1qnhvt2aaafnit1adtk774.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7D/AC/wKiom1bs1SPSINyDAAE1Ee5YFYA522.png "title=" Web.png "alt=" Wkiom1bs1spsinydaae1ee5yfya522.png "/>

Second, the image

Image format

(1) JPEG (graphic image Joint Expert Group, Join photopraphic Experts Group)

-Using lossy compression algorithm, large compression ratio

(2) GIF (graphic interface format, graphics, Interface format)

-Use 256 color method to compress the image, the color will have a large distortion

-Mainly used for line-based images, or the image surface is very small, and GIF supports animations and transparent images

(3) PNG (Portable Web graphics, Portable network Graphic)

-Lossless compression with 8-bit, 24-bit, 32-bit three forms

-Supports transparent color (PNG24 bit not supported), but does not support animation

-Display color up to 16.7 million kinds

Image elements

(1) Adding images to the page using the element

-Empty Tag

(2) required attribute: SRC

(3) Common properties: width, height

"img/rose.jpg"

Third, the link

Link Elements <a>

(1) Use the <a> element to create a hyperlink with the following syntax:

(2) <a href= "" target= "> Text </a>

-href attribute: Link URL

-target property: _blank, _self, etc.

-Name attribute: Anchor Point Name

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7D/AC/wKiom1bs4BWwwzb2AACsSWKhmIM852.png "title=" Web.png "alt=" Wkiom1bs4bwwwzb2aacsswkhmim852.png "/>

Presentation of links

(1) The destination document is a download resource

<a href= "Download.zip" > Downloads </a>

(2) e-mail links

<a href= "Mailto:[email protected" > Contact us </a>

(3) Returns the empty link at the top of the page

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

(4) Link to JavaScript

<a href= "javascript: ..." >js features </a>

Anchor Point

(1) An anchor is a mark of a line in a document

-For linking to a location in a document

(2) An anchor is a mark of a line in a document

-Define anchor points

<a name= "Achorname1" > Anchor point </a>

-Link to Anchor point: Add # before the anchor name

<a href= "#achorname1" >...</a>

If the text/image has the same page as the anchor point

<a href= "Page url#achorname1" >...</a>

If the text/image has a different page than the anchor point

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7D/AC/wKiom1bs4nTRh5oYAAEZuR8dMD8226.png "title=" Web.png "alt=" Wkiom1bs4ntrh5oyaaezur8dmd8226.png "/>

Summary: This chapter mainly introduces the use of HTML images and links.

This article from the "Technical Exchange" blog, declined reprint!

HTML5 Basics -5 HTML images, links