HTML概述
1. Html就是超文本标记语言的简写,是最基础的网页语言。
2. Html是通过标签来定义的语言,代码都是由标签所组成。
3. Html代码不用区分大小写。
4. Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
5. 头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
HTML语言定义格式
格式:<标签名 属性名='属性值'> 数据内容 </标签名>
<标签名 属性名='属性值' />
HTML操作思想
为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作,就是在再不断的改变容器的属性值。
例:<font size=5 color=red>字体标签示例</font>
注:简单颜色可是直接写对应的英文,复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列,如:#00FF00表示绿色。建议用工具选取。
如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。
如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。
< | < | > | > | & | & |
" | “ | ® | ? | © | ? |
™ | ? | | 空格 |
|
列表标签
<dl>
<dt>:上层项目
<dd>:下层项目
例:
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
列表中项目符号对应的标签
<ol>:数字标签(a A 1 i I)
<ul>:符号标签(○●■)
<li>:具体项目内容标签。此标签只在<ol> <ul>中有效。
通过type属性更改项目符号,如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS。
<img>
例:<img src=”1.jpg”align=”middle” border=”3” alt=”图片说明文字”/>
align:属性定义图片的排列方式,border用来设置图像的边框。Src 连接一个文件
1. <table>
组成:标题标签:<caption>,给表格提供标题。
表头标签:<th>,一般对表格的第一行或者第一列进行格式化,就是粗体显示。并不常用。
行标签:<tr>
单元格标签:<td>,加载行标签的里面。可以简单理解为,先有行,在行中在加入单元格。
格式:
<table border="1"width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
每个表格可以有一个表头、一个表尾和一个或多个表体(即正文),分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是:可以控制表格分行下载,从而提高下载速度。(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间。)
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示,就是说如果有多个行,那么如果得到一个TBODY行,就可以先显示一行。
TBODY这个标签可以控制表格分行下载,当表格内容很大时比较实用,在需要分行下载处加上<tbody>和</tbody>。
超链接标签:<a>
http协议的解析引擎,来解析href后面的内容,而解析的时候先找的本地host文件,没找到走指定的DNS服务。获取到其对应的IP地址后就走对应的端口获取数据。
如果你没指定协议,浏览器就会启动默认的文件协议。
浏览器没有默认的邮件协议,当找没有时,它会自动去网络中寻找。
两种用法:
一、超链接<a href=””>
例:
<ahref=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<!--href属性值可以是url,也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->
二、定位标记<a name=””>
一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
注:定位标记要和超链接结合使用才有效。
例:
<aname=”标记”>标记位置</a>
<p>…….<!--很多空行以制造网页过长的效果 -->
<ahref=”#标记”>返回标记位置</a>
注:使用定位标记时一定在href值的开始加入#标记名。
当浏览器中输入网址请求访问时,将会先从本机的hosts表中查找是否有该域名的解析地址,如果没有,将会请求到dns中解析域名,得到主机ip地址,然后请求访问该主机。
表单标签:<form>
表单标签是最常用的标签,用于与服务器端的交互。
<input>:输入标签 :接收用户输入信息。
其中的type属性指定输入标签的类型。
l 文本框 text。输入的文本信息直接显示在框中。
l 密码框 password。输入的文本以原点或者星号的形式显示。
l 单选框 radio 如:性别选择。
l 复选框 checkbox 如:兴趣选择。
l 隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。
l 提交按钮 submit 用于提交表单中的内容。
l 重置按钮 reset 将表单中填写的内容设置为初始值。
l 按钮 button 可以为其自定义事件。
l 文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。
l 图像 image 它可以替代submit按钮。
<select>:选择标签 提供用户选择内容。如:用户所在的省市。size 属性为显示项目个数。
<option>:子项标签 属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。
<textarea>:多行文本框。如:个人信息描述。
注意:表单中的所有用户输入的组件都需要定义name属性和value属性(对于输入框可以不定义,因为输入的值就是value),方便于服务器端根据指定的name的值获取具体的用户数据。
注册表单练习:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test10 用户注册</title>
<!--
需求:
编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好(多选), 个人简介(文本域)。
然后使用JavaScript验证这个HTML表单,要求:
1、 用户名: 必须是字母数字或下划线, 不能以数字开头.
2、密码: 6-16位字母数字下划线.
3、确认密码: 和密码一致.
4、其他项为必填.
思路与步骤:
Dom编程的步骤是
1.定义界面
通过html的标签将数据进行封装,设计出基本的界面。
这里采用表格布局,将数据格式化在表格内,为了便于操作,将数据都封装在div标签中。
这里需要用到form,input,table,tr,th,td,selet,option等标签。
2.定义一些静态样式
通过css对界面进行一些静态的样式设置,是页面看起来更加合理,更加美观。
3.动态的完成和用户的交互
a.明确事件源:主要是看哪个标签中的属性需要变化。
b.明确事件:弄清楚产生的事件是什么,然后将事件注册到事件源上。
c.通过javascript的函数对事件进行处理。
d.处理的过程中明确被处理的区域。
-->
<!--利用css将样式设置的更加美观合理-->
<!--定义一些基本的静态样式-->
<style type="text/css">
table{
border:#0033FF 1px solid;
width:750px;
border-collapse:collapse;
}
table td,table th{
border:#0033FF 1px solid;
padding:15px;
}
table th{
background-color:#33FF33;
}
table td{
background-color:#FFFF66;
}
#repswspan{
margin-left:120px;
}
.errorinfo{
color:#FF0000;
display:none;
}
.focus{
border:#9900FF 2px solid;
}
.norm{
border:#666666 1px solid;
}
.error{
border:#FF0000 2px solid;
}
</style>
<!--定义javascript函数对产生的事件进行处理 -->
<script type="text/javascript">
//定义鼠标选中,与鼠标未选中时的文本框样式变化,通过class类选择器进行改变
function inputColor(input)
{
input.className="norm";
//对焦点事件进行处理
input.οnfοcus=function()
{
this.className="focus";
}
}
//定义窗体一加载完就有的样式
window.οnlοad=function()
{
//利用with语句进行下面代码的简写
//拿到表格节点
with(document.forms[0])
{
//通过name名进行节点的传递
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}
//通过代码抽取的形式进行表单校验
//接收一个需要校验的节点,正则规则和需要改变样式节点的id值
function check(inputNode,regex,divId)
{
//因为提交时需要各项都填写正确才能提交成功,所以这里定义一个变量来存储返回值
var b=false;
//通过id值获取节点对象
var divNode=document.getElementById(divId);
//用正则校验所填写的内容是否符合要求
//并作出相应样式的改变
if(regex.test(inputNode.value))
{
inputNode.className="norm";
divNode.style.display="none";
//符合是将返回值设为true
b=true;
}
else
{
inputNode.className="error";
divNode.style.display="block";
}
return b;
}
//校验填写的用户名是否符合要求
function checkUser(userNode)
{
//定义正则规则
var regex=/^[a-z_]([a-z0-9_])*$/i;
//调用提取出来的总的校验函数,并将结果返回给校验整个表单的checkForm函数
return check(userNode,regex,"userdiv");
}
//校验填写的密码是否符合要求
function checkPsw(pswNode)
{
//定义正则规则
var regex=/^\w{6,16}$/;
//调用提取出来的总的校验函数,并将结果返回给校验整个表单的checkForm函数
return check(pswNode,regex,"pswdiv");
}
//校验密码,与以上方法有区别,所以在这里要单独写,只要保证确认密码和密码一致即可
function checkRepsw(repswNode)
{
//定义返回值变量
var b=false;
//获取密码框与确认密码框所填写的值
var value1=repswNode.value;
var value2=document.getElementsByName("psw")[0].value;
//通过id值获取要改变样式的节点
var divNode=document.getElementById("repswdiv");
//比较两个框所填写的内容是否相同,并相应的作出样式的改变
if(value1==value2)
{
repswNode.className="norm";
divNode.style.display="none";
b=true;
}
else
{
repswNode.className="error";
divNode.style.display="block";
}
return b;
}
function checkForm(formNode)
{
with(formNode)
{
if(checkUser(user)&&checkPsw(psw)&&checkRepsw(repsw)&&checkMail(mail))
event.returnValue=true;
else
event.returnValue=false;
}
}
</script>
</head>
<body>
<!--用标签将表单的基本样式进行封装-->
<form οnsubmit="checkForm(this)">
<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div>
<input type="text" name="user" οnblur="checkUser(this)" />
</div>
<div class="errorinfo" id="userdiv">
用户名错误,请按要求填写
</div>
<div>
用户名必须是字母数字或下划线, 不能以数字开头
</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span><span id="repswspan">确认密码</span></div>
<div>
<input type="password" name="psw" οnblur="checkPsw(this)" />
<input type="password" name="repsw" οnblur="checkRepsw(this)"/>
</div>
<div class="errorinfo" id="pswdiv">密码输入错误,请按要求输入</div>
<div class="errorinfo" id="repswdiv">两次密码不一致 </div>
<div>密码必须是6-16位字母数字下划线组成</div>
</td>
</tr>
<tr>
<td>
<div>性别</div>
<div>
<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女
</div>
</td>
</tr>
<tr>
<td>
<div>城市</div>
<div>
<select name="city">
<option value="none">--选择城市--</option>
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
<option value="shanghai">上海</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div>兴趣爱好</div>
<div>
<input type="checkbox" name="java" />java
<input type="checkbox" name="javascript" />javascript
<input type="checkbox" name="html" />html
</div>
</td>
</tr>
<tr>
<td>
<div>个人简介</div>
<div>
<textarea cols="30" rows="10">
</textarea>
</div>
</td>
</tr>
<tr>
<th>
<input type="submit" value="提交数据" />
</th>
</tr>
</table>
</form>
</body>
</html>