HTML链接
<a>标签可以使用链接。
链接的常用属性：
- href属性：创建指向另一个文档的链接
- name属性：创建文档内的书签
- target属性：打开的文档在何处被显示
1
| <a href="http://www.baidu.com/" target="_blank">Visit BaiDu</a>
|
HTML图像
<img>标签用于定义图像。
url可以是网络地址，也可以是相对路径。
HTML头部
**<head>**是所有头部元素的容器，可以包含脚本，指示样式文件的位置。
以下标签都可以添加到head部分：
<title>、<base>、<link>、<meta>、<script>以及<style>
title
<title>**定义文档的标题**。
base
**<base>**标签为页面上所有标签默认地址或默认目标。
1
2
3
4
| <head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
|
link
<link>**标签定义文档与外部资源之间的关系**。
常用于连接样式表：
1
2
3
| <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
|
style
<style>标签用于为HTML文档定义样式。
1
2
3
4
5
6
| <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
|
<meta>提供文档的元数据。
规定页面的描述、关键词、文档的作者、最后修改时间及其它元数据。
1
| <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
|
1
| <meta name="keywords" content="HTML, CSS, XML" />
|
HTML颜色
颜色是由三原色 红绿蓝 混合而成。
颜色由十六进制符号定义，符号由RGB组成。
每种颜色最小值是**#00（0），最大值是#FF**（255）。
| Color |
Color HEX |
Color RGB |
|
#000000 |
rgb(0,0,0) |
|
#FF0000 |
rgb(255,0,0) |
|
#00FF00 |
rgb(0,255,0) |
|
#0000FF |
rgb(0,0,255) |
|
#FFFF00 |
rgb(255,255,0) |
|
#00FFFF |
rgb(0,255,255) |
|
#FF00FF |
rgb(255,0,255) |
|
#C0C0C0 |
rgb(192,192,192) |
|
#FFFFFF |
rgb(255,255,255) |
大多数浏览器支持颜色名集合。
HTML CSS
浏览器读取到样式表时会按样式表对文档进行格式化。
添加样式表有下列三种方式：
外部样式表
通过外部样式表，修改一个文件即可应用到整个站点。
通过link链接到一个外部样式文件。
1
2
3
| <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
|
内部样式表
当单个文件需要特别样式时，可以使用内部样式表（在head标签内使用style标签）：
1
2
3
4
5
6
| <head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
|
内联样式
当需要修改个别元素的样式时，可以使用内联样式（在标签内部使用style属性）：
1
2
3
| <p style="color: red; margin-left: 20px">
This is a paragraph
</p>
|
HTML JavaScript
<script>标签可以定义脚本（JavaScript）。
<script>标签既可以包含脚本语句，也可以通过src属性指向外部脚本文件。
如需选取HTML元素，常用**document.getElementById()**方法。
1
2
3
| <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
|
JS更改内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>JavaScript 可以更改 HTML 元素的内容：</p>
<button type="button" onclick="myFunction()">点击我！</button>
<p id="demo">这是一个演示。</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
|
JS更改样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 可以更改 HTML 元素的样式。</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">点击我！</button>
</body>
</html>
|
JS更改属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>在这里，JavaScript 更改了图像的 src 属性。</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "/i/eg_bulboff.gif"
} else {
pic = "/i/eg_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="/i/eg_bulboff.gif" width="109" height="180">
<p>
<button type="button" onclick="light(1)">开灯</button>
<button type="button" onclick="light(0)">关灯</button>
</p>
</body>
</html>
|
禁用脚本提示
**<noscript>**标签的内容将在不支持JavaScript脚本的浏览器显示。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>
<p>不支持 JavaScript 的浏览器将显示 noscript 元素内的文本。</p>
</body>
</html>
|
