码迷，mamicode.com
首页 > 其他好文 > 详细

9-17

时间：2019-10-25 23:18:09      阅读：77      评论：0      收藏：0      [点我收藏+]

标签：pre   oct   不能   col   选中   ipa   河北省   end   use   

1-9 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>123123</div>
    <div>123123</div>
    <div>123123</div>
    <div>123123</div>

</body>
</html>

代码：div标签与span类似，也是个白板标签，不过它属于块级标签

技术图片

1-10


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="GET">
        <input type="text" name="user">
        <input type="text" name="email">
        <input type="password" name="pwd">
        <input type="button" value="登陆1">
        <input type="submit" value="登陆2" >
    </form>

</body>
</html>

代码：
text 可以输入文本内容
password 可以输入密码，在浏览器上输入的内容是隐藏的
buttom 是普通点击按钮，默认没有任何作用，可以通过JS赋予功能。
submit 可以将输入的信息提交给服务端，但是必须要在父集设置一个form标签，才可以将input标签用户中输入的信息给提交。
form 标签的action是指定的服务端连接，比如可以是http://1.1.1.1:8888/index。 # 符号是跳转到本地。
form 标签的method指定提交的方式。GET会将输入的信息拼接到连接的后面并提交到服务端；POST会将输入的信息放入内容中提交到服务端（没有加密，抓包可以抓到）。
name是用于以字典格式数据，提示服务端来识别用户输入的是什么信息的，如：{‘user‘:‘111‘,‘email‘:‘‘2222‘,‘pwd‘:333}。 这样服务端就知道提交的每个信息都是分别做什么用的。

技术图片

上图：输入框是我们要提交的信息。点击登录1按钮没有任何反应，因为button本身默认是没有任何功能作用的。 需要点击登录2（submit）来提交。

技术图片

上图：信息以提交，通过地址栏可以看到，提交的信息拼接到了连接的后面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="POST">
        <input type="text" name="user">
        <input type="text" name="email">
        <input type="password" name="pwd">
        <input type="button" value="登陆1">
        <input type="submit" value="登陆2" >
    </form>

</body>
</html>

代码：method="POST"

技术图片

上图：提交过数据后，数据会在http的内容中发送到服务端（未加密）。

1-11

技术图片

技术图片

上2图：这是在一个搜狗搜索中 去 搜索天气预报； 图中地址栏红框中的query=天气预报就是我们搜索的内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query">
        <input type="submit" value="搜索">
    </form>
</body>
</html>

代码：
action 指定了搜狗搜索（服务端地址）
name="query" 将名为query的信息提交给服务端

技术图片

技术图片

上2图：这里看到通过自己的web代码实现了内容搜索

  • radio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别：</p>
            男：<input type="radio">
            女：<input type="radio">
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代码：type=‘radio‘，效果是单选项

技术图片

上图：图中可以看到虽然效果是单选项的，但是两个选项都可以同时选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别：</p>
            男：<input type="radio" name="test">
            女：<input type="radio" name="test">
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代码：将这两个radio 都设置name属性，且值相同，这样再去选择的时候，就只能选择其中一个选项了。

技术图片

上图：当前只能选择一个；

虽然当前可以选择一个选项了，但是当你提交后，对于服务端来说，你的name都是相同的，无法对其作出区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别：</p>
            男：<input type="radio" name="test" value="1">
            女：<input type="radio" name="test" value="2">
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代码：加上value，可以根据value来区分用户选择的是哪一个选项。

  • CheckBox
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别：</p>
            男：<input type="radio" name="test" value="1">
            女：<input type="radio" name="test" value="2">

            <p>爱好</p>
            篮球：<input type="checkbox" name="favor" value="1">
            足球：<input type="checkbox" name="favor" value="2">
            网球：<input type="checkbox" name="favor" value="3">
            台球：<input type="checkbox" name="favor" value="4">

            <p>其他</p>
            吃饭：<input type="checkbox" name="other" value="1">
            睡觉：<input type="checkbox" name="other" value="2">

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代码：多选框，也可以将其name设置为相同，这样如果有不同类型的多选框，就可以通过相同的name来分类了，然后用value来区分你选择的是什么。

技术图片

技术图片

上2图：多选择后提交，可以看到地址栏中将favor=1和favor=2提交了。
服务端会拿到一个favor的列表 [1,2]

  • checked
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>请选择性别：</p>
            男：<input type="radio" name="test" value="1" checked="checked">
            女：<input type="radio" name="test" value="2">

            <p>爱好</p>
            篮球：<input type="checkbox" name="favor" value="1" checked="checked">
            足球：<input type="checkbox" name="favor" value="2">
            网球：<input type="checkbox" name="favor" value="3" checked="checked">
            台球：<input type="checkbox" name="favor" value="4">

            <p>其他</p>
            吃饭：<input type="checkbox" name="other" value="1">
            睡觉：<input type="checkbox" name="other" value="2">

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代码：checked可以让选项默认是被选中状态

技术图片

  • file
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <input type="file" name="fname">

    <input type="submit" value="提交">

</form>
</body>
</html>

代码：
file可以选择文件； 服务端通过定义的name来选择文件。
在form标签中定义enctype="multipart/form-data" 表示在你提交后，会将文件一点一点的提交到服务端

技术图片

上图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <input type="text" value="">
    <input type="reset" value="重置">

</form>
</body>
</html>

代码：reset可以用于将你输入的信息重置（删除）

技术图片

上图：点击文字旁边的重置，输入的信息就会被删除掉。

1-12

  • textarea
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <textarea>默认值</textarea>

</form>
</body>
</html>

代码：textarea用于可输入多行内容的标签；因为后面有闭合标签，所以默认的文字，要放在中间。

技术图片

