前端HTML5_02

HTML样式：

1.外部样式表    在head标签中引用已经创建好的css文件，引用格式：<link rel="stylesheet" type="text/css" href="mystyle.css">   link是一个自结束标签

2.内部样式表    在head标签中创建一个style标签。

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

3.内联样式       直接在某个标签内部设定style。格式：<p style="font-family:verdana;color:red">This text is in Verdana and red</p>

<style>定义样式定义。

<link>定义资源引用。

<div>定义文档中的节或区域（块级）。

<span>定义文档中的行内的小块或区域。

超链接：

<a>标签的属性

Target 属性，定义被链接的文档在何处显示。默认为当前页面。<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 属性，规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。

使用命名锚（named anchors）可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到命名锚了。

步骤：1.  创建命名锚    <a href="#tips">说明</a>

            2.创建命名锚的超链接   （1）在同一个文档中创建指向该锚的链接：<a herf="#tips">查看说明<\a>

                                                   （2）在其他页面中创建指向该锚的链接：<a herf="网址#tips">查看说明<\a>

<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>

<p>This chapter explains ba bla bla</p>

HTML图像：

<img>定义图像。是自结束标签。用src导入图像。Alt替换文本属性。图像加载较慢，因此慎用图片。

<map>定义图像地图。可以形成图像映射。img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

 <area>定义图像地图中的可点击区域。是一个自结束标签。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

html路径

<img src="picture.jpg">picture.jpg 位于与当前网页相同的文件夹

<img src="images/picture.jpg">picture.jpg 位于当前文件夹的 images 文件夹中

<img src="/images/picture.jpg">picture.jpg 当前站点根目录的 images 文件夹中

<img src="../picture.jpg">picture.jpg 位于当前文件夹的上一级文件夹中