Html介绍
H
tml(hyper text markup language)超文本标记语言
Html
是一种标准-----w3c
超文本:在文本内容的基础上,添加更加的丰富的信息(图片,动画,声音等)
标记(标签)---<单词>
挨着<是标记
标记通常有两次含义:
表型:每一个标签都有一定表现形式
表意:每一个标签有一定的意义
语言:可以直接被浏览器解析,和程序语言不一样
Html的标签分类
-
双标签:开始标签和结束标签构成,内容放入开始标签和结束标签之间
语法:<标签 属性名=
”
属性值
”
>
……
内容
…
..</标签>
属性理解人的特征 性别=
”
女
”
体重=
”
45
”
身高=
”
165
”
例如 <div></div> <a></a> <html></html>
-
单标签:只有开始标签,没有结束标签,没有内容,在单标签的后面一定要闭合
语法:<标签 属性名=
”
属性值
”
属性名=
”
属性值
”
/>
例如 <link /> <img /> <br /> <meta />
Html基本骨架结构
<html>
<head>
<title>网站的标题</title>
</head>
<body>
</body>
</html>
html文件的扩展名是 XXX.html-----保存XXX.html
html结构说明:
-
<html>含义:告诉浏览器,网页的代码用什么格式来解析
-
<head>含义:告诉浏览器网页的汉子用什么字符集,使用的字符集不正确,就会出现乱码 gb2312 简体中文 ----(汉字操作系统默认使用的)gbk国标码 utf-8多国语言
-
<title>含义:便于搜索引擎
-
<body>含义:网站的内容,99%的内容都放入body标签中,只有放入该标签,才能在窗口显示
注意:tab键可以缩进
Html的书写规范
-
Html 不区分大小写,但是w3c使用的是小写 <body> 不推荐<BODY>
-
H tml如果有标签嵌套,顺序嵌套,不能交叉
-
单标签一定要闭合(/)例如 <br />
-
属性:每一个标签有没有属性,有多少---w3c规定好的
-
属性值:双引号引起
Html注释
注释的内容不在窗口中显示
<!
—
注释内容-->
Html文本标签
-
F ont 设置文本的颜色 文本的字体 文本的大小
<font>设置的内容</font>
属性
C
olor设置文本的颜色 例如color=
”
red
”
color=
”
#ff0000
”
S
ize 设置文本的大小 例如 size=
”
5
”
是以
号
为单位
F
ace 设置文本的字体 例如 face=
”
隶书
”
<b></b>加粗 <strong></strong>加粗 加强语气
<i></i>倾斜 <em></em>倾斜 加强语气
<u></u> 下划线
<ins></ins>插入的是文本
<sup></sup>上标
<sub></sub>下标
注意:一定要顺序嵌套,不能交叉
Html段落的标签
<p></p> 一段
段落的属性
A
lign 取值 left center right
<h1></h1> 标题1
<h2></h2> 标题2
。。。
<h6></h6>标题6
标题的属性
A
lign 取值 left center right
P
re标记:预定义标签,保留原有的空格和换行
D
iv :是网站上使用的标签最多之一,本身没有任何意义,自己独自一行,结合css样式一起使用,构成相应的效果
块标签
S
pan 本身没有含义,但是也是网站使用最多标签之一,结合css一起使用构成功能,
行内标签
块标签:输入完标签之后,自己独占一行
那些属于块标签 <h1></h1>
…
<h6></h6> <p></p> <div></div>
行内标签:输入完标签之后,不是自己独占一行
那些属于行内标签 <em><span><i><u>
注意:下面的写法不推荐使用,通常块标签里面包括行内标签
无序列表
就是若干个相似的内容进行排列,没有先后顺序
语法:
<ul>
</ul>
Ul的属性
type 类型 设置列表前面符号的样式 取值 circle disc默认 square
有序列表
若干个相似的内容进行排列有先后顺序
语法:
<ol>
</ol>
自定义列表
<dl>
<dt>自定义列表标题</dt>
<dd>对该标题进行描述</dd>
</dl>
特殊字符
&
nbsp
;一个空格,代表一个字符,一个汉字占两个字符
©;版权
< <
> >
¥
¥
图片标签(单标签 ,行内标签)
图片的语法:<img 属性名=
”
属性值
”
/>
图片的属性
-
图片的路径 src= ” 图片的地址 ” (图片要放到同一个站点下,放同一个文件夹下)
-
图片的宽度 width= ” 数值 ” 以像素为单位的px,不写单位 例如width= ” 300 ”
-
图片的高度height= ” 数值 ” 以像素为单位px 例如 height= ” 200 ”
-
图片的边框border= ” 数值 ”
-
图片的解释说明alt= ” 对图片的描述内容 ”
-
图片和内容左右之间的距离 hspace= ” 数值 ”
-
图片和内容上下之间的距离 vspace= ” 数值 ” (了解,css样式实现)
注意:图片等比例缩放,只设置宽度或高度
要求:插入一张图片图片的宽度为200像素,高度为160像素,边框为1
表格介绍
语法:
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td> </td>
</tr>
<tr>
<td>内容</td>
<td>图片内容</td>
<td>
内容
</td>
</tr>
</table>
通常表格<table></table>包括行 <tr></tr>行里面包括单元格 <td></td>
注意:内容一定要放入最底层的标签里面
表格的<table>的属性
-
表格的边框border= ” 数值 ” 默认是0
-
表格的宽度 width= ” 数值 ”
-
表格的高度height= ” 数值 ” (w3c推荐不建议使用高度)
-
表格的居中方式 align= ” 水平对齐方式 ” 取值 left center right
-
表格中的内容和单元格之间的距离 cellpadding= ” 数值 ” 默认数值是2像素
-
表格中单元格和单元格之间的距离 cellspacing= ” 数值 ” 默认数值是2像素
-
表格的背景颜色 bgcolor= ” 颜色值 ” 例如 bgcolor= ” red ”
-
表格的背景图片 background= ” 图片的地址 ” (背景图片不能含有中文)---修饰的作用
-
表格的合并边框线 rules= ” all ” (w3c不推荐使用,css样式来实现)
-
表格的边框颜色 bordercolor= ” 颜色值 ” 例如 bordercolor= ” #ff0000 ” (不建议使用)
注意:背景图片的优先级高于背景颜色
需求:插入两行五列的表格,表格的宽度为1000像素,表格居中显示,表格的边框为默认
,在第一行的每一个单元格中放入图片,图片的宽度为190像素,高度为160像素,第二行放入内容
<tr>的属性
-
Height 行的高度 例如 height= ” 300 ”
-
B gcolor背景颜色 例如 bgcolor= ” blue ”
-
B ackground背景图片 例如 background= ” images/33.jpg ”
-
A lign 水平对齐方式 例如 align= ” left //center//right ” //或者
-
V align 垂直对齐方式 例如 valign= ” top //middle //bottom ”
单元格的属性
-
Bgcolor 背景颜色
-
B ackground 背景图片 例如 background= ” images/XX.jpg ”
-
W idth 单元格的宽度 例如 width= ” 300 ”
-
H eight 单元格的高度 例如height= ” 40 ”
-
A lign 内容在单元格中的水平对齐方式 align= ” left/center/right ”
-
V align 内容在单元格中垂直对齐方式 valign = ” top/middle/bottom ” ;
表格的扩充
合并单元格的问题
横向合并 左右合并(若干个单元格合并成一个单元格)
C
olspan=
“
数值
”
例如colspan=
”
3
”
横向合并三个
3
| ||
2
| ||
2
|
上面的表格 纵向合并rowspan=
”
数值
”
例如rowspan=
”
3
”
纵向合并3个
3
| ||
2
| ||
3
|
Rowspan
=
”
2
”
链接
语法<a 属性=
”
属性值
”
>内容</a>
属性
-
链接的地址 h ref = ” 链接的地址url ” ,url 绝对地址 相对地址
-
T arget 打开目标文件的窗口
_blank 在新的窗口中打开目标文件
_self默认的打开方式,在原来的窗口中打开目标文件(原来的窗口被覆盖)
-
N ame 定义锚点的名称
绝对地址(网络地址)---http:
本地的地址 ----在你的本机上测试
相对地址
在同一个站点下
,在同一个文件夹
-
目标文件和当前文件在同一个目录 ,直接写文件名称
-
目标文件在当前文件的下一级目录,XX表示文件夹名 XX/文件名称
-
目标文件在当前文件的下两级目录 xx/xx/文件名
-
目标文件在当前文件的上一级目录 ../文件名称
-
目标文件在当前文件的上两级 目录 ../../文件名称 上三级../../../文件名称
-
特殊链接
下载链接
那些文件不用下载可以直接做链接 .html .jpg .gif
那些文件必须下载链接 .zip .exe
邮件链接
空链接
在当前页面做链接 <a href=
”
#
”
>链接的内容</a>
J
avascript链接
<a href=
”
javascript:window.close()
”
>关闭</a>
Name定义锚点的名称
同一个页面的不同区域直接跳转
定义锚点
<a name=
”
自定义名称
”
></a> 在<a></a>不加内容,给链接中的target用
跳转锚点
<a href=
”
#锚点名称
”
>内容</a>
Meta标签
描述网页文档属性
http-equiv 和name
http-equiv :模拟的是http文件头信息,当内容从服务器端发送客户端,告诉浏览器如何正确显示信息
字符集
为什么要有字符集,是因为计算机只能处理二进制数据。为了让计算机能识别人类语言(0-9、a-z、A-Z、特殊符号),我们就需要对这每一个字符进行
“
编码
”
。所谓
“
编码
”
就是:每一个字符,可以用不同的二进制来表示。
假设:A 用二进制表示 1000, B 用二进制表示 1001
ASCII编码:用1个字节(8位二进制)来表示所有字符,共可以表示 2^8 = 256 。
ANSI编码:其它国家,都对ASCII编码进行扩展,用于显示本国的语言。
在中文操作系统 gb2312
繁体操作系统 big5
用2个字节(16位二进制)(来表示,共可以表示 2^16 = 65536个字符。
G
b2312 收入了6763个汉字
GBK
编码:对GB2312进行扩充,收录了一些冷门字、罕见字、古汉语等。。。大约2.1万个汉字
Unicode编码:计划将世界上所有字符统一编码,用4个字节(32位二进制)来表示一个字符。
它的缺点:编码表文件太大了,不方便使用。用32位二进制表示一个字符,造成空间极大浪费。
UTF-8
: (多国语言编码)不同的字符,它会选择合适编码来进行翻译。
<meta http-equiv=
”
content-type
”
content=
”
text/html;charset=UTF-8
”
/>多国语言
<
meta
http-equiv=
”
content-type
”
content=
”
text/html;
charset=gbk
”
/>国标码
<meta http-equiv=
”
content-type
”
content=
”
text/html;charset=gb2312
”
/>简体中文
网页自动刷新
<meta http-equiv=
”
refresh
”
content=
”
4
”
/> 间隔4秒网页自动刷新
<meta http-equiv=
”
refresh
”
content=
”
8;http://www.baidu.com
”
/> 等待8秒自动跳转到百度页面
Name
可以设置网页关键字,描述信息等
<meta name=
”
keywords
”
content=
”
关键字
”
/>
便于搜索引擎的需要
<meta name=
”
description
”
content=
”
网站的描述信息
”
/>
便于搜索引擎需要
<meta name=
”
author
”
content=
”
作者
”
/>
网站的作者
表单的介绍
可以获取客户端的信息(数据),表单有各种各样的控件,输入框,复选框 按钮等
表单的功能:交互功能
表单的工作原理:
浏览有表单的页面,填写必要的信息,之后单击某个提交按钮
对表单中的数据进行验证,如果不符合制定的要求,提示验证没有通过,如果符合相应的要求,把数据提交到服务器端,数据放入数据库里面
看出,表单分为前台的制作页面,php对数据的处理,添加到数据中,删除数据,更改数据,查询数据等
表单的结构
语法<form 属性=
”
属性值
”
>
控件
</form>
表单的属性
-
N ame 表单的识别名称 一个页面有多处表单 通过表单的识别名称来辨认你提交的是哪个表单的数据
<form name=
” Bill”
> </form>
<form name=
”
game
”
> </form>
-
Action = ” XX.php ” 对数据进行处理
A
ction=
””
对表单中的数据处理的程序就是在当前的文档
-
M ethod= ” get/post ” 把表单中的数据提交到服务器端的方法,传递数据的方法
G
et方法 默认的一种传递数据的方法
通过地址来传递表单中的数据
特点
-
不能传递敏感的数据,密码
-
不能传递大量的数据,每次只能传递1024字节
-
不能上传附件
P
ost 方法,不是通过地址栏传递数据,数据传给文件处理程序
-
相对安全
-
可以传递海量的数据
-
能上传附件
控件
-
单行文本框(单标签,行内标签)
语法:<input type=
”
text
”
/>
属性:
-
N ame 单行文本框的识别名称 ,是把输入框中的数据,提交到文件的处理程序
-
S ize = ” 数值 ” 输入框的宽度,是以字符为单位
-
M axlength= ” 数值 ” 最多允许输入的字符数,如果超出范围,输入不进去
-
V alue= ” 内容 ” 设置输入框的初始值,在输入框中默认的数据信息
需求:邮箱输入框,输入框的显示30个字符
手机号输入框,输入框的显示25个字符,最多允许输入20个字符
可以自定义名称,要起得有意义,命名规则(开头是字母或下划线,后面可以是字母 数字 下划线) name=
“
username
”
-
密码框
语法<input type=
”
password
”
/>
密码框的属性:
-
N ame 密码框的识别名称
-
S ize 密码框的宽度,以字符为单位
-
M axlength允许输入的字符数,如果超出范围,不能输入进去
-
V alue 初始值
-
R eadonly 只读属性,只能选中,不能修改
-
D isable 禁止属性,不能选中,不能更改 (firefox为准)
-
单选按钮
语法:<input type=
”
radio
”
>
单选按钮的属性
-
N ame 单选按钮 组 的识别名称
-
V alue 设置初始值,必须得写,每一项的值
-
复选框 ---(多选按钮)
语法:<input type=
”
checkbox
”
/>
属性
-
N ame 多选按钮 组 的识别名称
-
V alue 初始值,设置每一项值(数据)
-
C hecked默认被选中,刚打开该网页就会选中该项 checked= ” checked ”
自己看的代码
点餐:
<input type="checkbox" name="order" value="红烧肉" />红烧肉
<input type="checkbox" name="order" value="烤鱼" />烤鱼
<input type="checkbox" name="order" value="燕窝" /> 燕窝
<input type="checkbox" name="order" value="鱼刺" /> 鱼刺
-
多行文本框(双标签)
语法:<textarea></textarea>
-
name 多行文本框的识别名称
-
V alue 不要出现value ,如果想显示默认的信息,在<textarea></textarea>直接输入
-
R ows 显示多少行内容 例如 rows= ” 10 ”
-
C ols 一行显示多少个字符 例如 cols= ” 60 ”
-
下拉列表
语法:
<select>
<option>给客户看的内容</option>
<option>给客户看的内容</option>
……
</select>
S
elect 属性
-
name 下拉列表的识别名称
-
value 代表 每一项的初始值
自己练习的代码
<select name=
”
numbere
”
>
<option >请选择企业的人数</option>
<option >0-99</option>
<option>100-499</option>
<option>500-999</option>
<select>
-
隐藏域
隐藏起来,不是给客户看,给程序用的
<input type=
”
hidden
”
name=
”
id1
”
/>
-
文件域
语法:<input type=
”
file
”
/>
文件域的属性
-
N ame 文件域的识别名称
-
V alue 不写value ,而是通过单击按钮来选择文件,选择的文件就是value中,value是只读属性
-
按钮
提交按钮
<input type=
”
submit
”
value=
”
按钮上的文字
”
/>
图片按钮(属于提交按钮的一种)
<input type=
”
image
”
src=
”
图片的地址
”
/>
重置按钮
<input type=
”
reset
”
value=
”
按钮上的文本
”
/> 恢复到默认设置的状态
普通按钮 <input type=
”
button
”
value=
”
按钮上的文字
”
/>
本身没有任何功能,结合程序构成功能
X
html (可扩展的超文本标记语言)-----取代 html,pc机------当今面向的移动端设备
语法
X
html 语法要比html严格
-
X html 输入的标签和属性必须是小写
-
X html单标签 后必须加 / 例如<br />
-
X html 属性必须用双引号
-
X html必须有dtd(document type definition)文档类型定义
D
td (document type definition ) 文档类型定义,是一种验证机制,检验的输入的xhtml是否符合规范
D
td的分类
过渡型 xhtml1-transitional:允许使用表现的标签和属性
<b> <i>
<font
color=
”
red
”
> <table
bordercolor=
”
red
”
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格型: 不允许使用表现的标签和属性
<b> <strong> <u>
<table
width=
”
300
”
> 必须使用的是css样式来设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架型xhtml-frameset:给框架用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-frameset.dtd"
>
可以通过该网站地址测试dtd声明
http://www.w3.org
2