上图：有默认文字，可以输入多行内容。

  • select
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <select name="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
    </select>
    <br>
    <br>
    <br>
    <input type="submit" value="提交">

</form>
</body>
</html>

代码：
select中设置option，用于点击后出现下拉框可供选择。
要设置name和value，这样提交后服务端才知道你提交的是什么内容。

技术图片

技术图片

上2图：点击了上海提交，可以看到地址栏的值 city=2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <select name="city" size="10" multiple="multiple">
        <option value="1">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="3">深圳</option>
    </select>
    <br>
    <br>
    <br>
    <input type="submit" value="提交">

</form>
</body>
</html>

代码：
size调整大小
multiple="multiple" 这样就可以多选了

技术图片

上图：按住ctrl键就可以选择多个内容了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <select>
        <optgroup label="河北省">
            <option>石家庄</option>
            <option>廊坊</option>
        </optgroup>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="submit" value="提交">

</form>
</body>
</html>

代码：optgroup可以分组，河北省在这里只是个标题，是不可选择的，只有石家庄和廊坊是可选的。

技术图片

1-13

  • a标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <a href="https://www.baidu.com">百度</a>

</form>
</body>
</html>

代码：a标签是用于做超链接的

技术图片

上图：点击就可以跳转到百度了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.baidu.com" target="_self">百度</a>

</form>
</body>
</html>

代码：target="_blank"使用新的标签页跳转； target="_self"使用当前标签页跳转。

  • 锚点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <a href="#i1">第1章</a>
    <a href="#i2">第2章</a>
    <a href="#i3">第3章</a>
    <a href="#i4">第4章</a>
    <div id="i1" style="height: 600px">第1章的内容</div>
    <div id="i2" style="height: 600px">第2章的内容</div>
    <div id="i3" style="height: 600px">第3章的内容</div>
    <div id="i4" style="height: 600px">第4章的内容</div>

</body>
</html>

代码：将div设置id； 然后在a标签中设置#+idx，#表示跳转到当前页面，然后加上后面的id几，就是跳转到相应的div标签。

技术图片

上图：当你点击a标签的超链接时，就会跳转到对应id的div标签位置。

技术图片

上图：跳转到第4章内容的位置，这个具体的位置叫做锚点

1-14

  • img
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E7%86%8A%E7%8C%AB">
        <img src="1.jpg" style="height: 300px; width: 400px">
    </a>

</body>
</html>

代码：img src可以选择显示的图片； 外面套一个a标签指定链接，这样就可以通过点击图片跳转页面了。

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E7%86%8A%E7%8C%AB">
        <img src="" style="height: 300px; width: 400px" alt="熊猫">
    </a>

</body>
</html>

代码：将图片去掉； 加个 alt=“熊猫”

技术图片

上图：如果图片可以正常显示，就看到alt的内容，如果图片不能正常显示，则会看到alt的内容；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E7%86%8A%E7%8C%AB">
        <img src="1.jpg" style="height: 300px; width: 400px" alt="熊猫" title="大熊猫">
    </a>

</body>
</html>

代码：增加title=“大熊猫”

技术图片

上图：当鼠标悬浮在图片上面的时候，就可以看到title的内容

  • 列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <dl>
        <dt>标题1</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
        <dt>标题2</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
    </dl>

</body>
</html>

代码：ul是无序列表； ol是有序列表； dl是层级列表。

技术图片

  • 表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </table>

</body>
</html>

技术图片

上图：table声明是个表格； 每个tr是一行； td是一列； border设置边框大小；

1-15

  • 表格表头
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

代码：
页面的表格需要定义head和body，head就是表头，body就是内容；
head中使用th来定义表头

技术图片

上图：可以看到表头与body明显不同。

  • 表格合并
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td colspan="2">第1行，第2列</td>
            <td>第1行，第3列</td>
            <td>第1行，第4列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

技术图片

上图：
我们将第一行的第二列设置colspan="2"，表示占用两列，这就起到了合并的效果；
但是最后面多出了一列，所以下面需要将第一行的最后一列给删除掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td colspan="2">第1行，第2列</td>
            <td>第1行，第3列</td>

        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

代码：colspan横向合并

技术图片

上图：这样就实现了合并的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td colspan="2">第1行，第2列</td>
            <td>第1行，第3列</td>

        </tr>
        <tr>
            <td rowspan="2">第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
        <tr>

            <td>第3行，第2列</td>
            <td>第3行，第3列</td>
            <td>第3行，第4列</td>
        </tr>
        <tr>
            <td>第4行，第1列</td>
            <td>第4行，第2列</td>
            <td>第4行，第3列</td>
            <td>第4行，第4列</td>
        </tr>
        <tr>
            <td>第5行，第1列</td>
            <td>第5行，第2列</td>
            <td>第5行，第3列</td>
            <td>第5行，第4列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

代码：rowspan竖向合并

技术图片

1-16

  • lable标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user">
</body>
</html>

代码：
label标签一般与input一起使用。
input标签生成一个输入框，可以点击后输入；如果想要点击label标签的内容也可以在input的输入框输入内容的话，需要label设置for属性，且值等于input标签的id值。

技术图片

上图：label与input没有关联时，只能点击输入框输入； 关联后点击用户名（label标签）也可以在输入框输入内容了。

  • fieldset
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>登陆</legend>
        <label for="username">用户名：</label>
        <input id="username" type="text" name="user">
        <br>
        <label for="pwd">密码：</label>
        <input id="pwd" type="text" name="pwd">
    </fieldset>

</body>
</html>

代码：
fieldset提供边框； legend边框内设置标题
fieldset这个标签很少能用到。

技术图片

9-17

标签：pre   oct   不能   col   选中   ipa   河北省   end   use   

原文地址：https://blog.51cto.com/daimalaobing/2445602
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！