段落的标签:
<p></p>
一段
Align 取值:left,center,right
标题的标签:
<h1></h1>
属性align取值:left,center,righ
pre标记:预定义标签,保留原有的空格和换行
<pre></pre>
div标签:是网站行使用的标签最多之一,实际上本身没有任何意义,自己独占一行。与CSS样式一起使用,构成相应的效果。属于块标签。
Span标签:本身没有任何含义,但是,也是网站上使用最多的标签之一。结合CSS一起使用,构成功能。不独占一行,属于行内标签。
块标签:输入完标签之后,自己独占一行。
如:
<h1></h1>……<h6></h6>,
<p></p>
行内标签:输入完标签之后,不是自己独占一行。
如:
<em></em>
<i></i>
<u></u>
通常块标签里面包括行内标签
无序列表:若干个相似的内容进行排列,没有先后顺序
语法:
<ul>
<li>搜狗</li>
<li>输入法</li>
<li>浏览器</li>
</ul>
UL的属性:
type类型 设置列表前面符号的样式,取值circle(空心圆),disc默认(实心圆),square(方块).
图片标签:<imag 属性名="属性值"/>
图片的属性:
图片的路径src=”图片的地址”(图片要放到同一个站点下,放同一个文件夹下)
example:<imag src="images/tupian.jpg">
图片的宽度:width=”数值”,以像素为单位的px,不写单位。例如:width=”300”
图片的高度height=”数值”,以像素为单位px.例如height=”200”
图片的边框等于对应的数值、border=”数值”。
图片的解释说明:alt=”内容,对图片的描述”
图片和内容左右之间的距离hspace=”数值”(了解,CSS样式实现)
图片和内天上下之间的距离vspace=”数值”(了解,CSS样式实现)
注意:图片等比例缩放,只设置宽度或高度。
表格:
<table>
<tr>
<td></td>
<td></td>
<td> </td>
<td>内容</td>
</tr>
</table>
表格的属性:border=”数值” width=”数值”
不要轻易给表格设置高
表格的居中方式:align=”水平对其方式” ,取值 left,center,right。
表格中的内容和单元格四周边框之间的距离cellpadding=”数值”,默认数值是2像素。
表格中单元格和单元格之间的距离。Cellspacing=”数值”。
表格的背景颜色bgcolor=”颜色值”,例如:bgcolor=”red”.
表格的背景图片background=”图片的地址”。地址不能含有中文。—-修饰的作用
背景图片的优先级高于背景颜色,若都设置了,显示背景图片。
表格的合并边框线rules=”all”(w3c不推荐使用)CSS样式实现
表格的边框颜色bordercolor=”颜色值”。例如bordercolor=”#ff0000”.(不推荐使用,用CSS样式实现)
表格中行的属性:<tr></tr>
Height 行的高度。例如 height=”300”;
bgcolor背景颜色。例如bgcolor=”blue”;
background背景图片,例如background=”images/33.jpg”;
Align 水平对齐方式。例如align=”left//center//rught”
valign垂直对齐方式。Valign=”bottom.//top//middle”
单元格的属性:
Bgcolor
Background
Width
Height
align内容在单元格中的水平对其方式
valign内容在单元格中垂直对齐方式
表格的扩充
合并单元格的问题
横向合并,左右合并(若干个单元格合并成一个)
Colspan=”3”即为合并三个单元格。
<table>
<tr>
<td colspan="3"></td>
</tr>
<td></td>
<td colspan="2"></td>
</table>
纵向合并,上下合并。
Rowspan=”数值”
<table>
<tr>
<td >11111111111</td>
<td>111111111111</td>
<td rowspan="3"></td>
</tr>
<td>111111111111</td>
<td>111111111111</td>
<tr>
<td>111111111111</td>
<td>111111111111</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2"></td>
<td>111111111111</td>
<td>111111111111</td>
</tr>
<td>111111111111</td>
<td>111111111111</td>
<tr>
<td>111111111111</td>
<td>111111111111</td>
<td>111111111111</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2"></td>
<td>111111111111</td>
<td>111111111111</td>
</tr>
<td>111111111111</td>
<td>111111111111</td>
<tr>
<td>111111111111</td>
<td>111111111111</td>
<td>111111111111</td>
</tr>
</table>
链接
语法<a 属性="属性值">内容</a>
属性:
链接的地址href=”链接的地址=url”,url绝对地址,相对地址
Target 打开目标文件的窗口。blank可以打开新的界面
_self默认的打开方式,在原来的窗口打开目标文件。
name定义锚点的名称。
<a href="http://www.baidu.com/" target="blank">百度</a>
<a href="file:///C:/day2-php学院/案例.html" >内容</a>
相对地址
在同一个站点下,在同一个文件夹。
目标文件和当前文件在同一 个目录,直接写文件名称。
目标文件和当前文件的下一级目录,xx表示文件夹名, xx/文件名称
目标文件在当前文件的下两级目录 xx/xx/文件名
目标文件在当前文件的上一级目录, ../文件名称
目标文件在当前文件的上两级目录,../../文件名称 上三级../../../文件名称
<a href="文件名">跳转</a>
<a href="login/登录界面.html">登录</a>
特殊链接:
下载链接:
.html .jpg .gif 文件不用下载可以直接做链接
.zip .exe .rar文件必须下载
<a href="images/压缩软件wninrar.exe">下载</a>
邮件链接
<a href="mailto:22222222@qq.com">发送邮件</a>
空链接
在当前页面做链接,点完之后还是这个界面。
<a href="#">空链接</a>
JavaScript链接
<a href="javascriptwindow.close()">关闭</a>
地址栏中输入aboutconfig
在搜索栏中输入:close_windows
然后双击,即可实现关闭功能。
name定义锚点的名称
同一个页面的不同区域直接跳转
定义锚点:
<a name="自定义名称"></a>
,在<a></a>
直接不加内容,给链接中的target用。刻了一个记号。
跳转锚点:
<a hre="#锚点名称">内容</a>
颜色代码:
英文 red green blue
十六进制 #ff0000 #00ff00 #0000ff
十进制 rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
十进制:0,1,2,3,4,5,6,7,8,9,
十六进制:十六个基本数构成0-9 a b c d e f
八进制:八个基本数构成 0,1,2,3,4,5,6,7,
二进制 两个基本数构成0 ,1;
meta标签
描述网页文档属性
Http-equiv 和 name
Http-equiv:模拟的是http文件头信息,当内容从服务器端发送客户端,告诉浏览器
如何正确显示信息。
字符集
<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="网站的描述信息"/>
便于搜索引擎的需要。
表单
获取客户端的信息(数据)。表单里面有各种各样的控件。
输入框,复选框,按钮等。
表单的功能:交互功能。
表单的工作原理:
浏览有表单的页面,填写必要的信息,之后单击某个提交的按钮。
对表单中的数据进行验证,如果不符合制定的要求,提示验证没有通过,如果符合相应的要求,把数据提交到服务器端,数据放入数据库里面。
看出,表单分为前台的制作页面,PHP对数据的进行处理。添加到数据库中,删除数据,修改数据,查询数据等。
表单的结构:
语法:
<form 属性=“属性值”>
控件
</form>
表单的属性
name表单的识别名称,一个页面有多处表单,通过表单的识别名称来辨识你提交的是哪个表单的数据。
<form name="BILL"> </form>
<form name="game"> </form>
Action=”XX.php”对数据进行处理
Action=”“在当前页面进行数据处理
Method=”get/post”把表单中的数据提交到服务器端的方法,传递数据的方法。
get方法是默认的一种传递数据的方法。
通过地址来传递表单中的数据
特点:
不能传递敏感的数据如密码
不能传递大量的数据。每次只能传递1024字节。
不能上传附件。
post方法不是通过地址栏传递数据。数据传给文件处理程序。
相对安全
可以传递海量的数据
能上传附件
控件:
●单行文本框(单标签)
如:
<form action="xx.php">
用户名:<input type="text" name="username" size="50" maxlength="6" value="请输入用户名/邮箱"/>
手机号:<input type="text" name="telephone" size="25"maxlength="20"/><br/>
邮箱账号:<input type="text" name="email" size="20">
<br/>
<input type="submit" value="提交">
</form>
属性:
name:单行文本框的识别名称name可以自定义名称,命名规则(开头是字母或下划线,后面可以是字母,数字,下划线)
Name=”username”
Size=”数值”:输入框的数值,是以字符为单位。
Maxlength=”数值”:最多允许输入的字符数,如果超出范围,输入不进去。
Value=”内容”:
●密码框
语法:
<input type="password" name="pwd" size="30" maxlength="5" value="11111" readnonly="readonly" disabled="disabled"/>
密码框的属性:
Name 的识别名称
size密码框的宽度,以字符为单位
maxlength允许输入的字符数,如果超出范围,不能输入进去
value初始值。密码框中默认的显示数据。
readonly只读属性,只能选中,不能修改。
disabled禁止属性,不能选中,不能修改
●单选按钮
语法:
<input type="radio"/>
单选按钮的属性:
name表示单选按钮组的识别名称
Value设置初始值,必须得写。
性别:
<input type="radio" name="sex" value="男"(1)/>男
<input type="radio" name="sex" value="女"(0)/>女
●复选框—–多选按钮
语法:
<input type="checkbox"/>
如:
爱好:
<input type="checkbox" name="hobby" value="旅游" checked="checked"/>旅游
<input type="checkbox" name = "hobby" value="听歌" checked="checked"/>听歌
<input type="checkbox" name="hobby" value="游戏" checked="checked"/>游戏
属性:
name多选按钮组的识别名称
value设置每一项的值,即初始值(每一项的数据)
checked默认被选中
●多行文本框(双标签)
语法:
<textarea></textarea>
如:
请留言:
<textarea rows="10" cols="70" name="content">请留言</textarea>
属性:
rows行数
clos每行的字符数
Name文本框的内容
不用value,二十在双标签之间输入默认信息
●下拉列表
语法:
<select name="city">
<optioni>------------请选择-------</optioin>
<option value="北京"> 北京<option>
<option vlaue="石家庄"> 石家庄 <option>
</select>
属性:
name下拉列表的名称
value代表里面每一项的初始值
颜色:<select name="scolor">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="white">白色</option>
</select>
●隐藏域
隐藏起来,不是给客户看,是给程序用的
<input type="hidden" name="id1"/>
●文件域(没有写value)
语法:
请上传文件<input type="file" name="filename"/>
属性:
Name
Value:不写,通过单击按钮来选择文件
●按钮
提交按钮<input type="submit" value="提交"/>
图片按钮(属于提交按钮的一种)
<input type="image" src="图片的地址(images/22.jpg)">
重置按钮<input type="reset" value="重置"/>
普通按钮<input type="button" value="按钮上的文字"
οnclick=”javascript:window.alert(‘你多次投票,注水了呀?????’)”>本身没有任何功能,结合程序来
xhtml可扩展的超文本标记语言取代html,pc机—当今面向的移动端设备
语法:
Xhtml语法要比html严格
xhtml输入的标签和属性必须是小写
XHTML单标签后必须加/.例如:<br/>
XHTML属性必须用双引号
XHTML必须有dtd(document type definition) 文档类型定义
dtd文档类型定义,是一种验证机制,检验输入的XHTML是否规范。
DTD的分类:
过渡型:允许使用表现的标签和属性
<b> <i> <font color="red" ><table border>
严格型:不允许使用表现的标签和属性
如:<b> <strong> <u> <teble width="100">
必须使用的是CSS样式来设置
可以通过该网站地址www.w3.org测试DTD声明
框架型: