第一天准备学习环境了解web
一. 什么是HTML
1. HTML的概念
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
2. HTML的发展历程
HTML 1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准 xhtml
HTML 5——2014年10月28日，W3C推荐标准
3. 关于HTML5
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成
二、a标签和Hn标签
第二天HTML的语法
一. HTML的语法
1. HTML的文档声明和注释
1.1 注释
<!-- 注释内容 -->
用于对代码的提示和解释，给程序开发者使用
1.2 文档声明
声明文档执行的标准
<!doctype html>
2. HTML标签
① HTML标签是HTMl基本组成部分
② 通常两个尖括号 括起来 <>
③ 标签都是闭合的， 分为双标签和单标签
④ 标签不区分大小写 推荐小写
3. HTML标签属性
① 属性一般出现在标签中，是html标签的一部分
② 标签可以有属性，包含额外的信息，属性的值可以在引号中
③ 标签可以有多个属性
④ 属性名和值成对出现
⑤ 格式 <标签 属性1='值' 属性2='值' >
4. HTML中颜色设置
① 英文单词 red green yellow .....
② 16进制 #121212
5. HTML代码格式
① 任何回车和空格在html中都是不起作用的，可以使用空格进行排版
② tab键进行缩进
二. HTML文件的主体结构
① 文档声明 位于HTML标签之前 该标签告知浏览器文档所使用的HTML规范
② html 告知浏览器 这是html文档
③ head 定义文档的头部信息， 不会像用户显示这些信息
④ title 定义文档标题， 一般写在head 里面
⑤ body 定义文档主题， 文本、图片....
三. HEAD 头部内标签语法
1. meta 标签
1.1 定义页面相关的描述信息，写在head内部
1.2 常用属性
① charset 设置字符集编码 常用的值： utf-8 gbk gb2312
② content 为name和http-equiv 定义关联信息
③ http-equiv 把content属性关联到http头部，必须跟conent成对出现
常用的值：
content-type 定义编码格式 <meta http-equiv="content-type" content="text/html;charset=utf-8">
refresh 刷新页面和跳转 <meta http-equiv='refresh' content='3'> <meta http-equiv='refresh' content='3; url=http://www.baidu.com'
④ name 把conent关联到一个名称
常用的值
author 定义文档作者
keywords 定义网页的关键字 多个关键字用逗号隔开
description 定义网页描述信息
1.3 实例
<meta charset='utf-8'>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="refresh" content='2'>
<meta http-equiv="refresh" content='2;url=http://www.lampbrother.net'>
<meta name="keywords" content="关键词1,关键字2">
<meta name="description" content="描述信息....">
<meta name="author" content="作者">
2. link标签
2.1 定义两个连接文档的关系，导入一个文档
2.2 属性
rel 定义两个文档的关系
type 定义导入文档的类型
href 导入文档的地址
2.3 实例
<link type="text/css" rel="stylesheet" href="url地址">
3. script标签
3.1 定义一段脚本
3.2 属性
type 定义脚本类型
src 脚本地址
3.3 实例
<script>code...</script>
<script src="url地址" type="text/javascript"></script>
4. style标签
4.1 定义css
4.2 属性
type 定义类型
5. title标签
定义文档的标题
第三天HTML文本与文本格式标签
一、 HTML文本与文本格式标签
1. HTML文本标签
1.1 p 定义段落
1.2 b 定义粗体文字
1.3 strong 表示强调， 通常显示为粗体
1.4 hn h1 h2 h3 h4 h5 h6 定义不同等级的标题 显示为又大又粗的字体 一个文档中一般只有一个h1
1.5 em 表示强调， 通常显示为斜体
1.6 i 呈现为斜体
1.7 cite 表示引用， 通常显示为斜体
1.8 sub 下标文字
1.9 sup 上标文字
2. HTML文本格式标签
2.1 bdo 定义文字方向属性dir 值： ltr(默认) rtl
2.2 q 定义短的引用，添加双引号
2.3 abbr 定义缩写属性title 指定全写
2.4 del 定义删除文本
2.5 time 定义时间 属性datetime HTML5新增标签
2.6 summary 配合details使用
2.7 details 定义元素细节 属性open 值 true false
2.8 dialog 定义一段对话 配合 dt(指定说话者) dd(指定说话内容) HTML5
3. HTML字符实体
" "
& &
< <
> >
空格
© ©
§ §
¤ ¤
× ×
第四天列表标签、链接标签扩展
一，列表标签
1. ul 定义无序列表
2. li 定义无序或有序列表的列表项
3. ol 定义有序列表
Start
type
4. dl 定义列表
5. dt 定义定义列表项或定义对话的角色
6. dd 对列表项进行描述或定义对话的内容
7. pre 格式化输出
8. br 换行
二, 链接标签
1. a
1.1 定义超连接 从一个页面跳转到另一个页面
1.2 属性
href 指定要跳转的地址
target 指定新网页打开位置 _blank新窗口 _self本窗口 _top _parent
name 定义锚点名
2. 锚点 跳转到页面的指定位置href=’#green’ 其他标签id属性
3. mailto:: 打开发送邮件的程序
Tel：：
4. 绝对地址与相对地址
相对地址：基于当前文件的位置./ ../ ../../
绝对地址：http://localhost/dir/index.php
/dir/index.php
三、简单了解多媒体标签img等
第五天多媒体标签
八，多媒体相关标签
1. img
1.1 导入一张图片
1.2 属性
src 图片地址
width 设置图片宽
height 设置图片高
border 设置图片边框
alt 定义图片描述信息
title 定义图片描述信息
usemap map标签的name #name
2. map
2.1 给图片划分要去 配合area
2.2 属性
name 给map指定一个name
3. area
2.1 在map的配合下给图片划分指定形状的区域
2.2 属性
shape 划分的形状
coords 形状的坐标·
href 要链接的地址
target 新网页打开方式
4. audio
2.2 导入音频的标签 HTML5新标签
2.3 属性
controls 显示控制按钮
autoplay 自动播放
loop 循环播放
Muted 静音
5. video
5.1 导入视频的标签 HTML5新标签
5.2 属性
controls 显示控制按钮
autoplay 自动播放
width
height
poster 缩略图地址
muted
6. source
6.1 配合video标签 导入不同格式的视频 HTML5新标签
6.2 属性
src 视频地址
7. canvas 用于画图的标签
8. embed
8.1 导入多媒体文件 音频 视频 HTML5新标签
8.2 属性
src 多媒体文件地址
width
height
九， HTML table表格相关标签
1. table
1.1 定义表格
1.2 属性
width 设置表格宽度
height 设置表格高度
border 设置表格边框
cellspacing 单元格之间的距离
cellpadding 单元格边框与单元格内容之间的距离
bgcolor table的背景颜色
bordercolor table的边框颜色
background 导入背景图片
align 指定table位置 left center right 不建议使用
2. caption
2.1 定义表格标题 居中显示 一个table只有caption
3. thead
3.1 定义表格头部
3.2 属性
bgcolor 设置背景颜色
backgorund 导入背景图片
align 单元格内文字的对齐方式
4. tfoot
4.1 定义表格尾部 出现顺序 thead tfoot tbody
4.2 属性
bgcolor 设置背景颜色
backgorund 导入背景图片
align 单元格内文字的对齐方式
5. tbody
5.1 定义表格主题
5.2 属性
bgcolor 设置背景颜色
backgorund 导入背景图片
align 单元格内文字的对齐方式
6. tr
6.1 定义一行
6.2 属性
height 设置本行的高度
align 设置本行文本的水平对其方式 left center right
valign 设置本行文本的垂直对其方式 top middle bottom
bgcolor 设置本行的背景颜色
background 设置本行的背景图片
7. th
7.1 定义单元格 表头的单元格 居中显示 加粗
8. td
8.1 普通的单元格
8.2 属性
width 设置单元格宽度
align 设置本行文本的水平对其方式
valign 设置本行文本的垂直对其方式
bgcolor 设置本行的背景颜色
background 设置本行的背景图片
colspan 设置跨越的列数 重要
rowspan 设置跨越的行数 重要
9. colgroup 对列进行设置
9.1 控制列的标签
10.col
10.1 控制列 配合colgroup
10.1 属性 span
其他属性在html5中不支持
十， HTML4中form表单
1. 表单相关标签
1.1 form 客户端跟服务器端进行交互，常用语 登录 注册 调查问卷...
① 定义表单 所有的表单控件放在form中
② 属性
action 表单要提交的地址
method 提交方法 get（默认）提交的值会显示在url上 不安全而且传递的值数量有限 post 提交的内容不会显示 在url上，传递的值范围也比get方式的大，相对安全
target 打开新网页的方式 _self _blank _top _parent
enctype="multipart/form-data" 传文件必须加上
1.2 input
① 定义输入框密码框单选框复选框.....
② 属性
type input的类型
name input的名字
value input的值
checked 默认radio和checkbox
size input框的大小 type:text password maxlength input最大输入长度 type:text password
1.3 button
① 以标签形式定义按钮
② 属性
type 设置submit（默认值）， 按钮具有提交功能 设置为button，普通按钮 reset 重置
1.4 textarea
① 文本域 双标签
② 属性
name 指定名字
rows 指定行数 决定文本域高度
cols 指定列数 决定文本域宽度
1.5 select
① 选择框 下拉框 单选框
② 属性
name 指定名字
multiple 设置为多选
1.6 option
① 定义select中的的选项
② 属性
value 指定真正的值
selected 默认值
1.7 optgroup
① 给option分组 不常用
1.20 input select textarea button 称作表单控件元素
1.21 通用属性 所有的表单控件元素都具有属性 disabled enabled(默认)
2. form表单input中type类型
text 文本框 value设置默认值
password 密码框 value设置默认值
radio 单选框所有的redio name相同才能单选 value设置真正提交的值 默认的按钮可以设置checked
checkbox 复选框value设置真正提交的值 设置默认添加checked属性
image 提交按钮，按钮样式来自图片配合src属性
submit 提交按钮，value指定按钮上的文字
reset 重置按钮 value指定按钮上的文字
button button按钮 value指定按钮上的文字
file 上传框
hidden 隐藏域 name value
3. label标签
用来嵌套input， 点击label嵌套的任何元素都可以激活label内的input
属性for 指定 input的id
