一.html结构
<!DOCTYPE html> <!-- 声明标准，解析文档 -->
<html>
<head> <!-- 头文档:描述了文档的一些基本的属性和信息 -->
<meta charset="utf-8"> <!-- 使用UTF-8编码 -->
<title>练习</title> <!-- 文档标题 -->
<link href="Demo.css" rel="stylesheet"> <!-- 引入外部CSS样式表,也可引入图标 -->
</head>
<body> <!-- 文档主体，真正可以在页面上看到的内容 -->
</body>
</html>
二.常见元素
1. 标题
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
显示效果：
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
2.水平线
<hr>
显示效果：
类似于markdown中的---和***！
3.列表结构
- 有序列表:ol(和li一起用)
<ol> <li>爱国</li> <li>爱党</li> <li>爱人民</li> </ol>
显示效果：
<ol>
<li>爱国</li>
<li>爱党</li>
<li>爱人民</li>
</ol> - 无序列表:ul(和li一起用)
<ul> <li>大象</li> <li>香蕉</li> <li>猴子</li> </ul>
显示效果：
<ul>
<li>大象</li>
<li>香蕉</li>
<li>猴子</li>
</ul>
4.短语标签
- 粗体strong
我是<strong>歌手</strong>！
效果显示：
我是<strong>歌手</strong> - 斜体em
我是<em>歌手</em>!
效果显示:
我是<em>歌手</em>!
5.链接a
<a href="http://www.baidu.com">百度</a>
显示效果:
<a href="http://www.baidu.com">百度</a>
6.图片img
<img src="点点.jpg" alt="点点" title="点点职业装"/>
效果显示:
点点.jpg
ps：通过超链接显示网络图片
<img src="http://upload-images.jianshu.io/upload_images/1812827-ff47159ace2c147a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/720/q/100">
显示效果：
<img src="http://upload-images.jianshu.io/upload_images/1812827-ff47159ace2c147a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/720/q/100">
7.容器div
<div></div>
通过对div添加css样式，使div呈现不同的样子
