一、自我介绍
二、第二阶段目标
1.HTML5----2天-----毛坯
2.HTTP&AJAX----5天---难点
3.CSS基础&高级-----8天----精装修---重点
4.响应式布局Bootstrap-----5天----重点
5.云服务器的使用-----1天
前端圣经级网址
三.今日目标2.7
1.开发概述 - 了解
2.HTML基础语法 ----掌握
3.常用标签1：文本----熟练掌握
4.常用标签2：图片和超链接----熟练掌握
5.常用标签3：表格----熟练掌握
四.工具介绍
web页面运行需要两种软件
- 程序员编写网页的编辑器 ---- 网页编辑器
小型软件 （xmb） notepad ，morepadd++,editplus
中型软件 （xxmb）SublimeText
大型软件 Eclipse/MyEclipse,VScode,HBuilderX
2.用户浏览网页工具 --- 网页浏览器
Netscape Navigator/火狐
IE
Google Chrome
apple Safari (Webkit内核)
五.前端开发三个基础语言/前端三剑客
- HTML -- 用于定义页面的内容
- CSS -- 用于控制页面的样式
- JS -- 用于控制页面的行为/交互
六.HTML
Hyper Text Markup Language
- 超文本
不仅仅是纯文本，还包括多媒体信息，例如音频，视频，图片等
2.标记
也称为标签，表示一个页面的渲染指令
3.标记语言特点
（1）单标记标签
<标签名>
（2）双标记标签
<开始标签>标签体</结束标签>
（3）属性
<标签名 属性名="值">
<开始标签 属性名="值">标签体</结束标签>
（4）标签的嵌套
<开始标签 属性名="值">
<开始标签 属性名="值">
<开始标签 属性名="值">
标签体
</结束标签>
</结束标签>
</结束标签>
注意：为了保证美观及观赏修改，要注意缩进
- 项目开发
项目 -> 目录 -> HTML文件
HTML基本格式
<!DOCTYPE html> 约定的版本，这是HTML 5的版本
<html></html> 文件的根元素必须是html，最外层的标签
html的子元素有两个
head元数据 这些数据不会显示在网页上
<meta charset="utf-8">拥有设置页面的编码，utf-8支持中文
tiitle 标题
body网页正文 这些数据会显示在网页上
八、常用标签
1.文本
（1）内容标题 h1-h6
字体由大到小，字体加粗，自带上下间距，内容独占一行
（2）段落标签p
独占一行，自带上下间距
br：换行
（3）文本相关
b：加粗
i：斜体
u：下划线
small：小字
s:删除线
sup：上标字
sub：下标字
pre：保留原始格式文字
（4）特殊符号
浏览器小特性
浏览器把源代码中连续多个换行符，空格符，制表符渲染成一个英文空格
空格 (non-breakong-space)
< 小于号 (less than)
> 大于号 (greater than)
® 圈R(register)
©圈C(copyright)
™TM符号
×关闭符号
⊗ 带圈的关闭符号
空格 (non-breakong-space)
< 小于号 (less than)
> 大于号 (greater than)
® 圈R(register)
©圈C(copyright)
™TM符号(trademark)
×关闭符号
⊗ 带圈的关闭符号
2.注释
<!-- 这一段内容 叫注释-->
3.快捷键
ctrl+R:在浏览器中运行当前页面文件
ctrl+上下箭：快速移动当前行代码
ctrl+D：快速删除当前行
ctrl+/ 快捷注释
- 图像与链接
img：全称image 图像
src: 图片路径
相对路径：
同级目录：直接写图片名(./也行)
上级目录：../ 图片名
下级目录: 文件名/图片名
绝对路径：访问站外资源时使用，这种访问图片的方式又称图片盗链
好处：节省本站资源
坏处：有可能找不到图片
<img src="" title="图片的标题" alt="当图片不显示的时候,会显示alt属性的文本">
--Alt：图片不显示的时候，会显示alt属性的文本。
--Title：对网站的seo有很大的影响，当鼠标移上去的时候，图片显示的tip提示文本内容。
width/height
设置图片的宽高，两种赋值方式
- 像素
- 上级元素百分比，如果只给宽度赋值，
九、HTML将所有标签分为两大类
- 块级元素
必须独占一行，无需换行，可以设置宽高
div：最简单的块级元素，division，区/块
h1-h6
- 行内元素
可以与其他内容共处一行，换行必须用br
span：最简单的行内元素
b ， i
行内块
共占一行，可以设置宽高
a：全称anchor ，锚，超链接
href： 作用类似于图片的src属性，资源路径，可以指向页面资源或任意文件，如果指向的资源浏览器支持浏览直接浏览，不支持浏览的则下载