HTML
HTML简介
- HTML,Hypertext Markup Language ,超文本标注语言。
- HTML是一种规范,是一种标准,编写网页的一种标准。
- 超文本:就是网页上不光有文本,还有图片、音乐、视频等。
- 标注:是一种记号,是一种标志。如:红绿灯
- 语言:这里的“语言”就是代码,跟所谓“程序语言”一点关系都没有。
- HTML的主要目的:就是用来显示网页的不同效果、不同部分
HTML文件结构
标题
网页正文……
HTML标签格式
- HTML标记,大致分两类:(1)双边标记;(2)单边标记
1、双边标记
双边标记,是指有开始和结束标记,内容放在开始和结束标记之间。如:内容
语法格式:<标签 属性1 = “值1” 属性2 = “值2”>内容标签>
2、单边标记
单边标记,只有开始标记,而没结束标记,单边标记一般是没有内容。如:
单边标记一般起一个特殊的功能。
单边标记常用的有10多个标记。
语法格式:<标签 属性1 = “值1” 属性2 = “值2”>
HTML标签编写规范
HTML标记不区分大小写。如:、、
HTML标记属性可有可无。有的标记是没有属性的,如:、、
等
双边标记的内容在开始和结束标签之间,单边标记没有内容。
HTML标记可以相互嵌套,但一定注意是顺序嵌套,外层套内层,一层套一层。
的常用属性
bgColor:网页背景色。如:
background:网页背景图片地址。如:
XHTML简介
- 传统的HTML开发的初衷是面向pc机的,而随机移动终端的不断出现,HTML已经满足不了市场的需求了。
- XHTML是新一代的HTML标注语言。
- XHTML的目的是为了取代HTML。
- XHTML的标记,与HTML一模一样。
- XHTML的语法要比HTML严格的多。
- XHTML可扩展超文本标注语言。
XHTML编写规范
- 所有的标记和属性要全小写
- 单边标记必须关闭。如:
——> - 所有的属性值都必须要加引号。
- 所有的属性都必须有值。如:
—— - 标记之间要顺序嵌套,外层套内层,一层套一层。
- XHTML网页必须要有DTD文档类型定义代码。
DTD文档类型定义
DTD文档类型定义的目的:是一种验证机制,也就是说检验一下你写的XHTML标记语法是否合法。
DTD一共有三大类型:
(1)严格型的DTD
在严格型的DTD中,不能再使用各种表现的标记。如:、、
要求必须使用CSS来取代各种表现标记。
(2)过渡型的DTD
在过渡型的DTD中,可以继续使用HTML中的表现的写法。
这些表现标记,还可以继续使用。如:、、
(3)框架的DTD
HTML常用标记
- HTML文本修饰标记
:加粗bold。如:HTML文件
:斜体italic。如:HTML文本
:下划线underline。如:HTML文本
:删除线strike。如:删除线
上标。
下标。
字体标记
属性:Size:文本大小,取值1-7。1小,7大。
Color:颜色值。
Face:字体,楷体、黑体、宋体...
- HTML排版标记
1.表示一个段落。
常用属性:align:水平对齐方式,取值:left(左)、 center(居中)、 right(右)
举例:水平对齐方式居中对齐
2.换行标记
3.水平线标记(单边标记):
size:水平线的粗细,单位一般为px。
color:水平线的颜色。
width:水平线的宽度。
noshade:去掉水平线的阴影(在HTML中,noshade是没有值的属性)。如:
4.预排版标记
功能:将保留所有的空白字符(空格、换行符),换句话说:就是原封不动输出。
语法:内容
5.标题标记:……
功能:定义各种标题。
属性:align水平对齐方式,取值:left、center、right。
语法:
- 和标记是没有任何意义的标记,但是,又是使用最多的标记。一般要与CSS配合使用。是一个块元素。 是没有任何意义的标记,但是,又是使用最多的标记。要与CSS配合使用。是行内元素。 (1)块元素 块元素,一般是单独占一行,不管内容多少,总是占一行。 块元素有哪些?、
、
、
、
等 (2)行内元素 行内元素,不会单独占一行。 行内元素的宽度,主要是根据内容决定。 多个行内元素,会排在同一行。 行内元素有哪些?、、、、、等 结论:在标记嵌套时,一般是块元素中嵌套行内元素。
- HTML字符实体
- HTML项目符号(无序列表)
- 内容1
- 内容2
- 内容3
- 或
- 的常用属性
type:项目符号的类型,取值:disc(小黑点)、circle(空心圆)、square(实心方块)
注意:在HTML标记中,内容应该放在最底层标记中。
注意:
- 和
- 是块元素。
- HTML编号列表(有序列表)
- 列表1
- 列表2
- 列表3
- 或
- 的常用属性 type:编号类型,取值:1、a、A、i、I start:从第几个开始编号(数字)。
- 自定义列表
- 定义标题
- 定义描述
- 滚动字幕标记
语法格式: 常用属性 Direction:滚动方向,取值:up、down、left、right Width:滚动宽度 Height:滚动高度 bgColor:滚动背景色 scrollAmount:滚动步长值。值越大,滚动越快。 scrollDelay:两步之间的停留时间,以毫秒单位。1秒=1000毫秒。 loop:循环滚动的次数。
- 图片标记:行内元素,单边标记
语法格式: 必须属性: Src:图片的路径(相对路径) 常用属性: Width:图片宽度 Height:图片高度 Border:图片边框粗细。 Align:图片的水平对齐方式,取值:left、center、right alt:图片不能显示时的替换文本 title:鼠标悬停时显示的文本 Hspace:图片与左右文字之间的距离(水平距离) Vspace:图片与上下文字之间的距离(垂直距离)。 - 注意事项 如果图片想等比例缩放,只需要指定width或height其中一个。 Align属性只能让文本居中,不能让图片单独居中。 Align可以实现“图文混排”效果。align = “left | right” 要想让图片实现居中效果,可以给图片增加一个
元素语法格式:…… 常用属性 href:目标文件的地址URL,该URL可以是相对地址,也可以是绝对地址。 target:目标文件的显示窗口。 _blank:在新窗口中打开目标文件。 _self:在当前窗口中打开目标文件(默认打开),相当于“替换”操作。 _parent:在父级窗口来打开目标文件。 _top:在最顶级窗口来打开目标文件。 其中_parent、_top常用框架网页中 name:定义锚点链接的名称 锚点链接 含义:锚点链接,是在一个网页的不同区域进行跳转。锚点理解为“定义记号”。 定义锚点(作个记号): 锚点名称的命名规则:可以包含字母、数字、下划线,但只能以字母开头。 注意:和之间没有内容,换句话说:这个记号不是让我们看的,而是给链接用的。 例如: 跳转到锚点(记号): 语法:…… 文件名:可有可无。如果是同一个网页的不同部分跳转,不需要文件名;如果是跳到另一个网页的不同部分,这时必须要有文件名。 注意:这里的和要有内容,否则,无法进行跳转。 例如:返回顶部 //跳转到同一个网页的不同部分 例如:返回底部 //跳转到news.html文件的底部 1、绝对地址URL (1)远程的绝对地址 访问远程的文件,总是以“http://”域名、主机名开头。 (2)本地的绝对地址(很少使用) 访问本地的绝对地址,是以file:///开头的绝对地址。 2、相对地址URL(项目中路径一般是相对路径) (1)当前文件和目标文件是同级关系,链接地址直接写目标文件名。 (2)当前文件与目标文件所在的文件夹是同级关系,先找“文件夹名”,然后再找“文件名”。 也就是,目标文件位于下一级。 (3)目标文件位于上一层目录中,往上找对应的目录,再找目录中的文件。 往上找,使用“../”符号表示。 “../”代表上一级目录 “../../”代表上两级目录 3、特殊的链接 1、下载链接 什么样的文件会出现下载提示? 反过来说,哪些文件网页可以直接执行?如:.jpg、.png、.gif、.html、.htm、.txt等。 大部分文件,浏览器是不能直接执行的。如:.doc、.xls、.ppt、.rar、.psd…… 2、邮箱链接 3、普通空链接(#) 4、JS链接:添加JS功能代码
- 标记
的主要作用,是提供网页的元信息。比如:指定网页的搜索关键字。 标记有两个属性:http-equid和name。 1.http-equiv属性 功能:模拟http协议文件头信息,当信息从服务器端传到客户端时,告诉浏览器如何正确的显示网页内容。 http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。 (1)设置网页的字符集 (2)网页自动刷新 //每隔2秒钟,自动刷新网页一次 //2秒钟后,跳转到凤凰网 2.name属性 name属性主要用于设置网页的搜索关键字、版权信息、作者等。 (1)设置网页搜索关键字 (2)设置网页描述信息
演员表 姓名 性别 年龄 姓名 性别 跨行合并单元格 姓名 性别 姓名 跨列合并单元格 属性 Width:表格宽度,单位可以是百分比,也可以是固定值。 Height:表格高度。 Align:表格水平对齐方式,取值:left、center、right Border:边框粗细。 Bordercolor:边框颜色。 bgColor:表格背景色。 background:背景图片URL。 cellpadding:单元格边线到内容间的距离(填充距离) cellspacing:单元格与单元格之间的距离(间距) rules:合并单元格边框线,取值:all 注意:rules兼容性不好,请使用CSS来取代它。
3、
属性——行标记 bgColor:行的背景色 height:行的高度 align:行中的文本水平居中,取值:left、center、right valign:垂直居中,取值:top(上)、middle(中)、 bottom(下) 4、 或 属性 是普通单元格, 是标题单元各,居中加粗显示。 width:单元格宽度 height:单元格高度 bgColor:单元格背景色 background:单元格背景图片 align:水平对齐 valign:垂直水齐 rowspan:上下单元格合并。合并属性必须放在第一个单元格中。 colspan:左右单元格合并。合并时,有增就得有减,要保证每一行单元格的个数不变。 - 表单
1、表单的概念 表单主要用来获取客户端用户数据(信息)的。如:注册表单、查询表单、登录表单等。 2、表单的工作原理 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交。 这些表单数据,通过互联网,传递到了服务器上。 服务器上有专门的程序,对表单数据进行验证。如果验证成功,将你的数据存入数据库(MySQL),则返回一个验证成功的信息。如果验证失败,将返回一个错误信息。 从上面表单的工作原来看:表单的制作分两个部分,一是前台页面的制作,二是后台PHP对表单数据的处理。 3、表单的结构
- 单行文本域
语法格式: 常用属性 name:文本框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。 type:表单元素的类型。 value:文本框中的值。 size:文本框的长度,以“字符”为单位。 maxLength:最多可以输入多少个字符,超出的就输不进去了。 readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly” disabled:禁用属性。不能选中,不能修改。如: disabled = “disabled” 举例说明:
- 单行密码域
语法格式: 常用属性 name:密码框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。 type:表单元素的类型。 value:元素中的值。 size:元素的长度,以“字符”为单位。 maxLength:最多可以输入多少个字符,超出的就输不进去了。 readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly” disabled:禁用属性。不能选中,不能修改。如: disabled = “disabled”
- 单选按钮
语法格式: 常用属性 Name:元素的名称 Value:元素的值,该value中数据将发往服务器。 Checked:默认选择哪一项。如:checked = “checked” 注意:一组单选按钮,只能选择一个,但name的值必须一致。如:name = “sex” 单选按钮用户自己不能输入内容,用户只能选择,因此必须为它指默认值value。
- 复选框
语法格式: 常用属性 Name:元素的名称 Value:元素的值 Checked:默认选中。如:checked = “checked” 注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值。 复选框可以同时选多个,也可以一个都不选。
- 下拉列表
- 文本区域
语法格式: 常用属性 name:元素名称 cols:宽度,是指多少个字符宽。 Rows:高度,是指几行高。 提示:之间是默认文本
- 各种按钮
提交按钮: 重置按钮: 图片按钮: //功能就是提交表单,与submit按钮功能一样 普通按钮: 普通按钮本身是不具备任何功能的,一般要与JS程序配合使用,实现相应的功能。
- 隐藏域
功能:隐藏域就是看不见的一个框。传递一些值,而这个值又不想让别人看见。 用处:主要用于PHP后面程序,如:修改某一条新闻内容时,需要传递一个新闻的id号。 语法格式:
- 上传文件域
语法格式: 常用属性 name:表单元素的名称 value:表单元素的值,这个值其实就是上传的文件名。value属性是只读属性,这个value的内容只能来自手动选择上传的文件,而不能用户自己指定一个路径。为了安全起见,value是只读的。 注意:现在只能实现上传文件框,而不能真正实现上传功能,上传功能用PHP来实现的。
表格标题
语法格式:
提示: 标记是 的子标记。
放在 开始标记之后。
图片热点(图像地图)
图像热点:给一张图片加多个链接,默认情况下,一张图只能加一个链接。
1、标记结构: 2、标记的常用属性 Shape:热区的形状,取值:rect(矩形)、circle(圆形)、polygon(多边形) Coords:执区的坐标(位置) 如果 shape = rect 时,那么,coords = “x1,y1,x2,y2” 例如:coords = “50,50,200,150” (x1,y1)为矩形左上角的坐标值,(x2,y2)为矩形右下角的坐标值 如果 shape = circle 时,那么, coords = “x,y,r” ,其中(x,y)为圆心坐标,r为半径
此内容边学习边整理