当前位置: 开发笔记 > 前端 > 正文

2016.3.8__HTML基础_第二天

作者：oyy8610406 | 来源：互联网 | 2023-05-18 16:07

HTML基础如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。0.今日课程预览1.块属性标签和行属性标签1.1块属性标签和行属性标签的特征块属性标签全部都独占一行

HTML 基础

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

0.今日课程预览

单元格
单元格
单元格
单元格

单元格
单元格
单元格
单元格

单元格
单元格
单元格
单元格

单元格
单元格
单元格
单元格

单元格
单元格

单元格
单元格
单元格
单元格

单元格
单元格
单元格
单元格

3 表单的使用

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（）定义。

3.1 输入

多数情况下被用到的表单标签是输入标签（）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

3.1.1 文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。


First name: 



Last name:

First name:
Last name:

注意，表单本身并不可见。

同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

3.1.2 单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。


 Male


 Female

Male
Female

注意，只能从中选取其一。

3.1.3 复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。



I have a bike



I have a car

I have a bike
I have a car

3.1.4 表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。

表单的动作属性定义了目的文件的文件名。

由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。


Username:

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp” 的页面。

该页面将显示出输入的结果。

3.1.5 属性列表

标签描述

定义供用户输入的表单

定义输入域

</code></td> 
    <td align="left">定义文本域 (一个多行的输入控件)</td>
   </tr>
   <tr> 
    <td align="left"><code><label></code></td> 
    <td align="left">定义一个控制的标签</td>
   </tr>
   <tr> 
    <td align="left"><code><fieldset></code></td> 
    <td align="left">定义域</td>
   </tr>
   <tr> 
    <td align="left"><code><legend></code></td> 
    <td align="left">定义域的标题</td>
   </tr>
   <tr> 
    <td align="left"><code><select></code></td> 
    <td align="left">定义一个选择列表</td>
   </tr>
   <tr> 
    <td align="left"><code><optgroup></code></td> 
    <td align="left">定义选项组</td>
   </tr>
   <tr> 
    <td align="left"><code><option></code></td> 
    <td align="left">定义下拉列表中的选项</td>
   </tr>
   <tr> 
    <td align="left"><code><button></code></td> 
    <td align="left">定义一个按钮</td>
   </tr>
  </tbody>
 </table><h5 id="316-input-style">3.1.6 input Style</h5>
 <table>
  <thead>
   <tr> 
    <th align="left">元素标签</th> 
    <th align="left">解释</th>
   </tr>
  </thead>
  <tbody>
   <tr> 
    <td align="left">button</td> 
    <td align="left">按钮</td>
   </tr>
   <tr> 
    <td align="left">checkbox</td> 
    <td align="left">复选</td>
   </tr>
   <tr> 
    <td align="left">file</td> 
    <td align="left">选取文件</td>
   </tr>
   <tr> 
    <td align="left">hidden</td> 
    <td align="left">隐藏</td>
   </tr>
   <tr> 
    <td align="left">image</td> 
    <td align="left">图片</td>
   </tr>
   <tr> 
    <td align="left">password</td> 
    <td align="left">密文输入</td>
   </tr>
   <tr> 
    <td align="left">radio</td> 
    <td align="left">单选</td>
   </tr>
   <tr> 
    <td align="left">reset</td> 
    <td align="left"></td>
   </tr>
   <tr> 
    <td align="left">submit</td> 
    <td align="left"></td>
   </tr>
   <tr> 
    <td align="left">text</td> 
    <td align="left"></td>
   </tr>
  </tbody>
 </table><h4 id="32-表单练习">3.2 表单练习</h4><pre><code><br><br><br>    <br>    <br><br><br>    <br>    <br>    <br>        用户名：<input type="text" name="u"><br><br>        密码：<input type="password" name="p"><br>        <hr><br>        性别：<select name="sex" id=""><br>            <option value="0">男</option><br>            <option value="1">女</option><br>            <option value="2">其他</option><br>        </select><br>        <hr><br>        最高学历：<br>        <input name="xueli" type="radio" value="0">初中<br>        <input name="xueli" type="radio" value="1">高中<br>        <input name="xueli" type="radio" value="2">专科<br>        <input name="xueli" type="radio" value="3">本科<br>        <hr><br>        爱好：<br><br>        <input type="checkbox" name="love[]" value="0">男<br>        <input type="checkbox" name="love[]" value="1">女<br>        <input type="checkbox" name="love[]" value="2">人妖<br>        <hr><br>        留言：<textarea name="liuyan">我是默认的内容
        

        上传文件：

4 Post 和 Get 的区别

**1.**GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），

以?分割URL和传输数据，参数之间以&相连，如：

如果数据是英文字母/数字，原样发送，如果是空格，转换为+，

如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。

