html简介
HyperText Markup Language 超文本标记语言
超文本: 能够表达更丰富的内容（相对于普通文本）
标记：标识符号，就是html中的标签
语言: 不是编程语言，就是html标签的描述
浏览器来翻译html代码
新建网页扩展名: .html .htm
常见文件扩展名
音频：mp3 ,wav
视频：mp4,rmvb,avi,rm,
文档：doc docx
图片：jpg gif png
editplus 初步设置
快捷键
保存：ctrl+s
复制：ctrl+c
粘贴：ctrl+v
剪切：ctrl+x
撤消：ctrl+z
重做：ctrl+y
全选: ctrl+A
复制并粘贴：ctrl+j
调整行的位置：alt+shift+上下箭头
标签分类
双标签 <font>HTML</font>,有开始标签和结束标签（标记）
单标签 <br />
标签书写规范
所有的标签都在< >中
所有的标签都有开始和结束，即使是单标记也要结束
<br /> 强制换行
<img /> 图片标记
<hr /> 分隔线
所有的标签和属性及值小写
标签和属性，属性与属性之间有空格
属性值必须有加引号（单引号或双引号都可以）
属性必须有值
属性可写可不写
标签与标签之间正确嵌套
标签格式
<开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n”>控制的内容</开始标签>
<开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n” 空格/>
<开始标签 空格/>
文档结构
在网页源代码中查看时，ctrl+end回到最后，ctrl+home回到最顶部，ctrl+F查找标签
<html>
<head><title></title></head>
<body>
</body>
</html>
解释：
html: 指明当前的文档的类型，是一个网页
head是网页头部 包括网页的相关信息，基本设置，其中title网站的标题就在里面。
body:在浏览器的看到的内容。
html注释: <!--注释内容-->
html标签按功能分类
文本的修饰
文字排版
图片
链接
表格
列表
表单
框架
文本的修饰
font的三个属性：
color:red,blue,green,yellow,gray,pink,tomato,white
size:值(1-7),默认值：3
face:字体
建议使用英文表示中文字体
<font> http://tool.oschina.net/
<body>的属性有：
text ：文字的颜色
bgcolor： 背景色
background： 背景图
当前网页文件和背景图片在同一个文件夹（建议）
bgproperties：背景图固定，火狐不好用。
通过样式来处理背景图固定的问题
style 英 [staɪl] 美 [staɪl] 格式
fixed 英 [fɪkst] 美 [fɪkst] 固定的
properties 英 [p'rɒpətɪz] 美 [p'rɒpətɪz] 属性，特性
URL（Uniform Resource Locator：统一资源定位器）是WWW页的地址，它从左到右由下述部分组成：
Internet资源类型（scheme 英 [ski:m] 美 [skim] 模式/协议）：指出WWW客户程序用来操作的工具。如“http：//”表示WWW服务器，“ftp：//”表示FTP服务器，“gopher：//”表示Gopher服务器，
而“news：”表示Newgroup新闻组。
服务器地址（host）：指出WWW页所在的服务器域名。
路径（path）：指明服务器上某资源的位置（其格式与DOS系统中的格式一样，通常有目录/子目录/文件名这样结构组成）。与端口一样，路径并非总是需要的。
URL地址格式排列为：scheme：//host：port/path，例如http：//www.sohu.com/domain/HXWZ就是一个典型的URL地址。
http——超文本传输协议资源
ftp——文件传输协议
mailto——电子邮件地址
ldap——轻型目录访问协议搜索
file——当地电脑或网上分享的文件
news——Usenet新闻组
gopher——Gopher协议
telnet——Telnet协议
HTML文本修饰标记
<big>相对默认文字大一些
<small>对默认文字小一些
<b>加粗 bold 英 [bəʊld] 美 [boʊld] 粗体字; 黑体字
<strong> 加强语气
<i>斜体 italic 英 [ɪˈtælɪk] 美 [ɪˈtælɪk, aɪˈtæl-] 斜体字
<em>斜体 emphas 加强语气
<u>下划线 underline
<s> 删除线
<ins><del> 下划线和删除线 insert delete
<sup> <sub> 上标下标下标 superscript 上标 subscript 下标
古诗案例
HTML排版标记
<p> 段落 自动在段前段后添加一个空白行
属性：align:值：left(左对齐,默认) center（居中对齐） right（右对齐）
<br /> 强行换行
<hr /> 分隔线
属性：width 宽度：值:默认是像素，也可是百分比
align:对齐方式：left center right ，默认 center
color :颜色
noshade 阴影设置
第二天
内容与标签相适应
是标题的就用h1-h6
是内容的一般用p
pre（predefined）英 [pri:dɪ'faɪnd] 美 [pri:dɪ'faɪnd] [计][修]预定义 预格式化文本
center:<center>居中内容</center>
修改古诗案例
div和span区别块元素和行内元素
div:块元素，双标签。DIV是层叠样式表中的定位技术，全称division(英 [dɪˈvɪʒn] 美 [dɪˈvɪʒən] 分开，分隔)，即为划分。有时可以称其为图层
span: 行内元素：双标签。
块：p, h1-h6, pre div,
行内：font b em i b strong del
HTML字符实体：空格，<,>,&,￥版权，注册商标,申请中的商标
空格 代表一个字符的空白
第二种方法：在输入法全角状态下，直接敲空格，代表一个汉字
<,> < > left right
" "
& &
￥ ¥
版权 © ©
注册商标 ® ®
申请中的商标 TM ™ trademark
HTML列表
有序列表 ol li type=”默认是数字序号，a,A,i,I” start :从哪个地方开始
无序列表 ul type : disc 默认的黑色点， circle 圆圈， square 方块
自定义列表
dl defined list定义一个描述列表
dt defined title 定义项目/名字
dd description defined 描述每一个项目/名字
滚动字幕标记 marquee 英 [mɑ:ˈki:] 美 [mɑ:rˈki:] 选取框
direction 方向 left (默认)， right 向右，up 向上，down 向下
behavior :行为：scroll 默认，alternate 左右, slide 只一次
width 宽度
height 高度
bgcolor 背景色
hspace 水平方向空白 horizontal 英 [ˌhɒrɪˈzɒntl] 美 [ˌhɔ:rəˈzɑ:ntl] 水平
vspace 垂直方向 vertical 英 [ˈvɜ:tɪkl] 美 [ˈvɜ:rtɪkl] 垂直
scrollamount 速度，像素/秒 amount 英 [əˈmaʊnt] 美 [əˈmaʊnt] 量，数量;总额
scrolldelay 间隔 单位：毫秒，(1秒＝1000毫秒) delay 英 [dɪˈleɪ] 美 [dɪˈle] 延迟
bgsound 目前适用于IE 功能:在文档中插入背景音乐。火狐安装插件bgsound.exe
<bgsound src=”” loop = “-1” /> bgsound是单标记
src:路径,建议（将声音和图片和当前网放在一起，路径直接写文件名及扩展名即可。）
loop =”-1” 无限循环
加载js的时候，用到的是<script type='text/javascript' src='js/demo.js'></script>
加载css的时候，用到的是<link rel="stylesheet" href="css/demo.css" />
一个用到的是src，另一个用到的是href，这两个有什么区别呢？
href 表示超文本引用（hypertext reference），在 link和a 等元素上使用。src 表示来源地址，在 img、script、iframe 等元素上。
src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
src和href之间存在区别，能混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图 片和frame等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么 将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
html颜色表示 计算机进制:十，八，十六，二
计算器命令：在运行中输入：calc->查看->程序员->
#rrggbb 十六进制：每两个一组，一共三组 以#开头
前两个代表红表，中间代表绿色，最后两个代表是蓝色
每一位的取值范围：(0-9,a,b,c,d,e,f)
常用的到颜色： #333，#444，#ccc, #575757
计算机编码（coding）:ASCII,ANSI,GB2312,GBK,BIG5,JIS,unicode,utf-8
ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）是基于拉丁字母的一套电脑编码系统，主要用于显示现代英语和其他西欧语言。它是现今最通用的单字节编码系统，并等同于国际标准ISO/IEC 646。在计算机中，所有的数据在存储和运算时都要使用二进制数表示（因为计算机用高电平和低电平分别表示1和0），例如，像a、b、c、d这样的52个字母（包括大写）、以及0、1等数字还有一些常用的符号（例如*、#、@等）在计算机中存储时也要使用二进制数来表示，而具体用哪些二进制数字表示哪个符号，当然每个人都可以约定自己的一套（这就叫编码），而大家如果要想互相通信而不造成混乱，那么大家就必须使用相同的编码规则，于是美国有关的标准化组织就出台了ASCII编码，统一规定了上述常用符号用哪些二进制数来表示。
字节（Byte /bait/ n. [C]），是计算机中最小的存储单位
位（Bit），是计算机中最小的处理单位
字符与字节
1B＝8b
1024bit=1KB;1024KB=1MB, 1024MB=1GB,1024GB=1TB 其中1024=210。
1024Mb/8=128KB
ANSI
GB2312 GBK,GB18030
JIS
ISO Unicode 4个字节
A 01000001
A 00000000 00000000 00000000 01000001
KEN
UTF-8
ASCII->ASNI(GB2312,JIS)->Unicode->utf-8
BIG5
解决乱码问题
只要保证编码一致就不会出现乱码
编辑器设置
meta 字符设置
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
http-equiv:服务器通知浏览器用什么字符来显示本页面
content=”text/html” 大类text文本文件下的html文件
charset=”” 我们要在这里设置字符编码，gbk, gb2312简体中文,utf-8(万国码)
浏览器编码
PHP字符集设置
Mysql数据库字符集设置
火狐：
meta标记
http-equiv(content-type,refresh)
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="refresh" content="3;http://www.baidu.com" />
refresh 刷新；页面跳转，主要应用：域名更换等。
name(keywords,description,author,copyright)
<meta name=”author” content=”” />
<meta name=”copyright” content=”” />
<meta name=” keywords” content=”” /> 60－80字
<meta name=” description” content=”” /> 120－200字
有关描述搜索引擎会生成一个摘要
W3C简介
world wide web consortium(w3c)
1994成立
制定web标准( 结构(html)，表现(CSS)，行为(ECMAscript))
并推广web标准，敦促web开发者使用web标准
百度，腾讯，360，1688
2013 北京 航空航天大学
Microsoft, apple, google, adobe
DTD文档类型定义： strict transitional frameset
strict 严格型
transitional 过度
frameset 框架
图片标记
img的属性： src width height border hspace vspace align alt
常见图片格式
对于图片的宽和高，只设置一个，另一个会按比例自适应
可以缩小，但不可以放大，放大就会失真
alt:替换文本
border 图片的边框，默认是黑色的边，不可以设置。只能通过样式修改，如下面的操作，可以先小试一下
绝对路径与相对路径
绝对路径
描述：形如：c:imgcat.jpg ,”一个真实的路径”
目录，就是文件夹
file:///C:/Users/Administrator/Desktop/day2/cat.jpg
https://www.baidu.com/img/bd_logo1.png
<li><a href="/product/">合作项目</a></li>
“/”代表网站的根目录
c:imgcat.jpg
相对路径 （三种情况）
1）目标文件（img）和当前文件(网页)是同级别
目标文件的路径写法：直接写文件名和扩展名即可。
2）目标文件所在的文件夹与当前页面是同级
目标文件的路径的写法：文件夹的名称/目标文件的名称+扩展名
3） 目标文件在当前页面的上一级。用：../ “../”就是指的向上一级。
如果目标文件在当前页面的上两级再 加一个../
关于路径，我们在做网站的时候一般用相对路径。
第三天
回顾相对路径
超链接
anchor 英 [ˈæŋkə(r)] 美 [ˈæŋkɚ] 锚 <a></a>
<a href=”url”>内容</a>
Href:Hypertext reference 超文本引用
URL(Uniform Resource Locator)统一资源定位器,就是一个地址，网址,指定的资源内容具有唯一性。
http://www.baidu.com/img/bd_logo.peg
协议：http://, ftp://, thunder:// , ed2k://
域名: www.baidu.com
目录：img
文件：bd_logo.png
a 不可嵌套
Target:打开的目标4
- _blank:在一个新的窗口打开网页
- _self:在当前窗口打开网页(默认)
- _top
- _parent
超级链接
外部链接 :url是本网站外的链接
<a href="http://www.sina.com.cn" target="_blank" >新浪网</a>
友情链接：
采集，盗链
内部链接:News/oct/2015-10-01.html
文本链接:普通文本加上<a href=”url”>普通文本</a>
图片链接
下载链接(广告图片)，
将提供下载的内容打包成*.rar, *.zip, *.iso, *.mp4,*.rmvb, *.flv
当用户点击时，会自动关联下载工具。
空链接
<a href=””>空链接</a>
<a href="#">我是空链接</a><br /> 单击后回到当前页面的顶部
<a href="javascript:void(0)">我是JavaScript空链接也叫死链接</a> 单击后没有反应，可以配合JS程序
<a href="javascript:void(0)" onclick="alert('点我呀')">我是JavaScript空链接也叫死链接</a>
电子邮件链接
<a href=”完整的email地址”>联系我们</a>
<a href=”mailto:ccjsjmail@aliyun.com”>联系我们</a>
自动关联电子邮箱工具：默认会打开outlook。href="mailto:ccjsjmail@aliyun.com?subject='hello'">ccjsjmail@aliyun.com</a>
？Subject:邮件主题信息
锚点链接
先定义锚点：
<a name=”top”></a>
使用的方法：
<a href=”#top”>回到TOP的位置</a>
图文混排
表格结构
<table>属性:
width 表格宽度 单位像素
height 表格的高度：一般不设置，让表格中内容撑开
align ：对齐方式：值：left ,right center
border :表格的边框
bordercolor ：边框的颜色
background ：表格背景图
单元格的td的宽度和高度一定和背景图片的宽和高相适应。
bgcolor ：表格背景色
cellpadding： 单元格的填充：单元格中内容到边框的距离
cellspacing ：单元格的间距：单元格与单元格之间距离
rules ：规定内侧边框的哪个部分是可见的。从实用角度出发，最好不要规定 rules，而是使用 CSS 来添加边框样式。
rules的值有： none 不显示行列线，只有外边框线 rows 行之间的线条 cols 列之间的线条 all 行和列之间的线条
rules 属性在 Firefox 和 Opera 中可以正确地显示。Internet Explorer、Chrome 以及 Safari 3 对该属性的显示并不正确。
<tr><td>属性： align="left" center right 行或列中内容的左中右
valign="top" middle bottom 行或列中内容的上中下
单元格的合并方式
colspan:向右合并，有合并就有删除
rowspan：向下合并, 有合并就有删除
<th>属性：列标题文字，自加粗并在单元各居中
<caption> ：表格标题,双标记
隐藏的tbody，浏览器自动生成,是表格的主体部分
Thead Tfoot 都是针对于表格的行来说的
表单：表单的概念，表单的工作原理
表格布局时：表格嵌套表格一般情况下，外层表格用像素，里面的表格用百分比。
第四天
昨日回顾
链接，表格
表单的结构
表单的标签：<form> </form>
常用属性
Name , method(get,post), action(服务器的接收的页面如：reg.php), onsubmit=” return javascript函数”，enctype=”multipart/form-data”
get： (表单的默认传值方式)
通过get方式传值：名称(name)和值(name的值)以“？”的跟在action处理页面的后面
如果有多个名称和值，用“&”号连接
这个方式传值：名称和值都在地址栏中显示(不安全)
地址栏的空间（容量有限）<2KB
一般用在要求（安全方面）不高，并且一些简单的数据。
通常用在查询
post：
不在地址栏中显示
相对安全
一般用在数据库方面，修改，删除
在上传一些复杂的数据的时候用post
如：上传图片，文件等。
注意：在上传文件时候，编码方式一定选择：enctype=”multipart/form-data”
大小没有限制
enctype=”” 表单的编码方式两种： encoding 英 [ɪn'kəʊdɪŋ] 美 [ɪn'koʊdɪŋ] 编码
enctype=”application/x-www-form-urlencoded"(默认) multipart 英 ['mʌlti:pɑ:t] 美 ['mʌlti:pɑ:t] 多部件的
enctype=”multipart/form-data”
表单的元素
分类：input type=”text,password,radio,checkbox,button,submit, reset, image,hidden, file”
<input type=”text” name=”username” size=”20” maxlength=”30” />
<input type=”password” name=”pwdddd” size=”20” maxlength=”30” />
单选：
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy" checked="checked" id="man"><label for="man">男</label>
<input type="radio" name="sex" value="girl" id="woman"><label for="woman">女</label>
<input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
</td>
为了增加体验：<label for=”表单元素的ID”></label>
注意：ID在当前网页中只名称是唯一性。不能重复 默认选项：checked=”checked”
复选：
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="dancing" id="dan" checked="checked"><label for="dan">跳舞</label>
<input type="checkbox" name="hobby" value="reading" id="rea"><label for="rea">阅读</label>
<input type="checkbox" name="hobby" value="singing" id="sin"><label for="sin">唱歌</label>
</td>
按钮：
重置按钮： <input type="reset" value="重置" />
提交按钮： <input type="submit" value="注册" name="submit" />
图片按钮：<input type="image" src="img.jpg" name="img" />
普通按钮：<input type="button" value="普通按钮" onclick="alert('hello world')" />
表单的提交：
<input type=”submit” value=”提交” name=”submit” />
<input type=”reset” value=”重写” />
隐藏域： hidden
<input type=”hidden” name=”” />
通常传值，没有必要让用户知道的信息
上传文件域： file
<input type=”file” name=”” />
表单form中编码类型一定选择：enctype=”multipart/form-data”
下拉列表： Select
<select name=”fruit” >
<option value=”A” selected="selected">水果A</optin>
<option value=”B”>水果B</optin>
<option value=”C”>水果C</optin>
</select>
selected="selected" (默认选中)
多选下拉列表：
分组下拉列表：optgroup
相关的元素分组：filedset legend
文本域 ：textarea cols rows name
<textarea name="sef" cols="50" rows="5">
hello,world!!
</textarea>
Form 标记属性 GET方法，POST方法,
enctype= application/x-www-form-urlencoded, multipart/form-data
表单元素
密码域 password
单选 radio checked="checked"
复选 checkbox checked="checked"
提交按钮 submit
重置 reset
图片按钮 img src=""
普通按钮 button
隐藏域 hidden
上传文件域 file
下拉列表 select selected="selected" name multiple size
文本区域 textarea cols rows name size maxlength readonly disabled
相关的元素分组 filedset legend
网页插入flash
综合案例
图像热区
功能与作用：可以实现一张图上可以做多个链接。
图像热区
img usemap="#Map" map area shape( rect circle poly ) coords area 英 [ˈeəriə] 美 [ˈeriə] 区域
<img src=”” usemap=”#Map” /> shape 英 [ʃeɪp] 美 [ʃep] 形状
usemap="#Map" ,名字可以随意。但必须加“#” rectangle 英 [ˈrektæŋgl] 美 [ˈrɛkˌtæŋɡəl] 长方形，矩形
map ：图像地图标签，双标记，用法如下： circle 英 [ˈsɜ:kl] 美 [ˈsɜ:rkl] 圆
<map name=”Map” id=”Map”> polygon 英 [ˈpɒlɪgən] 美 [ˈpɑ:ligɑ:n] 多边形
<area shape=”形状” coords=”坐标” />
</map>
area ：区域
shape( rect矩形， circle圆形， poly多边形 )
Coords 坐标
矩形坐标：如：(coords=”0,0,80,80”)
解释：前两个0,0,是矩形的左上角,后面两个数，80,80,是矩形的右下角的坐标
圆形坐标：如：(coords=”118,43,35”)
解释：前两个118,43,是圆心的坐标，第三个数35，是这个圆的半径。
多边形：坐标，每两个一组，代表一个角（顶点）。
普通框架，概念，框架集，框架页
<frameset>属性
cols 框架左右分如:<frameset cols=”100,*” >
rows 框架上下分如:<frameset rows=”100,*” >
frameborder 框架的边框是否显示,值：1,yes显示；0，no 为不显示
border 框架的边框大小
bordercolor 框架的边框颜色
<frame>属性：
src 网页的路径
name 框架的名称，是以后链接的目标
noresize 不可调整宽度
scrolling 是否滚动，no不滚动，yes 滚动，auto 自动。
<noframes> 没有框架时显示的内容
实例后台框架
浮动框架：iframe src name scrolling align width height frameborder
iframe 浮动框架；是双标签；
<iframe src=”网页” name=””>如果浏览器不支持则显示该内容</iframe>
位置：在body中
src 在浮动框架中要显示的页面
name 浮动框架名称
scrolling滚动： 是否，yes ,no ,auto
align：对齐方式，（参考图片的对齐方式） left right
width 框架的宽
height 高
frameborder 不要边no
纯html综合案例个人主页
了解一个网站的基本结构
首页，列表页，详细页
模板的概念
凡是在每一个页面中都存在的内容，通常都做在模板中。
模板是开发网站的基础。
模板的好处：方便修改，便于维护。可以快速开发网站。
一个网站的最基本的必须有三个模板：
首页模板，列表页模板，内容页模板
<table width="960" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><iframe src="toptest.html" width="960" height="96" scrolling="no" border="0" frameborder="0" align="center"></iframe></td>
</tr>
</table>
网站前台与后台
