HTML basis (three) images and hyperlinks

 image

img picture element is embedded into a web page.

grammar

<img src="" alt="" />

img tag common attributes

src jump url
The picture is not displayed when alt text display
High height of the image, and the percentage of pixels may be
Width of the image width, and the percentage of pixels may be
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <img src="http://img3.cache.netease.com/photo/0001/2016-04-26/BLJL1S1I00AO0001.jpg" alt="我是图片" width="20%" height="30%">

</body>
</html>
View Code

Hyperlink label

grammar

 < A the href = "" > SUMMARY </ A > 
 the href: link address, the link may be internal or external links
<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <a href="https://cn.bing.com/">点我</a>
</body>
</html>
View Code

The above code we found in the current page to open the hyperlink, if you want to open a new page, just add target = "_ blank"

<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <a href="https://cn.bing.com/" target="_blank">点我</a>
</body>
</html>
View Code

Common properties

href link address
target link target window, _self page open in the current, _blank opens in a new window
title prompt text link
name link name

Prompt text link

Role: the mouse over a hyperlink, there will be prompt

<html >
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
   <a href="https://cn.bing.com/" target="_blank" title="这是必应网站">点我</a>
</body>
</html>
View Code

anchor

Role: Jump to reach the desired location

grammar

< A the href = "# 1 Anchor Name" > Contents 1 </ A > 
< A the href = "# 2 Anchor Name" > Contents 2 </ A > 
< A the href = "..." name = "name anchor 1" > content. 1 </ A > 
< A the href = "..." name = "name anchor 2" > SUMMARY 2 </ A >
< HTML > 
< head > 
    < title > the Title </ title > 
    < Meta HTTP-equiv = "the Content-the Type" Content = "text / HTML; charset = UTF-. 8" /> 
</ head > 
< body > 
    < A the href = "# the MENU1" > point I arrived a directory </ a > 
    < a href = "# menu2" > point I arrived two directories </ a > 
    < br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a name="menu1"><p>目录一</p></a>
    <a >目录一的内容</a>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a name="menu2"><p>目录二</p></a>
    <a >目录二的内容</a>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>
View Code

Different definitions page anchor

grammar

< A href = "page name # 1 anchor name" > Contents 1 </ A > 
< A href = "..." name = "anchor name 1" > Content 1 </ A >

Our folder write an HTML page, the above named 01.html in the same file

<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <a href="01.html#menu2">点我达到另一个页面</a>

</body>
</html>

E-mail link

<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <a href="mailto:[email protected]">邮件链接</a>

</body>
</html>

file download

Usually when we write the project will confront the uploading and downloading, after uploading the file path will save the file to the database in order to download, after the station can not figure out if the direct download, you can put the file path to a property tag href;

< A the href = "/ User / Test / xxxx.txt" > Download </ A >

So that when users click on the link to open a browser when it will directly download files.

But there is a situation, such as txt, png, jpg, etc. These browsers support direct open file download task will not be implemented, but will open the file directly, this time on the need to give a label to add an attribute "download";

< A href = "/ the User / the Test / xxxx.txt" download = "filename .txt" > Download </ A >

Here download can not write any information, it will automatically use the default file name

 

Guess you like

Origin www.cnblogs.com/zouzou-busy/p/11006965.html