1、主流浏览器
| 简写 | EN | CN |
|---|---|---|
| FF | Mozilla Firefox | 火狐浏览器 |
| IE | Internet Explorer | IE浏览器 |
| Chrome | Google Chrome | 谷歌浏览器 |
| Opera | Opera | 欧鹏浏览器 |
| Safari | Safari | 苹果浏览器 |
2、网页编辑工具
3、什么是网页
- 网页是网站中的任何一页面，通常文件扩展名为html、或htm
- 网站用于展示相关内容的网页的集合
4、HTML简介
HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等
HTMl发展史
| 版本 | 年份 |
|---|---|
| Html | 1991 |
| Html+ | 1993 |
| Html2.0 | 1995 |
| Html3.2 | 1997 |
| Html4.0.1 | 1999 |
| XHtml1.0 | 2000 |
| Html5 | 2012 |
| Xhtml5 | 2013 |
5、HTML特点
- 简易性
- 可扩展性
- 平台无关
6、HTML基本组成单位
标签：标记”是一些符号，用来区分文档中的不同部分
标签的分类
单标签
双标签
标签的基本写法
单标签
标签的组成
标签 标签属性
7、HTMl基本规范
Html4.0的基本规范
- 标签名和属性名称不区分大小写
- HTML标签不必全部关闭
- 属性值用引号或者不用引号括起来
- 标签必须正确嵌套
- 文档必须拥有一个根元素，所有的XHTML元素必须嵌套于根元素中
XHTML基本规范
- 标签名和属性名称必须小写
- HTML标签必须关闭
- 属性值必须用引号括起来
- 标签必须正确嵌套
- 文档必须拥有一个根元素，所有的XHTML元素必须嵌套于根元素中
Html5的基本规范
- 对于html4和xhtml的规范都可以并对在基础上又做了简化：渐进增强和优雅降级
8、HTML5和HTML4的区别
- 声明
<!DOCTYPE>HTML也有很多个不同的版本，只有完全明白页面中的使用的确切HTML版本，
浏览器才能完全正确地显示出HTML页面。这就是用处
HTML5：
<!doctype html>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- 文档类型声明
5：
<!doctype html>4：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML //EN" >
编码设置
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style></style> type 省略
<link href=“” rel=“stylesheet”/> type 省略
<script></script> type省略9、开始学习HTML
站点：一个站点存储了一个网站包含的所有文件
站点的建立
html的基本结构
<html>
<head></head>
<body></body>
</html>
常用的标签常用标签
h1-h6 <h1 algin=“center”>标题文字</h1>
<h1>标题一</h1><!--LOGO设置--> 只能出现一次
属性： align 水平对齐：center|right
有六级标题
P <p>段落文字</p>
默认段落与段落之间有一行空白
<hr color="pink" size="7" width ="100" align="left"/> 默认居中对齐
Br <br/> 换行
Img 单标签 设置宽度 等比例 缩小 | 而只设置高度不是
<img src=“图片地址” width=“” height=“” title=“” alt=“”/>
Span <span>文字</span>
Div <div>任何内容</div>
I <i>倾斜的文字</i>
Em <em>倾斜的文字</em>
a 相对路径 和绝对路径格式为：
<a href="资源地址" target="窗口名称" title="指向连接显示的文字">超链接名称</a>
Strong <strong>加粗的文字</strong>
B <b>加粗的文字</b>
特殊符号： 空格
  空格在浏览器展示 的效果不一样的 火狐半个
三种列表标签
无序列表：circle属性值 disc=实心圆 circle=空心圆 square=正方形
<ul type=“circle” start=“3”>
<li>列表内容</li>
</ul>
有序列表：type属性值a (a b c)| A(A B C)|i|I
start = "3"后 面只能跟数字
reversed 倒叙
<ol>
<li>列表内容</li>
</ol>
定义列表：(应用:左图 右字)
<dl>
<dt>定义项</dt>
<dd>描述项</dd>
</dl>
>大于号
<小于号
超级链接标签
target属性：_blank
<a href = "about.html"target="" title="">我可以是文字，页可以是图片</a>
可以链接内容：
html文件|音视频|压缩软件(下载)|图片|Wps
内部链接<链接自己网站>|外部链接<链接别人网站>
href="#"标示空链接 点击跳转首部
外部链接
<a href="http://www.baidu.com"></a>
路径
相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。
相对路径：
- 两个文件都放在同一文件夹。直接写名字图片
- 两个文件分别在不同的文件夹里面。../文件夹名称/文件名称
<a href = "../img/2.jpg">img</a> - 一个文件夹外，一个文件夹内。文件夹名称/文件名称
绝对路径：是指文件在计算机或网络上的绝对地址位置，从盘符或协议名称开始。例如：
file:///E|/works/公开课/1/style/miancss.css
http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
HTML5新增了标签
<article>
<aside>
<audio>
<canvas>
<footer>
<header>
<hgroup>
<section>
<time>
<video>…等HTML5废除的标签
1、能用css代替的元素basefont、big、center、font、s、strike、tt、u
2、不再使用frame框架
3、只有部分浏览器支持的元素applet、bgsound、blink、marquee等标签
4、其他被废除的元素
Rb acronym dir isindex listing xmp nextid plaintex
————-部门划分—————
1:业务部门-需要做网站
2:设计部门-制作图片格式.jpg/.psd
3:制作部门-切成网页 前端开发工程师
4:后台部门-后台程序添加数据设计部门
网站制作流程：
最近流行->扁平化 | 2010年->立体化
响应式网站：做一个网站既可以在PC也可以移动端；
谷歌浏览器可以测试移动
网页中可以插入图片格式： 图片
jpg/jpeg:可以存储丰富多彩的颜色，不支持动画和透明(人物/风景)保真 ===有损压缩
gif:只存储256种颜色（少）赞 |小图片 支持动画|透明===有损压缩
png:可以丰富多彩的图片|不支持动画|支持透明|占用空间大（运用多数移动移动端）===无损压缩
api
自学网站