【html学习整理】meta,img,表格,表单

时间：2018-06-04 23:18:23 阅读：325 评论：0 收藏：0 [点我收藏+]

meta标签:

　　　　作用: 给搜索引擎用。告诉浏览器是什么编码

　　　　<meta name="keywords", content="烧饼武大郎烧饼"> 关键字搜索

　　　　<meta name="description", content="******"> 。描述

图片img

　　　　图片格式:jpg gif png

　　　　语法：

　　　　alt属性的作用：1.当图片无法显示的时候，将图片的说明性文字显示到图片的位置上

　　　　　　　　　　　2.给搜索引擎来搜索，目前搜索引擎确定图片还是通过alt属性

　　　　title : 移上去显示全部

object标签,插入flash
pre标签,预格式化标签,主要做调试用
实体标签

　　　　&lt <

　　　　&gt >

　　　　&nbsp 空格

　　　　&quot "

表格

　　　　默认情况下,网页的布局是流布局(排队),不能随意摆放位置,因此可以通过表格来布局,表格的作用就是来做页面布局的。

　　　　table 表

　　　　tr　　行

　　　　td　　单元格

　　　　th　　列

　　　　单元格中的数据对齐方式:

　　　　　　1. 水平对齐 align left right center

　　　　　　2. 垂直对其 valign top bottom

　　　　单元格间距和单元填充:

　　　　　　1. 间距：单元格和单元格之间的距离 cellspacing 。默认2像素

　　　　　　2. 填充：内容距离单元格的距离 cellpadding 默认1像素

　　　　合并单元格:

　　　　　　1. 合并行,和并列

　　　　　　2.column 列 span跨度

　　　　　　3.calspan 跨了几列(和并列)

　　　　　　4.rowspan 跨了几行(合并行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" width="500px" height="300px" bordercolor="#FF000" cellspacing="20px" cellpadding="20px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td valign="top">令狐冲</td>
            <td align="center">男</td>
            <td align="right" valign="bottom">22</td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td>20</td>
        </tr>
        <tr>
            <td>任我行</td>
            <td>男</td>
            <td>55</td>
        </tr>
    </table>

    <hr>
    <br>
    <table border="5", cellspacing="10", width="300">
        <tr>
            <th colspan="3">学生证</th>
        </tr>
        <tr>
            <td width="30%">姓名</td>
            <td width="30%"> </td>
            <th rowspan="3" >照<br>片</th>
        </tr>
        <tr>
            <td>性别</td>
            <td> </td>
        </tr>
        <tr>
            <td>年龄</td>
            <td> </td>
        </tr>
        <tr>

        </tr>
    </table>
</body>
</html>

技术分享图片

表单 form
- 表单是用来收集用户提交的数据
- 表单域:表单的区域,用来控制表单提交的时候的数据范围
  表单元素：
  
  单行文本框：<input> type name maxlength size
  
  text 文字框。 size宽度是多少字符的宽度。 maxlength 最长字符数 name 给文本框取值
  
  password密文密码框。
  
  <radio> 单选框 checked默认选项。 value 单选项的值。同一组的名称要一致
  
  checkbox：复选框必须给无法输入的属性赋值
  
  <select> 下拉菜单，<option>下拉选项 selected表示默认选中
  
  <select>下拉列表设置size显示数量。多选multiple="multiple"
  
  多行文本也叫文本域 textarea <textarea name="text" id="" cols="30" rows="10"></textarea>
  
  rows 容纳行数。 cols容纳列数
  
  提交按钮 <input type="submit", value="提交">
  
  重置按钮 <input type="reset" value="重置"> 清空填写的数据
  
  普通按钮：提交按钮和重置按钮都是带有功能的，在很多情况下点击按钮的时候不是需要提交和重置，而是执行自己的功能，
  
  这时候需要不带功能的按钮 type=button
  
  input：
  
  text 。 password 。 checkbox radio submit reset button
  
  使用表单
  
  Action ="" 数据提交的位置，为空表示提交到本页面
  
  Method=“”数据提交的方法。 post get

例题:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>
<form action="" method="get">
    <table width="500", bordercolor="#666666" border="1" align="center">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" size="50" maxlength="20" name="username" cellpadding="5" />
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="pwd" size="50"/>
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="男" checked="checked"/> 男
                <input type="radio" name="sex" value="女"/> 女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox", name="hobby" value="爬山"/> 爬山
                <input type="checkbox", name="hobbby", value="游泳"/> 游泳
            </td>
        </tr>
        <tr>
            <td>学历：</td>
            <td>
                <select name="xueli">
                    <option value="高中">高中</option>
                    <option value="大专" selected="selected">大专</option>
                    <option value="本科">本科</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在部门</td>
            <td>
                <select name="bumen" id="" size="3" multiple="multiple">
                    <option value="人事部">人事部</option>
                    <option value="财务部">财务部</option>
                    <option value="项目部">项目部</option>
                    <option value="后勤部">后勤部</option>
                    <option value="保卫部">保卫部</option>
                    <option value="市场部">市场部</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>留言</td>
            <td>
                <textarea name="text" id="" cols="30" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit", value="提交">
                <input type="reset" value="重置">
                <input type="button" value="返回">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

【html学习整理】meta,img,表格,表单

原文：https://www.cnblogs.com/dreamyu/p/9136367.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)