1.1 HTML
HTML，即超文本标记语言。HTML文本是由HTML命令组成的描述性文件，HTML命令可以是说明文字、图形、动画、声音、表格、链接等。
HTML5的文档的结构：
<!DOCTYPE html> //文档类型说明 <html> //根标签 <head> //头部标签 <meta charset="utf-8"> <title></title> </head> <body> //主体标签 </body> </html>
1.2 HTML5的常用标签
<div>和<span>：<div>是一个块级元素，它包含的元素会自动换行；而<span>是行内元素，在它的前后不会换行。<span>没有结构上的意义，只是单纯的应用样式。
<b></b>和<strong></strong> 文字以粗体方式显示(HTML推荐使用<strong>标签)
<i></i>和<em></em> 文字以斜体方式显示(HTML推荐使用<em>标签)
<s></s>和<del></del> 文字以加删除线方式显示(HTML推荐使用<del>标签)
<u></u>和<ins></ins> 文字以加下画线方式显示(HTML不赞成使用<u>标签)
<p>成对出现，是块元素会自动换行
<h1>~<h6> 是从1~6字体大小递减的标题标签
<img src="图像URL" /> 是图像标签，用来显示图片
HTML5新增的语义标签表：
| 标签 | 说明 |
| <header> | 标签头部区域的内容，包含网站名称、主题或主要信息 |
| <nav> | 用于定义页面的导航链接部分区域 |
| <section> | 将页面中的内容划分为独立区域，用于显示章节或段落 |
| <artiele> | 标签页面中独立的主题内容区域，通常使用<section>划分 |
| <aside> | 定义页面主区域之外的内容，比如侧边栏 |
| <footer> | 标签页面或一个区域的底部，位于页脚，通常包含文档的作者、 著作权信息、链接的使用条款、联系信息等 |
| <figure> | 标签独立的流内容，包括图像、图表、照片、代码等 |
| <address> | 标签文档中的联系信息，包括文档作者、电子邮箱、地址、电话 |
创建表格的基本语法格式：
<table> <tr> <td>单元格内容</td> </tr> </table>
例题：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table width="500" frame="hsides" rules="rows"> <caption>计算机学习</caption> <tr> <th>核心课</th> <th>限选课</th> <th>公共课</th> </tr> <tr> <td>数据结构</td> <td>移动应用开发</td> <td>高等数学</td> </tr> <tr> <td>软件工程</td> <td>SQL Server</td> <td>大学英语</td> </tr> </table> </body> </html>
运行效果：
列表标签，基本语法格式：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无序列表</title> </head> <body> 编程语言： <br/> <ul> <li type="circle">Python</li> <li type="circle">C</li> <li type="circle">Java</li> <li type="disc">C++</li> <li type="disc">C#</li> <li type="square">PHP</li> <li type="square">SQL</li> </ul> </body> </html>
效果：
有序列表，例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>有序列表</title> </head> <body> 编程语言： <br/> <ol> <li>Python</li> <li>C</li> <li>Java</li> <li>C++</li> <li>C#</li> <li>PHP</li> <li>SQL</li> </ol> </body> </html>
效果：
超链接标签例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="https://www.baidu.com" target="_blank">在新窗口中打开</a> <br /> <a href="https://www.baidu.com" target="_self">在原窗口中打开</a> </body> </html>
效果：
表单标签基本语法：
<form action="url地址" method="提交方式" name="表单名称">
表单控件
</form>
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>form表单标记</title> </head> <body bgcolor="yellow"> <form action="/1.jsp" method="get"> 用户名：<input type="text" name="userName"><br> 密码：<input type="text" nama="password"><br> <input type="submit" value="登录"> </form> </body> </html>
效果：
1.3 CSS
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）。
1.3.1 CSS选择器
类别选择器例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格的属性</title> <style> .b{ text-indent: 3em; font-family: 宋体; font-size: 30px; color: green; } .c{ text-indent: 2em; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 40px; color: maroon; } .a{ text-indent: 3em; font-size: 40px; color: green; } </style> </head> <body bgcolor="yellow"> <p class="a">江山如此多娇，引无数英雄竞折腰。</p> <p style="text-indent: 2em; font-size: 30px;color: red;" class="c">风吹云动天不动，水推船移岸不移.刀切莲藕丝不断，山高水远情不离</p> <p class="a">花开山岗红艳艳，绿水青山不知是何年</p> </body> </html>
效果：
ID选择器例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格的属性</title> <style type="text/css"> #b{ text-indent: 3em; font-family: 宋体; font-size: 30px; color: green; } #c{ text-indent: 2em; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 40px; color: maroon; } #a{ text-indent: 3em; font-size: 40px; color: green; } </style> </head> <body bgcolor="yellow"> <p id="a">江山如此多娇，引无数英雄竞折腰。</p> <p style="text-indent: 2em; font-size: 30px;color: red;" id="c">风吹云动天不动，水推船移岸不移.刀切莲藕丝不断，山高水远情不离</p> <p id="a">花开山岗红艳艳，绿水青山不知是何年</p> </body> </html>
效果：
1.3.2 CSS样式引入方式
行内式：
<div style="color: red; width: 200px; height: 100px;"></div>
内嵌式：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 200px;
height: 100px;
color: red;
}
</style>
</head>
链接式：
<link type="text/css" rel="stylesheet" href="CSS样式文件的地址"/>
