zoukankan      html  css  js  c++  java
  • 网页制作--标签,表格,表单,框架

    网页三部份内容:HTML CSS Javascript
    路径:一般做网页的时候用的相对路径。
    images/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找aaa.jpg
    images/1000/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找1000文件夹,再在1000文件夹中找aaa.jpg
    ../images/aaa.jpg 找网页上一级文件,在网页上一级文件夹中找images文件夹,在images文件夹中找aaa.jpg
    ../../images/aaa.jpg 找网页上两级文件,在网页上两级文件夹中找images文件夹,在images文件夹中找aaa.jpg

    一、body:
    bgcolor  背景颜色
    background 背景图片
    topmargin  
    rightmargin
    bottommargin
    leftmargin
    body以上的属性仅做了解。

    二、标签:
    (一)基本标签:
    1.格式控制:
    <font face="字体名称" color="颜色" size="大小"></font> 字体
    <b></b>加粗 <strong></strong>
    <i></i>倾斜 <em></em>
    <u></u>下划线
    <br>  空格</br>
    <pre> 内容里面格式不变</pre>

    <center>居中</center>
    转义:——需要记住
    &nbsp;——空格
    &lt;——小于号 <
    &gt;——大于号 >
    &amp;——&
    &copy; ——©

    2.内容容器:
    <h1></h1> ...<h6></h6> ——标题。默认情况下,加粗,独立一行
    <p></p> ——段落。独立一段,默认情况下,段落前后都会有一行大小的空白。

    <div></div>——区域标签,层标签。用来划分网页区域,进行页布局。前后换行。
    <span></span>——区域标签,层标签。前后不换行。


    <ul></ul>——无序列表标签。
    <ol></ol>——有序列表标签。
    <li></li>——列表项标签,用来放在ol或ul里面的。

    (二)常用标签:
    1. 超链接
    <a href="超链接的路径" target="_blank">超链接显示的内容</a>
    书签:
    第一步:定义书签 <a name="书签名">内容</a>
    第二步:定义超链接 <a href="页面名#书签名">超链接文字</a>

    2.图片
    <img src="路径(相对)" width="" height="" alt=""/>

    3.图片超链接
    <a href="超链接的路径"> <img src="图片路径"/> </a>

    演示

    <body bgcolor="#99CC33" >
    
    <font color="#0066ff" face="华文行楷" size="5">字体控制 </font><!--注释--><br>
    <b>字体加粗</b><br>
    <i>字体倾斜</i><br>
    <u>下划线</u><br>
    <strong>加粗</strong><br>
    <em>倾斜</em><br>
    <center>居中</center><br><br><br>&nbsp;<br>
    <br>
    <br>
    
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h6>标题6</h6>
    <p>段落1</p>
    <p>段落<br>
    2</p>
    
    <font>第一种<div>层标签</div><font>
    <font>第二种<span>层标签</span></font>
    
    <ol type="I">有序列表
          <li>序号1</li>
           <li>序号2</li>
            <li>序号3</li>
    </ol>
            <ul type="circle">无序列表
            <li>第一</li>
            <li>第二</li>
            <li>第三</li>
            </ul>
            <img src="images/1.gif"jpg" alt="这是一张图片" width="200"/><br>
    <a href="http://www.baidu.com.cn"> <img src="images/0.gif"width="200"/> </a><br>
            <img src="images/5.gif" width="200"/><br>

    (三)表格:
    <table></table>
    bgcolor:背景色。
    align:表格在页面中的对齐方式。
    宽 像素,百分比。
    border:边框宽度
    cellpadding:边距
    cellspacing:间距

    <tr></tr>
    bgcolor:背景色
    align:这一行中的文字的对齐方式
    height:高度,一般是像素,也可设百分比。

    <td></td>
    bgcolor:背景色
    align:水平对齐
    valign:竖直对齐

    height:高
    colspan:列的跨度。
    rowspan:行的跨度。
    注意:合并单元格的时候,一定要算好格好。

    表的演示

    <title>2015年1月16日NBA战况</title>
    </head>
    
    <body bgcolor="#FFFFFF" width="33%"  >
    <table bgcolor="#000000" border="0" cellpadding="0" cellspacing="1">
    <tr bgcolor="white" align="center">
    <td>交战双方</td>
    <td>比分</td>
    <td>mvp</td>
    <td>数据</td>
    </tr>
    <tr bgcolor="white" align="center">
    <td colspan="2" width="25%">火箭vs雷霆112:101</td>
    
    <td rowspan="2" width="25%">哈登<br>勒布朗詹姆斯</td>
    <td width="25%">32分9篮板10助攻</td>
    </tr>
    <tr bgcolor="white" align="center">
    <td>骑士vs湖人</td>
    <td>109:102</td>
    
    <td>36分5篮板6助攻</td>
    </tr>
    
    </table>
    </body>
    </html>

    (四)表单:
    <form id="" name="" action="" method=""></form>
    1.文本类
    单行文本框:<input id="" name="" type="text" value="内容"/>
    多行文本框:<textarea id="" name="" rows="行数" cols="列数">内容</textarea>
    密码框:<input id="" name="" type="password" value="内容"/>
    隐藏域:<input id="" name="" type="hidden" value="内容"/>
    2.按钮类
    普通按钮:<input id="" name="" type="button" value="按钮上的文字"/>
    提交按钮:<input id="" name="" type="submit" value="按钮上的文字"/>
    重置按钮:<input id="" name="" type="reset" value="按钮上的文字"/>
    图片按钮:<input id="" name="" type="image" src="图片的路径" width="宽" height="高"/>

    表单演示

     <form id="f1" name="f1" action="" method="">
    <input id="" name="" type="text" value="请输入用户名"/><br>
     <input id="" name="" type="password" value="请输入用户名密码">
     <input id="" name="" type="submit" value="登陆"/><br>
     <input id="" name="" type="text" value="请输入支持的球队"/><br>
     <textarea id="" name="" rows="5"cols="20" >请输入支持的原因,字数200字以内</textarea><br>
     <input type="button" name="" id="" value="火箭支持率"/><br>
     <input type="button" name="" id="" value="雷霆支持率"/><br>
     <input id="" name="" type="submit" value="重置"/><br>
     <input id="" name="" type="image" src="images/png-0035.png"/>联系我们&copy;
     </form>

    (三)、选择类:
    1.单选
    <input id="" name="组名" type="radio" value="运算的值" checked="checked"/>
    2.复选
    <input id="" name="组名" type="checkbox" value="运算的值" checked="checked"/>
    3.列表
    下拉列表:
    <select id="" name="">
    <option value="1">送餐</option>
    <option value="2">取餐</option>
    <option value="3">订餐</option>
    <option value="4">进餐</option>
    </select>
    列表:
    <select id="" name="" size="大于1的数字" multiple="multiple">
    <option value="1">送餐</option>
    <option value="2">取餐</option>
    <option value="3">订餐</option>
    <option value="4">进餐</option>
    </select>
    4.文件
    <input id="" name="" type="file"/>

    五、框架
    (一)frameset
    frameset主要用来分隔浏览器窗口,它所在的页面是用<frameset></frameset>来替换<body></body>
    属性:
    rows="100,*,100"
    cols="100,*"
    frameborder="no"
    子元素:
    <frame name="名称" src="页面的路径" noresize="noresize" scrolling="yes|no|auto"/>

    (二)iframe
    它是嵌入在body里面的。
    <iframe width="300" height="400" frameborder="0" scrolling="no" src="Untitled-3.html"></iframe>



  • 相关阅读:
    python--------------内置函数
    下载文件的一致性验证之MD5值校验
    MySQL最大连接数设置
    Jenkins构建次数设置
    Linux(CentOS7)安装zip、unzip命令
    如何在CentOS 7上安装Munin
    Intellij IDEA14 搜索框及控制台乱码解决
    IDEA测试结果查看
    IDEA运行TestNG报错rg.testng.TestNGException: org.xml.sax.SAXParseException;
    intellij idea 注释行如何自动缩进
  • 原文地址:https://www.cnblogs.com/w297613932/p/4229004.html
Copyright © 2011-2022 走看看