现在的位置: 首页 > 综合 > 正文

html

2014年11月09日 ⁄ 综合 ⁄ 共 6997字 ⁄ 字号 评论关闭
文章目录

web应用程序:

web的客户端技术 --web基础--只需要浏览器
 
 创建页面-内容展示--------html
 美化页面-设置样式外观-----css
 动态效果-单击等----------javascript
 
web的服务器端技术

 与服务器交互-进行数据的交互---servlet+jsp
---------------------------------------------------------------------------
------------------------------------------------------------------------------
html
 1.概述
 2.基本语法
 3.文本
 4.图形,链接
 5.列表
 6.表格
 7.表单
 8.浮动框架
------------------------------------------------------------------------------
------------------------------------------------------------------------------

html超文本标记语言
hyper text markup language
由浏览器解释执行
扩展性很强,可以嵌套脚本
/********************/

1.概述:

html是一种标记语言,用于编写.html/.htm网页文件,由浏览器解释执行
作用:创建静态网页,结合css,js做出
/**********************************/

2.基本语法:

标记: < >括起来的单词, 成对的多,单个的少 (整体是标记)
元素 : < > 包围的部分,开始,结束,例如:h1元素,br元素
属性:开始标记里,用来修饰元素,设置额外的属性

{
封闭类型标记(成对出现的)
空格隔开
属性="值"

非封闭标记,也叫空标记( 中间不需要内容)(单个出现)
}

{
封闭类型元素
非封闭类型元素   例如: <br /> , <meta /> , <img />
}
/*************************/

注释<!--   ?????????  -->

/**********************************************************/
<!------------------------------------------------------->
<!--html文档的标准结构-->

<!---版本信息-->

<html>
 <head>
  <title>     </title>
  <meta http-equiv="refresh" content="1" />
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

 </head>

 <body>

 

 </body>

</html>

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  中文
 </body>
</html>

 

/**********************************************/
<!-------------------------------------------------->

html文档的标准结构
1.
 <html>
  <head> 关于整个文档的定义,编码,标题</head>
  
  <body> 显示页面的内容</body>
 </html>
2.版本信息
 指定html语言使用的版本
 Strict DTD       严格型
 Transitional DTD 过渡型
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
3.<head> </head>
  元素
  title  
  meta   
    属性:http-equiv   content
    <meta http-equiv="" content="" />
    <meta http-equiv="refresh" content="1" />
    <meta http-equiv="content-type" content="text/html:charset=utf-8" />
    
  script 
  style  
  link等 
4.body
5.body 文本.........

/**************************************************************/

3.文本

1.空格折叠问题
  多个空格或换行 折叠成一个空格或换行
  特殊字符:转义字符
    空格: &nbsp;
    <:  &lt;  left
    >:  &gt;  right
    .
    .
    .
1.标题元素 h1---h6
  基本语法:<h#> </h#>
    #:1.2.3.4.5.6
2.<br/>普通换行
3.<p> </p>段落标记,有段落间距

  //<p align="center"> </p>  后期维护不方便

4.分区元素:可以使用分区元素包含一些元素,进行统一设置
  
  <div> </div>//独占一行,上下分开
  <span>  </span>//同一行,不会影响原有的布局
   例子:<span style="color:red;">W3C</span>
   
5.某些内容
   块级(block)元素和行内(inline)元素
   {
    块级元素:页面上独占一行的元素,上下文的其它元素自动换行,例如:p/h1/div/table/ul/ol/li/...
    行内元素:不会影响同一行的其它元素,例如:span/a/img...
   }
/*****************************************************************/

4.图像,链接

   图像:
    路径:
     相对路径:相对于当前html文档而言
     <img src="xxx.jpg" width="" height=""/>
     绝对路径:web中,指完整的url地址
     <img src="http://www.google.com/xxx.jpg"/>
    
   链接:
    相对路径:
    <a href="xxx.html"> 被点击的文本或则其他元素(例如图片) </a>
    绝对路径:
    <a href="http://www.google.com/xxx.html"> 被点击的文本或则其他元素 </a>
    
    设置打开新页面,不覆盖原页面
    使用 target 属性设置在哪里打开 (1.): _self  默认值,替换 ,(2.): _blank 新打开
    <a href="xxx.html" target="_blank" > 被点击的文本或则其他元素(例如图片) </a>
    
   
   锚点:
     a页去b页
     a页去a页
     
     第一步:定义锚点(放在想要到的位置上方)
     <a name="aaa"></a>
     
     第二步:使用a加上链接去往锚点
     <a href="#aaa">去往锚点</a>
     
     回到最顶端,的简写方法:
     <a href="#">回到最顶端</a>

/***************************************************/

5.列表

列表:将一些有关系的数据排列显示
有序列表ol
无序列表ul
列表项li

列表里面只能放列表项
列表项里嵌套列表

常见应用:实现分层的导航目录--列表的嵌套

有序列表ol(order list)

 <ol>
  <li>  </li> 
  <li>  </li> 
  <li>  </li> 
  <li>  </li> 
  <li>  </li> 
 
 </ol>

