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


    meta标签:

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

        <meta charset="UTF-8">

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

        <meta name="description", content="******"> 。 描述
    • 图片img

        图片格式:jpg gif png

        语法:

        <img src="图片路径", width="宽度",height="高度", alt="说明">

        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>
     
  • 相关阅读:
    卷积,特征图,转置卷积和空洞卷积的计算细节
    keras中的shape/input_shape
    用”人话”解释CNN —— 对单个特征图进行视觉化
    MINST手写数字识别(三)—— 使用antirectifier替换ReLU激活函数
    MINST手写数字识别(二)—— 卷积神经网络(CNN)
    [LeetCode] Sqrt(x)
    [LeetCode] Text Justification
    [LeetCode] Valid Number
    [LeetCode] Minimum Path Sum
    [LeetCode] Unique Paths II
  • 原文地址:https://www.cnblogs.com/dreamyu/p/9136367.html
Copyright © 2020-2023  润新知