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和brbr:换行不换段
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自定义:望文生义
列表
无序列表 不牵扯到顺序的,比如水果等展示
有序列表 第一节课、第二节课、第三节课
无序列表:
- …….
有序列表
- …….
表格:使用表格进行数据的展示
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值不一样,那就不是一组。