第2章 HTML 和CSS网页开发基础
2.1.6 超链接和图片标记
1.超链接
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
HTML 链接语法
<a href="url">链接文本</a>
//href 属性描述了链接的目标。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>
</body>
</html>
2.图片标记
页面上添加的图片是以<img>实现的
图片标记语法
<img src="uri" width="value" height="value" border="value" alt="提示文字">
<img>标记的属性
| 属性 | 描述 |
|---|---|
| src | 用于指定图片的来源 |
| width | 宽度 |
| height | 高度 |
| borde | 图片外边框宽度，默认为0 |
| alt | 图片无法显示时显示的文字 |
2.2 HTML5新增内容
2.2.1 新增的元素
<section>元素
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
</body>
</html>
上面代码相当于在HTML4中使用<div>标记在页面中定义一个区域
<acticle>元素
<article> 标签定义独立的内容。
<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
<article> 的潜在来源：论坛帖子、博客文章、新闻故事、评论
<header>元素
<header> 标签定义文档或者文档的一部分区域的页眉。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
在一个文档中，您可以定义多个 <header> 元素。
注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
<footer>元素
<footer> 标签定义文档或者文档的一部分区域的页脚。
<footer> 元素应该包含它所包含的元素的信息。
在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。
在一个文档中，您可以定义多个 <footer> 元素。
<aside>元素
<aside>元素用来表示当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息
2.2.2 HTML5新增的input元素类型
表示文本框必须输入Email地址
url
url表示必须输入URL地址
number
表示文本框必须输入数值
range
表示文本框必须输入一定范围内数字值
2.3 CSS样式表
2.3.1 CSS规则
语法格式
选择符{属性:属性值;}
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 其中body h1 h2 p都是选择器，background-color、font-size、color、margin-left都是属性*/
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>
<p>这个段落的左外边距为 50 像素：50px</p>
</body>
</html>
2.3.2 CSS选择器
1.标记选择器
HTML页面由很多标记组成，例如图像标记<img>、超链接标记<a>、表格标记<table>等
示例代码
<!DOCTYPE html>
<html>
<head>
<style>
/*所有p标记设置背景颜色，黄色*/
p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
2.类别选择器
使用标记选择器非常快捷，但是有一定的局限性。如果声明标记选择器，那么页面中所有该标记内容会有相应变化。假如页面有三个<h2>，如果想每个<h2>显示效果不一样，这样标记选择器就无法实现，这时候需要引入类别选择器。
示例代码
<!DOCTYPE html>
<html>
<head>
<style>
/*三个h2，不同颜色*/
.one
{
color:yellow;
}
.two
{
color:red;
}
.three
{
color:black;
}
</style>
</head>
<body>
<h2 class="one">应用了选择器one</h2>
<p>正文内容1</p>
<h2 class="two">应用了选择器two</h2>
<p>正文内容2</p>
<h2 class="three">应用了选择器three</h2>
<p>正文内容3</p>
</body>
</html>>
3.id选择器
id选择器是通过html页面中的id属性来选择添加样式，与类别选择器相同。但是要注意的是，由于html页面中不能包含两个相同的id标记，因此定义的id选择器也就只能被使用一次。
命名id选择器要以"#"号开始，后加HTML标记id的属性值。
示例代码
<!DOCTYPE html>
<html>
<head>
<style>
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
2.3.3 在页面中包含CSS
行内样式就是代码写在具体网页中的一个元素内；比如：<div style="color:#f00"></div>
内嵌式就是在</head>前面写；比如：<style type="text/css">.div{color:#F00}</style>
外部式就是引用外部css文件；比如：<link href="css.css" type="text/css" rel="stylesheet" />
1.行内式
示例代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
2.内嵌式
示例代码
<!!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
</head>
<body>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
<div id="div"></div>>
</body>
</html>
3.链接式
示例代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>
2.4 CSS3的新特性
具体学习，请移步CSS3的新特性
