黑马程序员-HTML网页知识

来源：互联网发布：淘宝卖衣服从哪里进货编辑：程序博客网时间：2024/06/06 04:15

HTML概述

1. Html就是超文本标记语言的简写，是最基础的网页语言。

2. Html是通过标签来定义的语言，代码都是由标签所组成。

3. Html代码不用区分大小写。

4. Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

5. 头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

体部分是真正存放页面数据的地方。

HTML语言定义格式

格式：<标签名属性名='属性值'> 数据内容 </标签名>

<标签名属性名='属性值' />

HTML操作思想

为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。

标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。

字体标签：<font>

例：<font size=5 color=red>字体标签示例</font>

注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。

标题标签

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

特殊字符

如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

“

™

空格

列表标签

<dl>

<dt>：上层项目

<dd>：下层项目

例：

<dl>

</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>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

格式：

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以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>

二、定位标记<a name=””>

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

注：定位标记要和超链接结合使用才有效。

例：

<aname=”标记”>标记位置</a>

<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>



<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>

<script type="text/javascript">
//定义鼠标选中，与鼠标未选中时的文本框样式变化，通过class类选择器进行改变
function inputColor(input)
{
  input.className="norm";
  //对焦点事件进行处理
  input.onfocus=function()
  {
   this.className="focus";
  }
}
//定义窗体一加载完就有的样式
window.onload=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 onsubmit="checkForm(this)">
            <table>
                <tr>
                    <th>用户注册</th>
               </tr>
                <tr>
              <td>
               <div>用户名</div>
               <div>
                <input type="text" name="user" onblur="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"   onblur="checkPsw(this)" />
                  <input type="password" name="repsw" onblur="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>

----------- android培训、java培训、期待与您交流！ ----------------