基础部分
首先是html5的声明部分
<!DOCTYPE html>
The new character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">
接着是各种标签，可以当成各种组件来用：
<!-- 这是注释的格式 -->
<hr />可创建水平线
<h1>标题，数字是几就是几级标题</h1>
<p>段落</p>
<a href="http://www.baidu.com">超链接</a>
<img src="https://profile.csdnimg.cn/5/1/0/0_qq_52109865" width="104" height="142" /> 图片
然后是html元素：
首先是语法：
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
然后是body元素：
<body>
<p>展示body元素的用法</p>
</body>
//一般来说，body元素定义了html的主题
//元素可以拥有另一个元素
接着是元素：
上面的<body>元素可以包含在<html>元素里面
<html>
<body>
<p>展示</p>
</body>
</html>
属性，拿超链接举例子:
<a href="http://www.baidu.com">超链接</a>
其中的"href"就是超链接的属性
再比如：
<body bgcolor="#164481">
<h1>你好!世界</h1>
</body>
这个"bgcolor"就是body元素的属性
接下来举例适合大多数html元素的属性名称：
class 规定元素的类名（classname）
id 规定元素的唯一 id
style 规定元素的行内样式（inline style）
title 规定元素的额外信息（可在工具提示中显示
接下来举几个例子：
style
<body style="background-color:yellow">
<p style="background-color:green">这是段落</p>
</body>
style替代了bgcolor，font等直接方法，可直接使用
style="font-family:****"来定义字体属性
使用 style="background-color:****"来定义背景颜色
使用 style="text-align:center" 来定义对其方式
如：
<p style="font-family:arial;color:red;font-size:20px;">段落</p>
来直接定义段落属性
文本格式化：
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
"计算机输出"标签：
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
引用、引用和术语定义：
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
实例展示
利用HBuilderX实现一些例子，结合当今时事，我做了一个简单的东奥宣传界面
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
你好，冬奥
</title>
</head>
<body bgcolor="##99CCFF">
<h1>你好!这里是北京冬奥会</h1>
<p>欢迎大家收看<del>东奥会</del>，冬奥会，
这里是<a href="https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC/128981",style="color:red;font-size:20px;">北京</a>，
世界上<big>唯一个</big>举办过两次奥运会的城市</p>
<p><img src="2.png"width="1200" height="600" ></p>
</body>
</html>
简单实现学校的官网界面
具体代码如下：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zzuli</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="top"></div>
<div class="log">
<div class="left"></div>
</div>
<div class="menu">
<div class="menu_list">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">学院概况</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">师资队伍</a></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">学术研究</a></li>
<li><a href="#">招生与就业</a></li>
<li><a href="#">合作交流</a></li>
<li><a href="#">校园文化</a></li>
<li><div class="right">
<form>
<input type="text">
</form>
</div></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="content_img"></div>
</div>
</div>
<div class="footer">
<div class="footer_content">
<p>水印了属于是</p>
</div>
</div>
</body>
</html>
css代码：
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
}.clear{
clear: both;
}
.header{
width: 100%;
height: 171px;
}
.header .top{
width: 100%;
height: 5px;
background: #0b6cb8;
}
.header .log{
width: 100%;
height: 116px;
margin: 0 auto;
background: #164481;
}
.log .left{
float: left;
width: 330px;
height:60px ;
background-color: #164481;
background: url("../img/xylogonew.png");
margin-top: 15px;
}
.header .menu{
width: 100%;
height: 50px;
background: #164481;
}
.menu .menu_list{
width: 1300px;
margin: 0 auto;
}
.menu_list.right{
float: right;
width: 200px;
height: 38px;
background: blue;
margin-top: 0px;
}
.menu .menu_list ul li{
line-height: 40px;
padding:0px 24.5px;
list-style: none;
float: left;
}
.menu .menu_list ul li:hover{
background: #164481;
}
.menu .menu_list ul li a{
text-decoration: none;
color: white;
font-size: 14px;
}
.content{
width: 996px;
height: 1175px;
margin: 0 auto;
}
.content .content_img{
width: 996px;
height: 365px;
background: url("../img/jifang203.jpg") no-repeat 0 0;
background-size: 996px 365px;
margin-top: 10px;
margin-bottom: 10px;
}
.footer{
width: 100%;
height: 92px;
background: #164481;
}
.footer .footer_content p{
color: white;
text-align: center;
line-height: 92px;
font-size: 13px;
}
是一个非常简陋的官网了属于是