无序列表ul(unOrder list)

 <ul>
  <li>  </li> 
  <li>  </li> 
  <li>  </li> 
  <li>  </li> 
  <li>  </li> 
 
 </ul>

列表的嵌套
 <ol>
 
  <li> 
   <ul>
    <li>  </li> 
    <li>  </li> 
    <li>  </li> 
    <li>  </li> 
    <li>  </li> 
   
   </ul>
  </li> 
  
  <li> 
   <ul>
    <li>  </li> 
    <li>  </li> 
    <li>  </li> 
    <li>  </li> 
    <li>  </li> 
   
   </ul>
  
  </li> 
  
 </ol>
/****************************************************/

6.表格

 用于数据的显示,也可以用于页面的布局
table
tr:table row
td:任何内容

 

自适应        //表格剧中
<table border="" width="" height="" align="center">
 <tr>
  <td height="" width="" >a </td>
  <td>b </td>
  <td>c </td>
 
 </tr>
 
 <tr>
  <td> e</td>
  <td> f</td>
  <td> g</td>

 </tr>

</table>

a.基础
b.常用属性
c.行分组
  thead/tbody/tfoot (只是标记可以多次使用)

 <table border="" width="" height="" align="center">
 <thead>
   <tr>
    <td> 1</td>
    <td> 2</td>
    <td> 3</td>
  
   </tr>
 </thead>
 <tbody style="color:green;">
  <tr>
   <td height="" width="" >a </td>
   <td>b </td>
   <td>c </td>
  
  </tr>
  
  <tr>
   <td valign="top/center/bottom"> e</td>
   <td> f</td>
   <td> g</td>
 
  </tr>
 <tbody>
 </table>
 
 valign="top/center/bottom"垂直设置位置
d.不规则表格  (跨行or跨列)
 跨行:rowspan
  <td rowspan="2">
 跨列:colspan
  <td colspan="3">

e.嵌套的表格
  caption:只能位于表格里,在第一行

  <table boirder="1" width="500" heigth="" align="">
  <caption>表1-1</caption>
   <thead>
    <tr>
     <td> </td>
     <td> </td>
     <td> </td>
    </tr>
   </thead>
    <tr>
    <td> </td>
     <td> </td>
     <td> </td>
    </tr>
    
    <tr>
    <td> </td>
     <td> </td>
     <td> </td>
    </tr>
    
    <tr>
     <td colspan="3"> </td>

    </tr>
    
    <tr>
     <td colspan="3">
      <table>
       <tr>
        <td width=""></td>
        <td></td>
       </tr>
      </table>
     
     </td>
    </tr>
  
  
  </table>
 

/*******************************************************/

7.表单

------实现界面的交互

1.什么是表单

表单:承载交互的元素,实现和服务器的数据交互

<form action="xxx.jsp" method="post">
   多个文本框等信息,当前form的按钮承载的数据范围
<form>

 

2.表单包含什么

表单上的交互元素:

<!--------------------------------------------------------------------->
----------input-------------------------------------------------

 

 文本框:

 

<input type="text" value="" readonly="readonly" />
       (value添加默认值,readonly设置只读)

       
 密码框:

 

<input type="password" maxlength=""/>
    (maxlength设置最大长度)
     value/readonlymaxlength
--------------------------------------------------------------------   

 
 按钮:

 

<input type="button" />
 ---------------------------------------------------

 单选框:

 

<input type="radio" name="" value="" /> 
    (value需要标记哪条)
    (要分组(实现多个单选框单选) name属性的值相同一组)

    
 多选框(复选框/核选框):

 

<input type="checkbox" name="" checked="checked"/>
    (checked设置默认初始被选中)
    (要分组 name属性的值相同一组)

---------------------------------------------------

 文件域:

 

<input type="file" />
     (选择文件系统中的某个文件)

 隐藏域:

 

 <input type="hidden" value="">
---------------------------------------------------

 提交按钮:

 

<input type="submit" value=""/>

 重置按钮:

 

<input type="reset"value="" />

 普通按钮:

 

<input type="button" value=""/>

<!--------------------------------------------------------------------->
-------------------

--------选择框---

   <select >   (下拉框/(列表框+size))
     <option> a</option>
     <option> b</option>
     <option> c</option>
   
   </select>
-------------------

----文本区------

 <textarea rows="5">
 
 
 </textarea>
-------------------------

----分组--------

<fieldset>
<legend>信息描述</legend>

</fieldset>

<!---------------------------------->

标签元素:

   <label for=" 某个元素的id值"> 文本 </label>
   点击文本实现这个元素的效果
---
所有的元素都可以设置id
<!------------------------------------------------------------------------>

 8.浮动框架:

(在一个网页嵌入另外一个网页)(例如嵌入广告)

---------
<iframe src="xxx.html" width=""></iframe>
------------------------------------------------------------------------------------------

 

 

 

 

抱歉!评论已关闭.