一、前言h5行业介绍
1. 前端>web前端≈HTML5=H5
2. h5可以做网站、手机App、小游戏等，移动互联网的使用趋势递增，前端开发岗位需求递增，后算技术数据呈现离不开前端程序界面。
二、 网页的构成
1. <!DOCTORY HTML>声明使用的HTML标准。
2. <head> 网页的头部，包含对网页的信息说明。
3. body包含网页的主题内容。
三、第一个小DEMO-博客
<h1>到<h7> 标题标签
<p>段落标签
<i>文字斜体<b> 加粗标签
空格
<hr> 分割线
<br> 换行
四、百度新闻列表
<ul> <li>标签 列表排序无数字
<ol> <Li> 有数字编号排序的列表
五、图片的使用
1.设置图片的宽告要注意图片本身的像素，否则图片会变形，行空间不足会导致图片换行。
2.修改width或height 图片会等比例缩小,同时修改高度和宽度有可能会导致图片变形。
100%表示撑满整个窗口。
六、如何下载图片和切图
1.直接右键下载保存。
2.F12打开Elements找图片元素。
3.PhotoShop 切图片。
七、 补充知识
1.超链接，target表示目标，blank表示空白。这里表示在空白窗口打开新页面。
2.无序列表
2.1.实心圆（默认） 2.2 空心圆 2.3 实心方块
3.有序列表
3.1 数字（默认） 3.2 小写字母 3.3大写罗马字母
4. img标签 title表示鼠标移入时的文字提示，
alt表示图片加载失败后的文字。
5.<del>给文字增加删除线，把文字变成上标<sup>，<u>给文字加下划线，<center>把文字居中
八.百度云盘制作
1.绝对地址：在任何情况下都能找得到的地址。
2.相对地址：相对于当前地址来确定。
九、简单表格的制作
<table> <tr> <td> 行格
border 边框宽度 cellspacing="0" 间距
<col>表示一列设置列的宽度
十、表格的合并
colspan行合并 rowspan 列合并
th等于加粗并水平居中的td
thbody表格的主题
超链接不能嵌套超链接
P标签不能嵌套P标签
标题标签不能互相嵌套
十一、登录表单
input输入框的类型都有哪些: text password button radio file checkbox.....
<input type="submit" value="提交">
<input type="reset" value="重置">
action 表单提交地址
align="center" 居中
所有要提交的数据都有name属性
提交数据 post 获取数据 get
十三、认识CSS。
1.什么是CSS？
文字大小 、文字颜色
叫做层叠样式表
2. 容器的作用
<div>
<span> 容器标签，没有什么特殊作用，包裹文本便于增加样式。
margin: auto; 整个容器居中 结合宽度使用
text-align: center; 文字1居中
color:文字颜色
font-size:24px 文字大小
background-color：gray；背景颜色
3. 布局与选择器
内部样式简化css编写工作。
id选择器：表示身份不能重名
类选择器： 拥有该类别的所有标签。
通用选择器 * 可以选择页面所有元素。
4.样式表的层叠
行内样式大于内部样式
行内样式大于Id选择器大于类选择器大于标签选择器大于通用选择器
5.选择器的权重
通用选择器 * 权重值0
元素选择器权重值1
类选择器 100
id 选择器1
行内选择器 1000
选择器选择的范围越小越精确优先级就越高
6.css文本属性
.p1 { color:red } /* 文字颜色 */
.p2 { font-family: "微软雅黑" } /* 字体类型 */
.p3 { font-size: 26px; } /* 文字大小（高度） */
.p4 { font-weight: bold; } /* 文字加粗 */
.p5 { font-style: italic; } /* 文字倾斜 */
.p6 { text-indent: 60px; } /* 首行缩进 */
.p7 { text-align: center; } /* 水平对齐方式 */
.p8 { line-height: 100px; } /* 行高 */
.p9 { height: 100px; background-color: gray; line-height: 100px;} /* 垂直居中 */
.p10 { text-decoration: underline; } /* 文本修饰 */
7.常见图片格式的区别
jpg gif png
gif 支持动画 透明和不透明两种模式
jpg 体积小损失图片质量
png 不支持动画，体积小 损失小
8.背景图的使用
不喜欢背景图平铺： background-repeat: no-repeat;
背景图位置 background-position: center center;水平和垂直都居中两个参数
