442496A4-76B5-456B-8F4D-23F6087EB398.png
AFB43C8D-AF05-46C0-AEC8-9F94A48A9A3C.png
7631B254-121E-43E5-9375-D6B99EA8428B.png
HTML使用标签 <a>来设置超文本链接。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>
<a href="url">链接文本</a>
比如<a href="http://www.runoob.com/">访问菜鸟教程</a>
属性：
①target：使用 target 属性，你可以定义被链接的文档在何处显示
_blank 在新窗口中打开
_self 默认的 在当前打开
_parent 在父框架中打开
_top 在整个窗口中打开
<a href="https://www.baidu.com/" target="blank"">百度首页</a>
②id ：id属性可用于创建在一个HTML文档书签标记。
id="tips" 在HTML文档中插入ID
<a id="tips">有用的提示部分</a>
href="#tips" 在HTML文档中创建一个链接到"有用的提示部分(id="tips"
<a href="#tips">访问有用的提示部分</a> ）
html-links.html#tips 从另一个页面创建一个链接到"有用的提示部分(id="tips"）
<a href="http://www.runoob.com/html/html-links.html#tips">
title设置问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base href="http://www.runoob.com/images/" target="_top">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
在头部设置他的head
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>
设置文档标题
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
相当于iOS开发中的baseURL
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
HTML <base> 元素
<head>
HTML <base> 元素
<base href="http://www.runoob.com/images/" target="_blank">--标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
HTML <link> 元素
<link rel="stylesheet" type="text/css" href="mystyle.css">--标签定义了文档与外部资源之间的关系。
HTML <style> 元素
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>---标签定义了HTML文档的样式文件引用地址.
HTML <meta> 元素
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
</head>
HTML <script> 元素
image.png
HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式
text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>
什么是外部样式？内联样式？内部样式表？
外部样式表：
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况
你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表
，其书写格式为
<link rel="stylesheet"type="text/css"href="xxx.css"
内部样式表：
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文
档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
h1 {color: sienna;}
body{background-color:black}
</style>
</head>
内联样式表：
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法
，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用
样式（style）属性。
<h1 style="color:red">helloworld></h1>
HTML 图像- 图像标签（ <img>）和源属性（Src）alt 属性用来为图像定义一串预备的可替换的文本。
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边，通过设置left跟right设置图片在文字左边还是右边
////创建一个图片，图片链接
<p>创建图片链接:
<a href="http://www.alibaba.com">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
/////本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接
<p>点击太阳或其他行星，注意变化：</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.alibaba.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.fang.com">
</map>
网友评论