POST把提交的数据则放置在是HTTP包的包体中。
　　

2.”GET方式提交的数据最多只能是1024字节，理论上POST没有限制，

可传较大量的数据，IIS4中最大为80KB，IIS5中为100KB”？？！

　　以上这句是我从其他文章转过来的，其实这样说是错误的，不准确的：
　　
　　(1).首先是”GET方式提交的数据最多只能是1024字节”，因为GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了。
　　
　　而实际上，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制。
　　
　　这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。
　　
　　对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
　　
　　注意这是限制是整个URL长度，而不仅仅是你的参数值数据长度。[见参考资料5]
　　
　　(2).理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，
　　
　　说“POST数据量存在80K/100K的大小限制”是不准确的，POST数据是没有限制的，
　　
　　起限制作用的是服务器的处理程序的处理能力。
　　
　　
3.在ASP中，服务端获取GET请求参数用Request.QueryString，

获取POST请求参数用Request.Form。

在JSP中，用request.getParameter(\”XXXX\”)来获取，

虽然jsp中也有request.getQueryString()方法，但使用起来比较麻烦，

比如：传一个test.jsp?name=hyddd&password=hyddd，

用request.getQueryString()得到的是：name=hyddd&password=hyddd。

在PHP中，可以用GET和_POST分别获取GET和POST中的数据，

而REQUEST则可以获取GET和POST两种请求中的数据。

值得注意的是，JSP中使用request和PHP中使用_REQUEST都会有隐患。

**4.**POST的安全性要比GET的安全性高。

注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。

上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，

比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存。

(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，

除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。

总结一下，Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，

在FORM（表单）中，Method默认为”GET”，实质上，GET和POST只是发送机制不同，

并不是一个取一个发！

练习：创建第一个百度界面

这里写图片描述

html

推荐阅读

html
Monkey《大话移动——Android与iOS应用测试指南》的预购信息发布啦！

Monkey《大话移动——Android与iOS应用测试指南》的预购信息已经发布，可以在京东和当当网进行预购。感谢几位大牛给出的书评，并呼吁大家的支持。明天京东的链接也将发布。 ... [详细]

蜡笔小新 2023-12-14 18:57:09
html
CentOS7.0 U盘刻录工具使用方法详解

本文介绍了使用CentOS7.0 U盘刻录工具进行安装的详细步骤，包括使用USBWriter工具刻录ISO文件到USB驱动器、格式化USB磁盘、设置启动顺序等。通过本文的指导，用户可以轻松地使用U盘安装CentOS7.0操作系统。 ... [详细]

蜡笔小新 2023-12-14 18:55:14
html
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
view
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
view
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
view
电销机器人代理需要注意哪些问题？创业者小心这些骗局

电销机器人作为一种人工智能技术载体，可以帮助企业提升电销效率并节省人工成本。然而，电销机器人市场缺乏统一的市场准入标准，产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质，尤其要关注语音识别率。 ... [详细]

蜡笔小新 2023-12-14 16:31:48
button
【译】发送表单数据

这是原文链接：sendingformdata许多情况下，我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单，但是 ... [详细]

蜡笔小新 2023-12-14 16:19:10
button
如何去除Win7快捷方式的箭头

本文介绍了如何去除Win7快捷方式的箭头的方法，通过生成一个透明的ico图标并将其命名为Empty.ico，将图标复制到windows目录下，并导入注册表，即可去除箭头。这样做可以改善默认快捷方式的外观，提升桌面整洁度。 ... [详细]

蜡笔小新 2023-12-14 16:17:05
js
AJAX的POST请求及实现数据修改功能的方法

本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术，可以实现在输入某个id后，通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用，以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况，并解释了JavaScript等待服务器响应的机制。 ... [详细]

蜡笔小新 2023-12-14 16:12:01
js
数据库的存储结构及其重要性

本文介绍了数据库的存储结构及其重要性，强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离，可以实现对物理存储的重新组织和数据库的迁移，而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构，并介绍了表空间的概念和作用。 ... [详细]

蜡笔小新 2023-12-14 16:00:02
css
Java实战之电影在线观看系统的实现

本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]

蜡笔小新 2023-12-14 15:52:03
js
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
base64
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
base64
90后程序员的职业发展之路：从年薪3w到30w的经验分享

本文是一位90后程序员分享的职业发展经验，从年薪3w到30w的薪资增长过程。文章回顾了自己的青春时光，包括与朋友一起玩DOTA的回忆，并附上了一段纪念DOTA青春的视频链接。作者还提到了一些与程序员相关的名词和团队，如Pis、蛛丝马迹、B神、LGD、EHOME等。通过分享自己的经验，作者希望能够给其他程序员提供一些职业发展的思路和启示。 ... [详细]

蜡笔小新 2023-12-14 15:22:09
view
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18