html

Sublime使用方法及其安装、开发HTML页面
HTML必须掌握的标签及属性
掌握使用表格进行各种类型数据的展示
掌握使用表单进行交互式的页面设计
使用本课程所学的技术完成综合练习

准备工作：
Sublime下载安装，使用方法，开发环境，第一个HTML页面
字体、段落、标题、注释、超链接、锚点、列表、。。。。
表格：基本table用法
表单设计：文本框、单选、复选、隐藏域、列表框、图片框。。。。
综合作业：利用表单和table实现注册页面的布局

开发环境：谷歌、火狐、IE
开发工具：
1、Hbuilder

2、sublime3

3、editplus webstorm

sunlime官网：http://www.sublimetext.com
或者：http://www.sublimetext.cn

什么是HTML
大名：Hyper Text (超文本) Markup(标记) Language(语言)
超文本标记语言

普通文本：word纯文档部分，写文字
超文本：集成一些图片之类的

使用sublime开发一个html页面
设置文件扩展名
创建文件夹及必须的文件
打开sublime开发页面

iso-8859-1
UTF-8
GBK

标签
字体标签

作用：规定文本的字体、字体尺寸、字体样式、字体的颜色
实例：中文
注意：在html 4 不赞成使用改标签
html 5 不支持了。

段落标签和注释

作用：定义一个段落 实例：

我是段落标签！

小贴士：p和br

br:换行不换段
p: 换段 中间有空格

注释标签

作用：编写程序的时候，给予提示，提高代码的可读性，便于后期修改代码使用
小贴士：注释使用频率很高，而且在页面上不会显示

标题标签
<h?></h?>
作用：定义标题头的不同文字的大小，依次显示重要性的递减，也就是我们的权重的递减
对于这3个使用频率最高
阶段小结：
段落 p
字体 font
标题 h1~h6
注释

img标签
作用：能够在浏览器上显示
常用属性：src alt height width
绝对路径：定位到具体的盘符下
相对路径：使用频率很高，通过工程中文件的位置定位图片资源在哪里

超链接标签

作用：使得超链接能够与网络上的另一个文档进行相连接
<a href=”http://www.baidu.com “>打开百度

a标签的target属性
_blank 在新打开的，未命名的窗口打开链接
_parent 在父窗口打开链接
_self 在当前窗口打开链接
_top frame框架

锚点(a标签的另一种变形)
….

小贴士：锚点必须先定义，在使用。

name自定义：望文生义

列表
无序列表 不牵扯到顺序的，比如水果等展示
有序列表 第一节课、第二节课、第三节课

无序列表：

• …….

作用：此列项目使用粗体圆点展示 小贴士：列表标签内部使用段落p 、换行符、图片、超链接以及其他列表等

有序列表

1. …….

作用：列表项目使用数字进行标记 小贴士：列表标签内部使用段落p 、换行符、图片、超链接以及其他列表等

阶段小结：
列表：ul ol li
超链接：
锚点：……

表格：使用表格进行数据的展示
table tr td border width
作用：用于表格、行、列、宽度、边框的制作。
实例：制作课程表

table：表示表格的开始和结尾
tr:行的开始和结尾
td;单元格也即是列的开始和 结尾
border：是否显示表格的边框
width：表格的宽度或者单元格的宽度

px表示像素，显示1024px表示1024像素。一个文字正常的大小：16px。

table占据body宽度的百分之50

制作课程表

表格的合并
合并行、列 colspan rowspan
将上图的语、午休、体合并

colspan 关于列的合并
rowspan关于行的合并

作业效果图：

表格的属性：
三原色：红 绿 蓝
属性名称 属性值 作用
border 1 设置边框
width npx,n% 表格的边框设置
bgcolor 颜色值 表格背景
align left center right 表格再文档中的对齐方式
valign bottom middle top 三种垂直对齐方式

bgcolor：有三种颜色表示的方法：
1、red blue green
2、16进制：以#开头 0123456789ABCDEF #ff0000

rgb表示，html4.0以后不支持了，style=””

cellpadding :表示table的内容和格线之间的距离

cellspacing：表示格线和格线之间的距离

表单：
掌握使用表单进行交互式设计的方法
文本框、单选、复选、隐藏域、列表框、图片框
什么是表单： 用于收集用户的数据，进行人机交互。
什么是人机交互：前台进行操作，后台相应的额进行响应。

控件常用的属性;
属性 作用
name 指定控件的名称，可以重复的
id 指定标签的唯一标识
value 输入或者收集控件的值
checked 单选或者复选默认被选中的项目
selected 列表框组默认被选中的项目
src 图片框的图片来源
onclick 鼠标点击事件 js
disabled 禁用该控件
multiple 允许多选的操作：适用于普通列表框

form表单里面的
action 是进入后台的一个位置，将表单提交的数据传递到aaa里面继续进行处理
method ：
post 隐形的提交：对信息的安全性保护的很好
get 显示显示的提交，对信息的安全性不是那么的好

name:
name如果是一样的话就会被认为是一组单选，意味着只能选中一个
如果name值不一样，那就不是一组。