<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script> </body>
</html>
- DOCTYPE 声明了文档类型
- 位于标签 <html> 与 </html> 描述了文档类型
- 位于标签 <body> 与 </body> 为可视化网页内容
- 位于标签 <h1> 与 </h1> 作为一个标题使用
- 位于标签 <p> 与 </p> 作为一个段落显示
可以看出：
- HTML 是用来描述网页的一种语言；
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户；
工具与环境：
- Nodepad++ 编写 html 与 css。
- chrome 浏览器直接运行 html。
基础扩展：
<a>：定义链接
href：指定超链接地址
示例： <a href = "http://www.gameres.com">游资网</a>
<img>：定义图像
示例：<img src="testImg.png" width="400" height="270">
如果不按图标自身的长宽比来配置，图标会按配置的长宽比进行拉伸/压缩
HTML 属性：
上述的 href 就是一种属性，img 标签的图片源、长、宽都是由属性提供的，可以知道：
- 属性都被标注在标签的开头；
- 属性的值都要使用双引号；
id 属性示例：
<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head> <body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change text</button>
</body> </html>
HTML 水平线与注释：
<hr> <!-- 注释测试 -->
<hr>
<hr>
HTML 段落换行：
<p>这个<br>段落<br>演示了分行的效果</p>
HTML 文本格式化：
<b>显示
加粗文本</b> <br> <!-- 换行无效-->
<i>显示斜体文本</i> <br>
<big>显示 大号文本</big> <br>
<small>显示 小号文本</small> <br> <pre> <!-- 换行有效-->
换行可以不用标签
就可以实现
</pre> <p>WWF's goal is to: <!-- 换行有效-->
<q>Build a future where people live in harmony with nature.</q> <!-- <q> 输出引号 -->
We hope they succeed.</p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <!-- 删除效果与下划线效果 -->
留下教程来源方便查询：http://www.runoob.com/html/html-formatting.html。
HTML 链接：
target 属性：定义被链接的文档在何处显示。
<a href="http://www.gameres.com" target="_blank">游资网</a>
将一张图片作为链接点：
<p>图片链接
<a href="http://www.gameres.com">
<img src="testImg.png" width="730" height="270">
</a></p>
链接到当前页面的指定位置：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head> <body>
<p>
<a href="#C2">查看章节2</a>
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p> <h2><a id="C2">章节 2</a></h2>
<p>这边显示该章节的内容……</p> <h2>章节 3</h2>
<p>这边显示该章节的内容……</p> </body>
</html>
HTML 头部：
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |