1.HTML：超文本标签语言，一种纯文本类型的语言
用来设计网页的标记语言
用来显示数据
用该语言编写的文件，以.html或者.htm为后缀
由浏览器解释执行
在HTNML界面上，可以嵌套脚本语言编写的程序段，如JS
可以理解为标签固定的xml
语法是固定的（w3c）
基本网页结构：
<!-- 唯一的根元素 html -->
<html>
<!-- 对网页做基本的配置，声明网页的信息 -->
<head>
<!-- 设置网页编码 -->
<meta charset = "utf-8"/>
<title>
3654121
</title>
</head>
<!-- 写网页的具体的内容 -->
<body>
4654321.
</body>
</html>1）meta元素提供关于HTML文档的元数据
1.1 元数据不会显示在页面上，但是对于机器来说是可读的
1.2 用于规定页面的描述，关键词，文档的作者，最后修改时间及其他元数据
1.3 常用属性有：content，http-equiv,charset
2）title声明网页的标题
3）内容
标题元素：
最多能有六个
如果写两个一级标题，就是两个一样大的一级标题，标题的级别和h后的数字相关
段落元素：p独立成行，独立成段
（1） 提供了结构化文本的一种方式
（2） 元素中的文本会用单独的段落显示
与前后的文本都换行分开
添加一段额外的垂直空白作为段间距
列表元素
（1）列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列
(2) 所有列表都由列表类型和列表项组成
列表类型
有序列表
- ,用于指示具体的列表内容
（3）列表嵌套
将列表元素嵌套使用，可以创建多层列表
分区元素：
（1）分区元素用于元素分组，常用于页面布局
（2）块分区元素：
（3）行内分区元素：
设置同一行文字内的不同格式
无序列表
列表项：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- logo -->
<div>
<p>此处应有图片</p>
</div>
<!-- 内容 -->
<div style = "color:green;">
<h1>当歌</h1>
<p>对酒当歌</p>
<p>以倾天下</p>
<p>拂衣振袖</p>
<p>风流如画</p>
<p>此处应有掌声</p>
</div>
<!-- 版权 -->
<div>
<p>楼上怕是傻子</p>
</div>
</body>
</html>元素显示方式
（1）块级元素
默认情况下，块级元素会独占一行
如：
、
（2）行内元素
行内元素
不会换行，可以和其他元素位于同一行
空格折叠
默认情况下，HTMl中多个空格，多个制表符，多个换行符会压缩单个空格，即只显示一个空格
如： 、
元素是内连元素，可作为文本的容器
默认没有任何效果，和css一起使用
可用于为部分文本设置样式属性
倾斜
加粗
<u>
下划线
<br>
空格
图像元素(行内)
使用元素将图像添加到页面
空标记
必须属性：src
常用属性：width，heigh
超链接(行内)
使用a元素创建一个超链接文本
href属性：
连接URL
target：
目标打开方式，可取值为_blank._self
1、target=”_self”表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同窗口打开。
2、target=”_parent”表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
3、target=”_top”表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target=”_blank”表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。
表格
表格通常是用来组织结构化的信息
表格是一些被称为单元格的矩形框从左到右，从上到下顺序排列而形成的
表格的数据保存在单元格里
行分组
表格可以分三个部分：
表头行分组：
表主体行分组：
表尾行分组：
路径：
绝对路径
从盘符开始写出完整的路径
缺点：
路径很长很麻烦
可移植性不强
相对路径
写出图片和网页的相对位置
优点：
简单
可移植性强
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 标题 -->
<h1>波多野老师</h1>
<h2>小泽老师</h2>
<h3>苍老师</h3>
<!-- 段落 -->
<p>海波多浪野结衣</p>
<p><a href = "#cang">苍天有井自然空</a></p>
<!-- 列表 -->
<!-- 有序列表 -->
<ol>
<li>高端</li>
<li>大气</li>
<li>上档次</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>NIUBI</li>
<li>123</li>
<li>456</li>
</ul>
<!-- 嵌套列表 -->
<ol>
<li>
水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>
蔬菜
<ul>
<li>萝北</li>
<li>白菜</li>
</ul>
</li>
<li>
动物
<ul>
<li>猪</li>
<li>牛</li>
</li>
</ol>
<!-- 行内元素 -->
<p>
恍恍<i>惚惚红红<span style = "color:red">火火恍恍</span>惚惚</i>红红火火
</p>
<!-- 空格折叠 -->
<p><!-- 大写的不是空格 -->
洒家坎大哈洛 &NBSP; 杉矶<BR>
萨利赫大街上 的是<BR>
阿斯兰很大机 会是<BR>
</p>
<!-- 图片*不独立成行属于行内元素* -->
<p>
<!-- 图片和网页平级 -->
<img src = "1.jpg"/>
<!-- 图片在网页下级 -->
<img src = "image/1.jpg"/>
<!-- 图片在网页的上级 -->
<img src = "../1.jpg"/>
<!-- 一般情况 -->
<img src = "../image/2.jpg"/>
</p>
<!-- 超链接（行内） -->
<!-- 一般用法 -->
<p>
<a href = "http://www.4399.com">4399</a>
<!-- 新窗口 -->
<a href = "http://www.baidu.com" target='_blank'>baidu</a>
<a href = "http://www.4399.com" target='_self'>4399</a>
</p>
<!-- 特殊用法
链接到当前网址的某个地方
这个位置叫做锚点
必须提前声明锚点
-->
<p>
<a name = "cang">苍老师</a>是个好老师
不但会讲课，还会拍片子
</p>
<!-- 顶部默认是个无名的锚点 -->
<p>
<a href = "#">回到顶部</a>
</p>
<!-- 表格的基本结构 -->
<table border = "1" cellspacing = "0" width = "30%">
<tr>
<td>苍老师</td>
<td>波多野老师</td>
</tr>
<tr>
<td>小泽老师</td>
<td>武藤老师</td>
</tr>
</table>
<!-- 跨行 -->
<table border = "1" cellspacing = "0" width = "30%">
<tr>
<td rowspan = "2">苍老师</td>
<td>波多野老师</td>
</tr>
<tr>
<!-- <td>小泽老师</td> -->
<td>武藤老师</td>
</tr>
</table>
<!-- 跨列 -->
<table border = "1" cellspacing = "0" width = "30%">
<tr>
<td colspan = "2">苍老师</td>
<!-- <td>波多野老师</td> -->
</tr>
<tr>
<td>小泽老师</td>
<td>武藤老师</td>
</tr>
</table>
<!-- 行分组 -->
<table border = "1" cellspacing = "0" width = "40">
<thead>
<tr>
<td>number</td>
<td>name</td>
<td>money</td>
</tr>
</thead>
<tbody style = "color : purple">
<tr>
<td>1</td>
<td>mouse</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>keyboard</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan = "2">Total</td>
<td>150</td>
</tr>
</tfoot>
</table>
</body>
</html>