HTML学习笔记

段落的标签：
<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>&nbsp;</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:[e-mail]">发送邮件</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="按钮上的文字" 

onclick=”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声明
框架型：