目前上网的方式：
手机
平板
电脑
移动端：智能手机、平板
PC：电脑、笔记本
运行在移动端的东西：APP
ios：object-c
android：java
pc端的东西：桌面应用程序 c++

我们上网的方式都是通过浏览器打开地址来进行上网

前端是做网页开发的，也能做app开发，跨平台

前端是做能看得见摸得着的东西

常见的系统：
ios:
android:
windowsPhone:

windows
Mac OS X

linux
…

前端之网页开发

网页开发：前端开发+后台开发

前端：呈现数据
后台：管理数据

html:网页的内容、网页结构—结构层
css:负责网页的样式—表现层
javascript：是一种专为网页交互的脚本语言—行为层

HTML:超文本标记语言
目前最新版本为HTML5，用得最广泛的是HTML4

如何来编辑HTML？
用记事本编辑—>修改后缀名(扩展名)—>用浏览器运行

浏览器

浏览器内核：渲染引擎、javascript解析引擎

渲染引擎:主要是用来渲染HTML、CSS
javascript解析引擎:专门用来解析javascript

浏览器：
Firefox(火狐)—Gecho
IE（Internet Explorer）—Trident
Chrome(谷歌)—Webkit
Safari(苹果)—Webkit
Opera(欧朋)—Presto/Blink

HTML文档结构

主要战场

一张网页里面只有一对html标签、head标签、body标签、title标签

HTML的语法

html标签（标记）

单标记

双标记

html的属性

—起始标记（标签）
内容
—结束标记（标签）

<耳朵宽度=“250cm” 高度=“500cm”></耳朵>

HTML的注意事项
1 必须要符合基本语法
2 必须要定义文档类型

DOCTYPE：document type

background=’图片路径’—-表示背景图片图片：.jpg .png(透明图片) .gif(动态图)。。。

路径— 绝对路径：相对于磁盘的路径，物理路径相对路径：文件相对于网页源文件的位置同级关系：直接引用文件名上一级关系：…/图片名下一级关系：文件夹名/图片名

一文本格式标签
换行标签

特殊字符标签
< < （left）

(right)
空格
“ “
© 版权号

计算机的单位
基本单位:字节(B) 一个字符占一个字节，一个汉字占两个字节
最小单位：位(bit)
1B=8bit
1kb(千字节)=1024B
1MB(兆字节)=1024kb

标题标签
，n:1—6,逐级变小

#

特点：字体加粗，自动换行

段落标签

特点：自动换行属性： align=”left/right/center”,水平对齐方式

预编译标签

特点：原样输出，自动换行

水平分割线标签

属性： color=”颜色” size=”5px/5%”,设置水平分割线的粗细 width=”50px/50%”，设置水平分割线的宽度 align=”left(居左)/right(居右)/center(居中)”,水平对齐方式特点：自动换行

二字符格式标签—不换行
-—-文本加粗
-—-文本倾斜
-—-下划线
-—-删除线
—字体变小

—字体标签
属性：
size=n,n:1——7,逐级变大，改变字体大小
color=“颜色”，改变字体颜色
face=“黑体”，设置字体类型，默认为宋体

图片标签

属性：
src=“路径”，设置图片路径
width=“100px”,设置图片的宽度
height=“100px”，设置图片的高度
title=“相关提示信息”,设置鼠标悬停时显示的文字描述
alt=“相关提示信息”
三 HTML的注释

作用：
屏蔽不想在网页上看见内容
注释代码，方便日后维护查找

四表格标签

tr:行标签 td:列标签

table的属性：
border=“2px”,设置表格的表框为2px
width=“100%/500px”,设置表格的宽度
height=“20%/300px”,设置表格的高度
bordercolor=“颜色”,设置表格的边框颜色
bgcolor=“颜色”,设置表格的背景颜色
bgcolor==>backgroundcolor
background=“背景图的路径”
align=“left(居左)/right(居右)/center(居中)”,设置表格水平对齐方式
cellspacing=“px/%”，设置单元格与单元格之间的距离
cellpadding=“px/%”，设置单元格边框与内容之间的距离

如果要放置内容或者其他标签的话，必须要放在td标签里面

tr的属性：
bgcolor=“颜色”,设置某一行的背景颜色
align=“left(居左)/right(居右)/center(居中)”,设置某一行的水平对齐方式
valign=“top(顶部)/middle(垂直居中)/bottom(底部)”，设置某一行的垂直方向的对齐方式

td的属性：
align=“left(居左)/right(居右)/center(居中)”,设置某一个单元格的水平对齐方式
bgcolor=“颜色”,设置某一个单元格的背景色
width=“100%/500px”,设置单元格的宽度
height=“20%/300px”,设置单元格的高度
valign=“top(顶部)/middle(垂直居中)/bottom(底部)”，设置某一个单元格的垂直方向的对齐方式
rowspan=“2”,合并行
colspan=“2”,合并列

表头
表内容

th:字体加粗，自动居中的效果
rowspan=“2”,合并行
colspan=“2”,合并列

浏览器：
app：
桌面应用：
前端能做什么：将设计图转换成代码的形式，呈现在浏览器上
前端是属于网站开发中的一部分

一、浏览器：
火狐(FireFox)—Gecho
IE（Internet Explorer）—Trident
谷歌(chrome) —Webkit
苹果(safari) —Webkit
欧朋(opera)—Presto/Blink
内核功能：
渲染HTML页面—渲染引擎（HTML、css）
解析JavaScript—解析引擎

二、如何编辑HTML
记事本编辑》》》修改后缀名》》》用浏览器运行

HTML的文档结构：

-—html标签的起始标签标题这是我们的主战场 —-html标签的结束标签

三、标签（标记）的语法：
HTML标签的分类：双标签、单标签
双标签：
单标签：
tag泛指所有标签的名称

编辑html标签的注意事项：
1 必须要符合基本语法
2 必须要定义文档类型

:告诉浏览器这是一个html文档，方便浏览器渲染html

document：文档
type：类型
3 必须要定义文档的字符编码
gb123:中文简体编码
gbk：中文编码
utf-8：国际编码

把content关联到http头部，告诉浏览器准备接受一个html文档，并以utf-8的字符编码来进行解析方便浏览器的搜索引擎搜索相关网站 meta标签要放在head标签里面

4 文档类型编码必须和网页字符编码一致，如果用记事本，另存为设置编码

5 必须要符合代码风格—层层缩进

6 所有标签都必须为英文小写，属性与属性之间用一个空格分开，属性与属性值用等号连接，属性值用英文的单/双引号包住

