zoukankan      html  css  js  c++  java

  • HTMl学习(2)


    表格的应用:
    表格能将网页分成多个任意的矩形区域, 表格在网页制作中是常用的一种简单布局工具.
    <table></table> 表格
    <tr></tr>行
    <td></td>列
    <th></th>表头  设置为表头后, 会加粗显示
    <caption></caption>表格标题     应用于<table>与<tr>之间的位置

    <table>的属性:
    <table width="宽度" height="高度" border="边框粗细" bordercolor="边框颜色" frame="边框样式" rules="内部边框属性" bgcolor="表格背景色"> </table>
    <tr>的属性:
    <tr align="行内容水平对齐方式:left,right,center" valign="行内容垂直对齐方式:top,middle,bottom,baseline" >

    跨行设置: rowspan  <td rowspan=" "></td>
    跨列设置: colspan   <td colspan=" "> </td>
    设置单元格间距: cellspacing  <table cellspacing=" ">
    设置单元格边距: cellpadding  <table cellpadding=" ">  单元格中内容与单元格边框的距离

    层的应用:
    图层也是网页制作中用于定位元素或者布局的一种技术. 但是, 图层比表格的布局更加灵活, 它能够将层中的内容放到浏览器的任意位置.
    基本语法:
    <div id=" " style="position:定位; left:左边距; top:顶端间距; 宽度; height:高度;"> </div>
    在定义图层的时候, 需要将层的样式同时定义, 否则在网页中不会显示出来.

    框架的应用:
    框架是一种在一个网页中显示多个网页的技术, 通过超链接可以为框架之间建立内容之间的联系, 从而实现页面导航的功能.
    框架的主要作用是在一个浏览器窗口显示多个网页, 每个区域显示的网页内容也可以不同, 它的这个特性在"厂"字型的网页中使用极为广泛.
    基本语法:
    <html>
    <head>
    <title>框架的基本结构</title>
    </head>
    <frameset>
    <frame>
    <frame>
    ..
    </frameset>
    <html>
    在框架集的页面中, <body>标记将被<frameset>标记代替, 然后再利用<frame> 标记去定义框架结构, 常见的分割框架方式有: 左右分割, 上下分割, 嵌套分割.

    <frame>的属性:
    <frame src="加载文件的路径" name="框架名称" frameborder="边框属性" scrolling="滚动条" noresize marginwidth="框架边缘宽度" marginheight="框架边缘高度">
    src: 可以是绝对路径, 也可以是相对路径.
    frameborder: 设置框架的边框是否显示, 0 不显示, 1显示.
    scrolling: yes添加滚动条, no不添加滚动条, auto自动添加滚动条.
    noresize: 不允许改变左侧框架的尺寸, 就是页面被打开后, 浏览者不能通过鼠标调整页面显示的宽度.

    <noframe>设置浏览器不支持框架时, 显示网页文件的内容.
    <noframe>
    很抱歉! 由于您的浏览器版本太低, 不支持框架显示内容.
    </noframe>

    <frameset>的设置:
    <frameset frameborder="边框属性" frmaspacing="框架集边框的宽度" bordercolor="边框颜色" cols="将网页左右分割" rows="将网页上下分割">
    frameborder: 设置框架集的边框是否显示, 0 不显示, 1显示.
    cols, rows:将网页进行分割, 分割方式可以是百分比, 也可以是具体的数值.
    frameset

    <iframe>浮动框架
    浮动框架是框架页面中的一种特例, 在浏览器窗口中嵌入子窗口. <iframe> </iframe>
    基本语法:
    <iframe src="加载文件路径" name="框架名称" width="框架宽度" height="框架高度" align="浮动框架在网页中的对齐方式"> </iframe>

    表单的应用:
    表单是网页中提供的一种交互式操作手段, 在网页中的使用十分广泛. 比如: 搜索, 网上注册等.
    表单主要可以分为两部分, 一是用HTML源代码描述的表单, 可以直接通过插入的方式添加到网页中. 二是提交后的表单处理, 需要调用服务器编写好的脚本对客户端提交的信息作出回应.
    <form>  </form>表单标记
    <form name="表单名称" method="表单发送方法" action="表单处理程序" enctype="表单编码方式" target="表单显示目标"> </form>
    method: 表单发送方法, 可以是post,或者get
    实例:
    <html>
    <head>
    <title>表单标记</title>
    </head>
    <body>
    <form name="form1" method="post" action="mailto:niudongling@163.com" enctype="text/plain">
    </form>
    </body>
    </html>

    <input>信息输入
    是表单中输入信息常用的标记
    <form>
    <input name=" " type=" ">
    </form>
    name是插入控件的名称, type是插入控件的类型,如文本框,复选框,按钮等

    插入文本框text
    <html>
    <head>
    <title>插入文本框</title>
    </head>
    <body>
    <form>
    <input name="text" type="text" maxlength="8" size="5" value="1">
    </form>
    </body>
    插入密码框password
    <html>
    <head>
    <title>插入密码框</title>
    </head>
    <body>
    <form>
    <input name="password" type="password" maxlength="8" size="5">
    </form>
    </body>
    插入:
    Code
    插入文字域textarea
    一行或多行的文字域, 用来输入更多的文字信息, 行间可以换行
    在表单中插入文字域, 只要插入成对的的文字域标记<textarea></textarea>就可以插入文字域. wap和id为任选项.
    <html>
    <head>
    <title>插入文字域</title>
    </head>
    <body>
    <form>
    <textarea name="text" rows="3" cols="3" wrap="" id=""></textarea>
    </form>
    </body>
    </html>
    插入下拉菜单<select>和列表项<option>
    Select
    表单综合实例:
    Form
  • 相关阅读:
    CSS：CSS 组合选择符
    CSS：CSS 布局
    CSS：CSS Float(浮动)
    CSS：CSS Positioning(定位)
    CSS：CSS Display(显示) 与 Visibility（可见性）
    CSS：CSS 尺寸 (Dimension)
    CSS：CSS 分组 和 嵌套 选择器
    CSS：CSS padding（填充）
    CSS：CSS margin(外边距)
    linux概念之/proc与/sys
  • 原文地址：https://www.cnblogs.com/niuniu1985/p/1569420.html
Copyright © 2011-2022 走看看