9-17

时间 2020-02-02

原文原文链接

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相似，也是个白板标签，不过它属于块级标签html

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}。这样服务端就知道提交的每一个信息都是分别作什么用的。web

上图：输入框是咱们要提交的信息。点击登陆1按钮没有任何反应，由于button自己默认是没有任何功能做用的。须要点击登陆2（submit）来提交。浏览器

上图：信息以提交，经过地址栏能够看到，提交的信息拼接到了链接的后面。ide

<!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"ui

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

1-11

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

<!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的信息提交给服务端code

上2图：这里看到经过本身的web代码实现了内容搜索orm

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'，效果是单选项htm

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

<!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

<!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这个标签不多能用到。