四、HTML标签
1 标签
body标签的常用属性：
text=‘颜色’
颜色的表示方法：
a 英文单词：(三原色—rgb）r:red g:green b:blue
yellow pink white black…
b 十六进制：
red:#ff0000
green:#00ff00
blue:#0000ff

bgcolor=‘颜色’—表示body标签的背景色

background=‘图片路径’—表示背景图片
图片：.jpg .png(透明图片) .gif(动态图)。。。

路径— 绝对路径：相对于磁盘的路径，物理路径相对路径：在同一文件夹下面html文档找图片的位置同级关系：直接引用文件名上一级关系：…/图片名下一级关系：文件夹名/图片名

2 文本格式标签

:换行标签
特殊字符标签：
—空格
<—<

—>
“—”
©—版权号

电脑的单位：
基本单位：字节（b）
一个字符占一个字节，一个汉字占两个字节
最小单位：位（bit）
1b=8bit;
lkb(千字节)=1024b
1M(兆)=1024kb

标题标签:—n:1—6
特点：
a 双标签
b 字体加粗
c 自动换行
d 1-6逐级减小

段落标签：

p标签的属性：
align=“center/left/right”:水平对齐方式

预编译标签：

特点：原样输出，自动换行

水平分割线：

属性：
color=“颜色”
size=“粗细”
width=“宽度”
align=“center/left/right”

文本居中：

3 字符格式标签
:字体加粗
:文本倾斜
:下划线
:删除线
:下标
:上标
:字体变小
:字体标签
属性：
size=“12px”
color=“颜色”
face=“字体”

所有的字符格式标签都不换行，并且都是双标签
所有的字符格式标签最好都放在文本格式标签里面

:图片标签
属性：
src=‘路径’
width=“50px/50%”
height=“50px/50%”
border=“2px”
title=“提示信息”—当鼠标放上去的时候，就显示title所对应的属性值
alt=“提示信息”—当图片在浏览器上显示不出来的时候，就会显示alt所对应的属性值

HTML注释： a 屏蔽掉HTML代码（不在浏览器中显示） b 标注注释

4 表格标签：

内容

tr:代表的是表格的行标签
td:代表的是表格的列标签

table的属性：
border=“2px”:边框粗细
bordercolor=“颜色”：表框颜色
width=“500px”:表格的宽度
height=“500px”:表格的高度
bgcolor=“颜色”:表格的背景颜色
background=“路径”:表格的背景图
align=“left/right/center”:表格水平对齐方式
cellspacing=“5px”:单元格与单元格之间的间距
cellpadding=“5px”：内容与单元格边框的距离

tr的属性：
height:行的高度
bgcolor=“颜色”:行的背景颜色
background=“路径”:行的背景图
align=“left/right/center”:当前行的水平对齐方式
valign=“top/middle/bottom”:垂直方向对齐方式

td的属性：
width:单元格的宽度
height:单元格的高度
bgcolor=“颜色”:单元格的背景颜色
align=“left/right/center”:单元格的水平对齐方式
valign=“top/middle/bottom”:单元格的垂直方向对齐方式
rowspan=“5”:合并行
colspan=“5”:合并列

thead:表格表头 th:文字自动加粗，文字自动居中如果没有表头的话：

内容

5 列表标签
(1) 有序列表

ol标签的属性： type=”1/a/A/i/I”,默认为数字排序 start=”10”,表示从第十项开始，并且只能是数字 (2)无序列表

ul标签的属性: type=”square(方块)/disc(实心圆)/circle(空心圆)”，默认为实心圆 (3)语义列表

标题部分

内容

6 超链接标签(a标签)
百度一下
a标签的属性：
href=“路径”

http:超文本传输协议，是客户端和服务端请求和应答的标准
http/https—https加密的
www:world wide web(万维网、环球网)，简称web
w3c:万维网联盟
w3school:万维网联盟的中国社区
万维网联盟的创始人：蒂姆.伯纳斯.李（互联网之父）

a、外部链接：
百度一下
b、内部链接：
百度一下
//跳转到本地项目的某个页面

c、建立锚点：通过锚点可以找到相对标签的位置
找猪头

猪头

//pig叫锚点值(hash值)，锚点值必须要与你要找的标签的id名要一致找猪头2 //可以找到本地项目的某个页面的标签

d、通过href可以做功能性链接：邮箱、qq链接
站长邮箱

target=”_self/_blank”
_self:在自身窗口打开
_blank：在新窗口打开

表单元素：用于客户端和服务端进行信息交互的通道

:所有的表单元素都应该放在里面

文本输入框：

属性：
name=“小狗”，每个表单元素都有name属性
value=“值”，每个表单元素都有value属性,value值是随着用户输入而改变
size=“5”,设置文本输入框的长度
maxlength=“10”,最多可以输入的字符数
placeholder=“提示信息”，提示
readonly=“readonly”,只读

密码输入框

name/value等属性，属性完全跟文本输入框一致

单选框

name/value属性
checked=“checked”,表示被选中

复选框

name/value属性
checked=“checked”,表示被选中

下拉列表
—选择
—项

select的属性：name/value
multiple=“multiple”,变成列表框（multiple：多列）
size=“2”,表示显示2行

option的属性： selected=“selected”，表示哪一项被选中 disabled=“disabled”,表示禁止被选中 value=“值”

按钮
普通按钮：

name/value
按钮

按钮
属性：type/name/value
type=“button(按钮)/reset(重置)/submit(提交)”,默认为button

重置按钮:

重置

提交按钮：

提交
提交按钮有页面刷新的效果，同时可以将文本输入框和密码输入框的相关信息提交到地址栏上

文件按钮：
—只能选择文件，不能选择文件夹
name/value属性

图片按钮：

属性：name/value/width/height

隐藏域：

文本域：

有name属性，没有value属性
cols=“50”，设置文本域的宽度
rows=“5”,设置文本域的高度

属性：
for=“id名”
账号:
密码:
label标签可以为表单元素定义，使文本和表单元素之间的关系更紧凑

属性： action=”路径”,跳转到某个页面，将表单元素里面数据提交到某个页面 method=”get/post” get:会将数据显示在地址栏上 post：不会将数据显示在地址栏上

内联框架

在当前页面中划分出一块区域用来显示另外一个页面属性： src=”相对路径” width=”1000px/80%”,设置显示区域的宽度 height=”1000px/80%”，设置显示区域的高度 frameborder=”1/0”,1—-有边框，0—-没有边框 scrolling=”yes/no/auto(自动)” yes：表示显示滚动条 no:表示不显示滚动条 auto:表示自动显示滚动条

块级容器标签：

空语义标签:没有html属性的标签