HTML基础

html ;超文本标记语言。

      html语言有标签组成。

      html中的数据都会封装在标签中,因为可以通过标签中的属性值的改变对封装内的数据进行操作。

 

      确定html代码范围<html></html>

      在该范围中可以定义两部分内容,一部分书头,一部分是体。

<html>

      <head></head>

      <body></body>

<html>

head:网页的一些属性信息,比如:标题

body:网页显示的数据。

 

标签特点:对数据进行封装,那么就又开始和结束标签。

但是也有一些标签只体现单一功能,所以不需要结束标签,规范中要求标签必须要结束,所以这样的标签在内部结束。

如:<.br />  <hr/>分割  <img />  <input />

 

标签格式:<标签名  属性名=”属性值”>数据</标签名>

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

常用标签:

 

字体:<font>

<font  size=”7” color=”#ffff00”>数据</font>

特殊的部分:如果要在页面显示一些特殊符号,需要进行转义。

<:  <  >:  >   &:  &    空格:  

标题:<h1><h2><h3><>.......<h6>

2  列表标签:<dl></dl>

          上层项目:<.dt>

          下层项目:<.dd>(有缩进)

           项目符号标签:

                    <ul>  无顺序              

                    <ol>  有顺序

                    这两个标签的列表项都有<li>标签来封装。

           <body>

                <ol>

                    <li>游戏名称</li>

                         <ul>

                             <li>星际</li>

                             <li>红警</li>

                         </ul>

                    <li>游戏内容</li>

                        <ol   type=”a”>

                              <li> 攻略<./li>

                              <li> 秘籍</li>

                         </ol>

                 </ol>

            </body>

      1 游戏名称

              a 星际

              b 红警

      2 游戏内容

              a 攻略

              b 秘籍

图像标签 <img>

          <img src=””   alt=”图像说明文字”/>

表格标签

         表格由行所组成,行由单元格组成

         表格中默认都有一个tbody标签

         标题标签:<caption>

<table boder=”1”  bordercolor=”red”   width=”60%”   (内边距)cellpadding=”10”  (单元格之间距离)cellspacing=”0”>

      <tr>

               <th></th>//居中  加粗

               <th></th>

      </tr>

      <tr>

               <td></td>

               <td></td>

      </tr>

 

</table>

表格是最常用的标签,用于对数据进行格式化。

超链接;<a>

<a href=”http://www.sina.com.cn”   (在新窗口打开)target=”_blank”  (显示全部标题)title=””>新浪网站</a>

 

当被点击后,会启动引擎所对应的解析程序,去查找指定的主机。

1  先找本地主机的hosts文件,如果没有找到该主机对应的ip地址

2  去公网NDS服务器上找对应的ip地址

 

 

<a href=”mailto:[email protected]?subject=haha&cc=[email protected]”   >联系我们</a>

当点击链接时,就会出现邮件相关联的解析程序,本机默认的是outlook

   

 

超链接的另一作用:

定位标记:

<a  name=”top”>  一个位置 </a>  //不能点

 

<a  href=”#top”> 获取那个位置</a>

 

 

6  表单标签:

         该标签是可以和服务器进行交互的。

         <from>

         表单标签中的元素:

         <input>:该标签因为type属性的值的不同,所对应的组件也不一样。

type属性:

1, text:  文本框,输入文本可见

2, password : 密码框  输入的文本不可见

3, radio: 单选框, 注意 要被选中,必须要给单选框定义一个name属性

当有多个单选框时,只能有一个被选中,这些单选框的name必须相同

 

4, checkbox:复选框,党对多个数据进行同时选中时。

5, file:可以进行选择的组件,通常用于附件,或者文件上传。

6, hidden: 隐藏组件,该组件不会在页面上显示,但是其定义的namevalue可以提交到服务端。

7, button: 按钮组件,自定义一个按钮默认是没有任何效果的,可以通过注册时间并加入自定义效果。

8, reset: 重置按钮,将组建被操作的效果还原到初始状态吧。

9, submit:提交按钮,将组建中添加的数据提交到指定的目的地。

