文章目录
1. 简单应用
1.1 第一个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
1.2 注释
<!-- 这是一个注释 -->
1.3 水平线 < hr >
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
2. 头部
2.1 < title >元素
一共6级标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运维开发玄德公(runoob.com)</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
2.2 < base > 元素
<head>
<base href="https://blog.csdn.net/xingzuo_1840" target="_blank">
</head>
2.3 < link > 元素
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.4 < style > 元素
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
2.5 < 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">
2.6 < script > 元素
3. 区块元素和内联元素
- 内联元素
内联元素在显示时通常不会以新行开始。
实例: < b >, < td >, < a >, < img >
- 区块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: < h1 >, < p >, < ul >, < table >
3.1 div
- 语法
<div style="xxxxxxx">
……
</div>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<p>块外的元素</p>
<div style="color:#0000FF">
<h3>块内 标题。</h3>
<p>块内段落</p>
</div>
</body>
</html>
3.2 span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>孙权
<span style="color:green;font-weight:bold">碧眼</span>
<span style="color:red;font-weight:bold">红胡子</span>
</p>
</body>
</html>
- 显示
4. 段落 < p >
4.1 简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>
</html>
4.2 段落分行 < br >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三顾茅庐</title>
</head>
<body>
<p>大梦谁先觉<br>平生我自知<br>草堂春睡足<br>窗外日迟迟</p>
</body>
</html>
- 输出
大梦谁先觉
平生我自知
草堂春睡足
窗外日迟迟
5. 超链接 < a >
5.1 简单使用 < href >
- 语法
<a href="url">显示部分</a>
- 示例
<a href="https://blog.csdn.net/xingzuo_1840">玄德公</a>
5.2 taget属性
5.2.1 新窗口打开链接（target="_blank"）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<a href="https://blog.csdn.net/xingzuo_1840" target="_blank">玄德公</a>
</body>
</html>
5.2.2 跳出框架（target="_top"）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<a href="https://blog.csdn.net/xingzuo_1840" target="_top">点击这里，跳出框架!</a>
</body>
</html>
5.3 文档跳转
- 语法
<a href="#跳转ID">跳转入口</a>
<a id="跳转ID">跳转到的位置</a>
<a href="http://www.xuandegong.com/html/#跳转ID">跳转入口</a>
- 示例
点击 “查看张飞的信息”，页面跳到下边“张飞的信息”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>
<a href="#ZhangFei">查看张飞的信息</a>
</p>
<h2>刘备的信息</h2>
<p>姓刘名备字玄德，吧啦吧啦吧啦……</p>
<h2>诸葛亮的信息</h2>
<p>复姓诸葛单名亮字孔明，号卧龙，吧啦吧啦吧啦……</p>
<h2>关羽的信息</h2>
<p>吧啦吧啦吧啦……</p>
<h2><a id="ZhangFei">张飞的信息</a></h2>
<p>吧啦吧啦吧啦……</p>
<h2>赵云的信息</h2>
<p>吧啦吧啦吧啦……</p>
<h2>庞统的信息</h2>
<p>吧啦吧啦吧啦……</p>
<h2>马超的信息</h2>
<p>吧啦吧啦吧啦……</p>
<h2>黄忠的信息</h2>
<p>吧啦吧啦吧啦……</p>
<h2>魏延的信息</h2>
<p>吧啦吧啦吧啦……</p>
<h2>姜维的信息</h2>
<p>吧啦吧啦吧啦……</p>
</body>
</html>
5.3 图片链接
- 语法
<a href="目标url">
<img border="边框宽度" src="图片地支" alt="标题" width="100" height="100"></a>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>诸葛亮的图片链接:
<a href="https://blog.csdn.net/xingzuo_1840">
<img border="5" src="https://p0.ssl.qhimgs1.com/sdr/400__/t0146ca81c57055a2ae.jpg" alt="HTML 教程" width="100" height="100"></a></p>
</body>
</html>
- 结果
5.4 发送邮件
<a href="mailto:发送给谁?cc=抄送给谁&bcc=暗抄送给谁&subject=标题&body=邮件内容" target="_top">发送邮件!</a>
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>
<p>
这是电子邮件链接：
<a href="mailto:GuanYu@xishu.com?cc=ZangFei@xishu.com&bcc=ZhuGeLiang@xishu.com&subject=2022年福利&body=2022年好事连连，心想事成" target="_top">发送邮件!</a>
</p>
</body>
</html>
