学习html第二天。

最新推荐文章于 2023-03-02 20:40:05 发布

yanwuhc

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量140

点赞数

分类专栏：自学 html 文章标签： html web

本文链接：https://blog.csdn.net/weixin_44303404/article/details/106358236

版权

自学同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

这是第二天学习html，感觉把基础的html只是学完了，就是有点乱，回头要好好整理一下，再看一看笔记。继续加油！

整理的笔记如下：

1.input标签表示文本框，只能单行输入。

<input type="text">

备注：如果要输入多行，用textarea标签。
用size属性定义文本框的大小，用value属性定义初始值。
注意：input标签没有width属性。

用placeholder属性设置背景（灰色字体）

<input type="text" placeholder="对方正在输入...">

综合上面：

<html>
    <head>
        <meta charset="UTF-8">
        <title>文本框</title>
    </head>
    <body>
        <ol>
            <li>这是一个普通的文本框</li>
            <input type="text">
            <li>这是一个长度为100的文本框</li>
            <input type="text" size="100">
            <li>这是一个有初始值的文本框</li>
            <input type="text" value="初始值">
            <li>这是一个有背景的文本框</li>
            <input type="text" placeholder="请在这里键入内容">
        </ol>
    </body>
</html>

2.<input type="password"> 即表示密码框。输入显示星号。

3.<form>标签用于向服务器提交数据，比如账号密码。
（1）action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去。

<form action="https://how2j.cn/study/login.jsp">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
    <input type="submit" value="登陆">
</form>

（2）使用method=“get” 提交数据是常用的提交数据的方式，如果form元素没有提供method属性，默认就是get方式提交数据。
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到。

<form method="get" action="https://how2j.cn/study/login.jsp">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
    <input type="submit" value="登陆">
</form>

（3）使用method=“post” 也可以提交数据，post不会在地址栏显示提交的参数。如果要提交二进制数据，比如上传文件，必须采用post方式。

<form method="post" action="https://how2j.cn/study/login.jsp">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
    <input type="submit" value="登陆">
</form>

（3）get和post的区别
get
是form默认的提交方式；
如果通过一个超链访问某个地址，是get方式；
如果在地址栏直接输入某个地址，是get方式；
提交数据会在浏览器显示出来；
不可以用于提交二进制数据，比如上传文件。
post
必须在form上通过 method=“post” 显示指定；
提交数据不会在浏览器显示出来；
可以用于提交二进制数据，比如上传文件。

4.<input type="radio" > 表示单选框

单选1 <input type="radio" >
单选2 <input type="radio" >

checked属性填写checked默认选中。

默认选中这个选项<input type="radio" checked="checked">

设置name属性相同可以设置一个分组多个选项中选一个。

<p>多选一测试</p>

选项一<input type="radio" name="test" value="选项一"><br>
选项二<input type="radio" name="test" value="选项二"><br>
选项三<input type="radio" name="test" value="选项三"><br>
选项四<input type="radio" name="test" value="选项四"><br>
<br>
<br>
选项五<input type="radio" name="othertest" value="选项五">

选项一到四多选一，选项五单选。

备注：name是用来标识这个单选框的，用于识别这一块，后面处理数剧时，就是靠name来找它。 name 和 value 可以理解成，变量名和变量值，例如 a=10；
value是表单用来提交数据的，在后面页面处理时，要获取前面页面提交过来的内容，用的是request name属性，得到的值就是他的value。
name是控件的名称，而value是控件的值。

6.<input type="checkbox"> 即表示复选框。
要求每次最多选两个，用js。

<p>复选框</p>

选项一<input type="checkbox" name="test" value="选项一"><br>
选项二<input type="checkbox" name="test" value="选项二"><br>
选项三<input type="checkbox" name="test" value="选项三"><br>
选项四<input type="checkbox" name="test" value="选项四"><br>

同样也有name和value属性。

7.<select> 即下拉列表，需要配合<option>使用。

<p>你的年级是</p>
<select>
    <option>大一</option>
    <option>大二</option>
    <option>大三</option>
    <option>大四</option>
</select>

select有size属性，可以设置下拉列表高度。

<p>你的年级是</p>

<select size="2">
    <option>大一</option>
    <option>大二</option>
    <option>大三</option>
    <option>大四</option>
</select>

multiple属性可以多选，使用ctrl或者shift进行多选。

<p>你的年级是</p>

<select multiple="multiple">
    <option>大一</option>
    <option>大二</option>
    <option>大三</option>
    <option>大四</option>
</select>

如果不设置size，默认为最大高度。

option里面设置selected属性也可以默认选中。

<p>你的年级是</p>

<select multiple="multiple">
    <option>大一</option>
    <option selected="selected">大二</option>
    <option>大三</option>
    <option>大四</option>
</select>

style属性可以设置下拉列表的宽度。

<select style="width: 100px;">

8.<textarea> 即文本域。
与文本框不同的是，文本域可以有多行，并且可以有滚动条。
用cols和row设置宽度和行数。

<textarea name="name" id="" cols="30" rows="10"></textarea>

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

textare标签里面的内容自动换行。和p标签不一样。

9.<input type="button"> 即普通按钮，不具备提交form的效果。
下面是一个跳转到百度网页的按钮。

<a href="https://wwww.baidu.com">
    <input type="button" value="跳转到百度">
</a>

普通按钮不具备form提交效果。

普通按钮不能提交
<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="button" value="登陆">
</form>

（前面的实例是用submit。）

另外：
<button type=\"submit\"></button> 和 <input type=\"submit\"/>用法相同，用作表单数据提交按钮，默认即会刷新页面；
<button type=\"button\"></button> 和 <input type=\"button\"/>的用法是一样的，均为普通按钮，默认情况不会刷新页面。

10.<input type="submit"> 即为提交按钮,用于提交form，把数据提交到服务端。

<form action="/study/login.jsp" method="get">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
    <input type="submit" value="登陆">
</form>

11.<input type="reset"> 重置按钮可以把输入框的改动复原。

<form>
    账号：<input type="text"><br>
    密码：<input type="text"><br>
    <input type="reset" value="重置">
</form>

注意：reset按钮需要在form中使用。

12.<input type="image" > 即使用图像作为按钮进行form的提交。

<form action="/study/login.jsp">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
    <input type="image" src="https://how2j.cn/example.gif">
</form>

备注：这里用到了服务端技术JSP。

13.<button></button>即按钮标签。与<input type="button">不同的是，<button>标签功能更为丰富：按钮标签里的内容可以是文字也可以是图像。
如果button的type=“submit” ，那么它就具备提交form的功能。

<button>按钮</button>

<button><img src="https://how2j.cn/example.gif"/></button>

<a href="https://www.baidu.com"><button>跳转到百度</button></a>

设置type=“submit”，IE下button的type的默认值为button不具备提交功能，其他浏览器type的默认值是submit。
重置也是一样的道理。

<form action="/study/login.jsp">
    账号：<input type="text" name="name"> <br/>
    密码：<input type="password" name="password" > <br/>
     
    <button type="submit">登陆</button>
    <button type="reset">重置</button>
</form>

从上面看，这里是等效的。

<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<!-- 等效于： -->
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>