HTML链接标签图片标签_html link引入图片-CSDN博客

本文链接：https://blog.csdn.net/csdn_wpno1/article/details/74852931

HTML基本结构

<html>：是整个文档的根节点，它包含两个子节点：

<head>：主要描述文档的设置信息，比如字符集、标题等

<body>：是文档的主体部分，需要呈现的内容都安排在其中。

注释：

快捷键：ctrl+shift+/（这里的开发工具是WebStorm）

形式：

作用：对代码进行说明，方便程序员阅读和理解。注释对于计算机的执行结果没有任何影响。

注释非常重要，代码正确是前提，但清晰也是一个非常重要的原则，程序员需要养成注释的好习惯。

<html>
	<head>
  	这里是文档的头部 ... ...
  	...
	</head>
	<body>
 	 这里是文档的主体 ... ...
 	 ...
	</body>
</html>

基础标签

2.1标题标签

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。用于显示页面的标题信息 ,既包含了格式信息，同时提供了语义信息。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

2.2段落标签

段落（paragraph）标签标示页面的一个段落,自动换行。

<p>This is some text in a very short paragraph</p>

2.3链接标签

链接标签<a>的作用是跳转，包括页间跳转和页内跳转。

(1)页间跳转

href属性指定链接的目标URL地址

target属性指定打开目标页面的方式，其取值包括

_self:在当前页面中打开，默认；

_blank:在新的页面中打开；

_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效

_top:这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

title属性指定提示信息

（2）页内的跳转

在目标标签处指定id="……"，在链接处指定href="#……"，name属性也是可以的，但是必须是<a>标签，而id则没有该要求。

id属性是页面元素的唯一标识

“锚点”：anchor

<a href="http://www.w3school.com.cn">W3School</a>

2.4图片标签

在网页中嵌入图片

src属性：source，图片资源的URL地址，可以是本地的，也可以是远程的。

<imgsrc="月河街.jpg">

<imgsrc="https://youimg1.c-ctrip.com/target/100m090000003n6a32DF4.jpg">

alt属性：alternative（可替代的），即当资源不存在时，替代显示的文字内容。

路径：资源路径相对与盘符的位置。

相对路径：就是相对于自己的目标文件位置。

绝对路径：是指文件在硬盘上真正存在的路径。

".."表示上一级目录

"."表示当前目录

在同一级目录：

<imgsrc="p1.jpg">

在上一级目录：

<imgsrc="../p1.jpg">

在下一级目录：

<imgsrc="pic/p1.jpg">

2.5杂项

<span>:可以将部分文本独立出来，被用来组合文档中的行内元素。

<p><span>some text.</span>some other text.</p>

<br>:强制换行，可插入一个简单的换行符。是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

<hr>:水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

<base>:设置页面的基准地址，从而简化地址的书写。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>