HTML + CSS 课程作用：
B/S （Browser/Server）浏览器和服务器
1.前端开发
前端就是界面（web），前端开发就是界面开发。
HTML CSS Javascript jQuery......
前端的开发方向
→ PC(电脑) Web
→ 移动 Web（web app）
→ 混合 app
→ 微信（公众号、小程序）
2.后端开发
JSP、PHP......
3.全栈（前端+后端）
什么是HTML
HTML
即：Hyper Text Markup Language（超文本标记语言），超文本包括：
文字、图片、音频、视频、动画等。
HTML：网页的“源码”
浏览器：“解释和执行”HTML源码的工具
常见浏览器和内核（Rendering Engine渲染引擎）:
IE（Trident）
火狐Firefox（Gecko）
谷歌Chrome（Blink）
苹果Safari（Webkit）
Opera （Presto
HTML文档的结构
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <head> 头部部分 -->
<!-- 网页字符编码 推荐UTF-8 -->
<meta charset="UTF-8" />
<!-- 网页标题（我的第一个网页） -->
<title>我的第一个网页</title>
</head>
<body>
<!-- <body> 主体部分
写网页内容，可以是文本、图像、链接等-->
Hello World!
</body>
</html>
HTML语法基本规范
标签名和属性名称必须小写
属性值必须用引号括起来
HTML标签必须关闭
双标签：<标签名> </标签名> 成对书写 如，<title></title>
单标签：<标签名>或<标签名/> 如，<hr> <hr/>
标签必须正确嵌套
嵌套关系： 如，html标签中嵌套着head和body
并列关系： 如，head标签同级的body标签
嵌套关系的标签要缩进：一般缩进2个空格或4个空格
必须添加文档类型声明 ,声明必须位于文档的最前面
HTML的编辑工具
开发工具sublime常用快捷键
一、HTML标签分类：
块级标签：显示为“块”状，前后隔一行
例：p、h1-h6、div…
行级标签：按行逐一显示
例：a、strong、em、span…
1.1 基本块级标签
1.1.1 h标签（h1-h6）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>yyds</title>
</head>
<body>
<!--h1最大 h6最小 前后隔行 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
1.1.2 p，br ，hr标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>yyds</title>
</head>
<body>
<h1>北京欢迎你</h1>
<!-- <hr/> 单标签 水平线 -->
<hr />
<!-- <br/> 单标签 换行 -->
<!-- <p>段落文字</p> 块级标签，其修饰段落文字 -->
<p>北京欢迎你，<br/>有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
</body>
</html>
1.2 行级标签
1.2.1 基本字体样式
字体样式标签(不仅显示样式,而且还有语义)
加粗：<strong>…</strong> 删除线<del>…</del>
斜体：<em>…</em> 下划线<ins>…</ins>
字体样式标签(只显示样式，没有语义)
加粗：<b>…</b> 斜体：<i>…</i>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>yyds</title>
</head>
<body>
<strong>徐志摩人物简介</strong>
<b>徐志摩人物简介</b>
<p>
<em>1910年入杭州学堂</em>
<i>1910年入杭州学堂</i>
</p>
</body>
</html>
1.2.2 span标签
范围标签<span> ：用作行内区域划分
可以用来修饰段落中的个别词句，例：
<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>
1.2.3 img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>图像标签</title>
</head>
<body>
<img src="images/hetao.jpg" alt="薄皮核桃" title="无漂白" width="160px " height="60px" /> <!-- src用相对路径 alt 是图片出错时的替代文字 title是鼠标悬停时的提示文字 宽高设置一个(自动等比)，注意要等比(尽量缩小，放大失真 行标签-->
<p>无漂白薄皮核桃<br />
无漂白薄皮核桃500gx2包，疯抢价30元</p>
<!--
JPG 压缩 方便存储
GIF 图像交换格式 支持动画、透明色
PNG “拼”命令 新兴的 不压缩 用于Windows系统
BMP 位图图像格式 不支持图片压缩
一般采用前三种
-->
</body>
</html>
二、列表
1、什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
2、列表的分类
无序列表
有序列表
定义列表
2.1 有序列表
2.1.1 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>yyds</title>
</head>
<!-- type 可以省略 若省略，则取默认值 -->
<ol type="a">
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ol>
</html>
2.1.2 type取值
2.2 无序列表（重点）
一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用
2.2.1 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>yyds</title>
</head>
<!-- type 可以省略 若省略，则取默认值 -->
<ul type="circle">
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</html>
2.2.2 type取值
2.3 定义列表
2.3.1 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>yyds</title>
</head>
<dl>
<dt>咖啡</dt> <!-- 声明列表项 -->
<!-- 定义列表项内容-->
<dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd>
<dd>可以提神，刺激神经。</dd>
</dl>
</html>
2.3.2 说明
这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合
三种列表的总结
