web开发
HTML 定义了网页的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<a id="demo" href="https://www.runoob.com">这是一个链接</a>
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
</body>
</html>
|
各个元素的说明：
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
<a> 元素定义一个链接
<img> 元素定义一个图片
|
HTML 属性
HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=”value”; href=”https://www.runoob.com"; id=”demo”
属性之间空格分开
CSS 描述了网页的布局
CSS其实是HTML的<style>元素
内部样式表(Internal style sheet)
在HTML的<head>段定义各个元素的<style>：
1
2
3
4
5
6
7
| <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
|
外部样式表(External style sheet)
为了迁移方便，独立出去成为一个CSS文件，在HTML中<head>部分用<link>引用：
1
2
3
| <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
|
CSS文件：
1
2
3
| hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
|
内联样式(Inline style)
直接在HTML元素里设置属性：
1
| <p style="color:sienna;margin-left:20px">这是一个段落。</p>
|
JavaScript 控制了网页的行为
JS是HTML的<script>元素：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
|
JS可以直接写HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
|
JS可以对事件作出反应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>
|
JS可以改变HTML的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");
x.innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
|
JS可以改变HTML图像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
|
JS可以改变HTML样式
1
2
3
4
5
6
7
| <script>
function myFunction()
{
x=document.getElementById("demo")
x.style.color="#ff0000";
}
</script>
|
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
|
HTML DOM (文档对象模型)
DOM（Document Object Model）定义了访问 HTML 和 XML 文档的标准：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
前述JS代码即为JS DOM，利用JS改变HTML的内容。
Note
markdown里写html代码时不能顶格，要给缩进，元素语句要加引号，作为代码出现，不然网页加载不出来。
