欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阶段复习之html基础(二)——重点标签详解

程序员文章站 2022-03-07 18:13:30
...

##img标签:图片标签的属性 ##
1.src:图像文件的地址
2.width:图像的宽度
3.height:图像的高度
4.alt: 图片找不到时,显示的文字
5.title:鼠标放到图片上,显示的文字
6.border: 图片边框粗细

  • 代码示例
<img src="cycle/img/100001.jpg" width="300dp" height="300dp"
border="1dp" alt="好图" title="好图">
  • 效果
    阶段复习之html基础(二)——重点标签详解
    ##a 标签:超链接表标签的属性 ##
    1.href:超链接文件的地址
    2.target:链接文件显示的位置
    超链接标签target属性的值
    1._blank:超链接文件在新窗口显示
    2._parent:超链接文件在当前窗口的父窗口显示
    3._top:超链接文件在当前窗口的根窗口显示
    4.name:名称为frame的值,超链接文件在相同名称的窗口显示,若不存在该窗口,就打开一个新窗口

  • 代码示例

<a href="http://www.baidu.com" target="_parent">百度一下</a>

table标签:表格标签

3个子标签:1.表头 2.行 3.列
3个属性:1.colspan跨列 2.rowspan跨行 3.align对齐方式left,right,center(align属性适合很多标签)

  • 代码示例
<table bgcolor="#a9a9a9" border="1dp" width="300" >
    <tr><!--表行-->
        <th rowspan="2">文本加粗</th>
        <td colspan="2">表格子</td>

    </tr>
    <tr><!--表行-->

        <td align="left">表格子</td>
        <td align="center">表格子</td>
    </tr>
    <tr><!--表行-->
        <th>文本加粗</th>
        <td>表格子</td>
        <td>表格子</td>
    </tr>
</table>
  • 效果
    阶段复习之html基础(二)——重点标签详解

form表单

也是一个标签: 标签

3个属性:
1.name :表单的名称
2.action :当表单输入完成后,把它的内容传送到哪里,一个路径
3.method :传送方式
1.get方式:
1.url?后面加上传送字符串 2.传送资料会显示在浏览器地址栏 3.会有安全问题 4.传送资料量不可太大
2.post方式:
传送的表单信息作为HttpRequest的一部分,资料不会显示在浏览器的地址栏上,传送字节量可以很大
要求1.安全性高 2.大段文本 3.file表单域,用post传送方式

form表单域
1.文本框:input type=“text” id=“wbk”
2.密码框:input type=“password”
3.单选按钮:input type=“radio” name=“1”>

4.复选框:input type=“checkbox” id=“cb1”

5.隐藏域:input type=“hidden”

6.文本域:textarea rows=“3” cols=“20"该文本域占3行20列
7.普通按钮:input type=“button” id=“button1” name=“button1” value=“普通按钮”
8.提交按钮:input type=“submit” id=“submit1” name=“submit1” value=“提交按钮”
提交按钮用来提交表单,当点击提交按钮时,把表单域有name属性的表单域的name值和value值传给action值所在的地方
9.重置按钮:input type=“reset” id=“reset1” name=“reset1” value=“重置按钮”
重置按钮用来清空以填好了的表单域
10.图片域:input type=“image” id=“image1” name=“image1” src=”"

  • 注意:图片上传from的属性中要求 method=“post” enctype=“multipart/form-data”
  • 代码示例
<form action="test.action" method="post" enctype="multipart/form-data">

        <!-- 注意readonly disabled的区别 -->
账号:    <input id="username" name="username" type="text" width="200dp" value="账号" readonly disabled><br>

密码:    <input id="password" name="password" type="password" width="200dp" >
    <br>
性别:    <input type="radio" name="sex" value="男">男
         <input type="radio" name="sex" value="女">女
    <br>
    爱好:<input type="checkbox" name="boby" value="吃饭">吃饭
    <input type="checkbox" name="boby" value="喝酒">喝酒
    <input type="checkbox" name="boby" value="抽烟">抽烟
    <input type="hidden" id="hidden" name="hidden" value="web用户">

    <br>
    学历:<select>
        <option >小学</option>
        <option>初中</option>
        <option>高中</option>
        <option selected="selected">大学</option>

    </select>
    <br>
    上传头像:<input type="file">
    <br>
    个人简介:<textarea rows="4" cols="20" ></textarea>
      <br>
        <input id="cancel" type="button" value="取消">

    <input id="submit" type="submit" name="提交">

</form>
  • 效果
    阶段复习之html基础(二)——重点标签详解
相关标签: html