10, image:(比submit好看点)图像组件,为了避免提交按钮的难看,可以通过imagesrc属性连接一个好看的提交按钮效果。

 

下拉菜单:<select>

         每一个下拉菜单项都有option进行封装。

         <select>

               <option></option>

          </select>

文本区域:<textarea>

 

表单组件通常都需要定义namevalue属性,因为要将数据发送给服务端。

服务端只有知道了该name的值才可以对提交的数据进行分别获取。

 

form标签中的常见属性:

action:指定数据提交的目的地。method:提交方式,两种常用值getpostget为默认。

 

getpost的区别:

get:会将提交的数据像是地址栏上。

post:不会将提交的数据像是地址栏上。

 

get:提交数据的体积受地址栏的限制。

post:可以提交大体积数据。

 

get:对于敏感信息不安全。

post:对于敏感信息安全。

 

get:会将提交信息封装在请求行,也就是http消息头之前。

post:会将提交信息封装在数据体中,也就是http消息头之后的空行后。

 

对于服务端而言:

表单提交尽量使用post,因为涉及到编码问题。

对于post提交的中文,在服务端可以直接使用setCharacterEncoding(“gbk”)就可以解决

对于get提交的中文,在服务端可以只能通过IOS8859-1将数据编码一次,在通过指定的码表,如GBK解码,因为tomcat服务端默认的解码是IOS8859-1

 

使用表单的组件不一定要用form标签。

 


<!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>无标题文档</title>
</head>

<body>

<legend >注册区域</legend>
<form>
    <table border="1" bordercolor="#FFCC33" width="70%" cellpadding="10" cellspacing="0">
    <tr>
       <th colspan="2">注册页面</th>
       
    </tr>
    <tr>
       <td>用户名:</td>
       <td><input type="text" name="user"/></td>
    </tr>
    <tr>
       <td>密码:</td>
       <td><input type="password" name="psw"/></td>
    </tr>
    <tr>
       <td>确认密码:</td>
       <td><input type="password" name="repsw"/></td>
    </tr>
    <tr>
       <td>性别:</td>
       <td>
            <input type="radio" name="sex" value="nan"/>男
            <input type="radio" name="sex" value="nv"/>女
       </td>
    </tr>
    <tr>
       <td>技术:</td>
       <td>
          <input type="checkbox" name="tech" value="java"/>java
           <input type="checkbox" name="tech" value="jsp"/>Jsp
            <input type="checkbox" name="tech" value="html"/>HTML
       </td>
    </tr>
    <tr>
       <td>国家:</td>
       <td>
           <select name="country">
              <option value="none">--选择国家--</option>
              <option value="china">中国</option>
              <option value="usa">美国</option>
              <option value="en">英国</option>
           </select>
       </td>
    </tr>
    <tr>
       <th colspan="2">
       <input type="submit" value="提交数据"/>
       <input type="reset" value="清除数据"/>
       </th>
       
    </tr>
    </table>
</form>
</body>
</html>





<!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>无标题文档</title>
</head>
       
<body>

<img src="11.gif" alt="图片署名文字" height="71" width="164" />
<hr  color="#00CC66" size="4"/>
<ol type="i" start="3">
     <li>hdvufjbv</li>
      <li>hdvufjbv</li>
      <li>hdvufjbv</li>
</ol>
<ul  >
     <li>hdvufjbv</li>
      <li>hdvufjbv</li>
      <li>hdvufjbv</li>
</ul>
<dl>
<ol  type="1" >

         <li> <dt>玩具</dt></li>
         <ol  type="a" >
          <li>毛绒熊</li>
          <li>卡通狗</li>
          <li>泰迪熊</li>
          </ol>
        <li><dt>游戏名称</dt></li>
         <ol type="I" >
          <li>红星大战</li>
          <li>开心泡泡猪</li>
          <li>连连看</li>
          </ol>
</ol>          
</dl>

       <font color="#FF9900" size="7">这是我的文字</font>
       <!--注释文字-->
</body>
</html>


 

HTML基础,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。