HTML大总结(四)

简介: HTML大总结(四)

11.列表标签


列表容器里面装载着结构,样式一致的文字或图表的一种形式叫列表。列表最大的特点就是整齐 、整洁、 有序,跟表格类似,但是它可组合自由度会更高。一般网站的底部链接部分就是用列表标签制作。

  • 无序列表:<ul>
  • 有序列表:<ol>
  • 自定义列表:<dl>image.png
<ul>
         <ul>hahaha</ul>
         <ul>hahaha</ul>
     </ul>
     <ol>
         <ul>xixixi</ul>
         <ul>xixixi</ul>
     </ol>
     <dl>
         <dt>关注我们</dt>
         <dd>新浪微博</dd>
         <dd>联系我们</dd>
     </dl>


代码效果:


image.png


12.表单标签


一个完整的表单通常由表单域,表单控件(表单元素)和提示信息这3部分组成,表单目的是为了收集用户信息。


image.png


如图世纪佳缘网站中注册界面中就存在表单,该表单目的是为了收集用户信息。


表单域


  • 表单域是一个包含表单元素的区域
  • <form></from>标签用于定义表单域,会把它范围内的表单元素信息提交给服务器


image.png


<form action="url地址" method="提交方式" name="表单域的名称">    
 </form>


GET 和 POST 的区别(后面学 ajax 后台交互的时候用得到)


  • GET在浏览器回退时是无害的,而POST会再次提交请求。
  • GET请求会被浏览器主动cache,而POST不会,除非手动设置。
  • GET请求只能进行url编码,而POST支持多种编码方式。
  • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
  • GET请求大小一般是(1024字节),http协议并没有限制,而与服务器,操作系统有关,POST理论上来说没有大小限制,http协议规范也没有进行大小限制,但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
  • 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
  • GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。


表单控件(表单元素)


表单元素三大组:input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素


input输入表单元素


  • input是个单标签,type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等),type属性的属性值及描述如下:


image.png


  • 除 type 属性外,<input> 标签还有很多其他很多属性,其常用属性如下:


image.png


  • name 和 value 是每个表单元素都有的属性值,主要给后端人员使用。
  • name 是表单元素的名字,要求单选框和复选框要有相同的name值。
  • checked 属性主要针对于单选框和复选框,主要作用是一打开页面,就可以默认选中某个表单元素。


1、文本框与密码框


  • type 属性设置为 text 是文本框
  • type 属性设置为 password 是密码框
<body>
    <form>
        用户名:<input type="text"> <br/> 
        密码:<input type="password">
    </form>
</body>


2、单选框和复选框


  • type 属性设置为 radio 是单选框
  • type 属性设置为 checkbox 是复选框
  • name 是表单元素的名字,要求 单选框和复选框要有相同的name值
<form>
        用户名:<input type="text"> <br> 
        密码:<input type="password"> <br> 
        <!-- radio是单选框,可以多选一 -->
        性别:男<input type="radio"> 女 <input type="radio">
        <!-- checkbox是多选框,可以多选 -->
        爱好:吃饭<input type="checkbox">  睡觉<input type="checkbox">   打游戏<input type="checkbox"> 
</form>


3、name和value属性


  • name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单,name的主要作用就是用于区别不同的表单。
<form>
        用户名:<input type="text" value="请输入用户名"> <br> 
        密码:<input type="password"> <br> 
        <!-- radio是单选框,可以多选一 -->
        <!-- name是表单元素的名字,这里的性别单选按钮必须有相同的名字name,才能实现多选一 -->
        性别:男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多选框,可以多选 -->
        爱好:吃饭<input type="checkbox" name="habby" value="吃饭">  睡觉<input type="checkbox" name="habby" value="睡觉">   打游戏<input type="checkbox" name="habby" value="打游戏"> 
</form>


4、checked和maxlength


  • 单选按钮和复选框可以设置checked 属性
  • 当页面打开时候就可以默认选中这个按钮
  • 单选框只能给其中一个加checked,复选框可以多加
性别:男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">


5、submit和reset


  • type 属性设置为submit:提交按钮会把表单数据发送到服务器
  • ``type` 属性设置为reset:重置按钮会清除表单中的所有数据


6、button和文件域


  • type 属性设置为button:是一个按钮
  • type 属性设置为file:是一个文件域,可以上传文件
<input type="button" value="获取短信验证码"> <br>
    <!-- 文件域:上传文件使用的 -->
    上传头像:<input type="file">


7、label


  • label标签用于绑定一个表单元素,当点击标签内的文本时,浏览器就会自动将焦点(光标)转到表单元素上,用来增加用户体验
  • label标签的 for属性 应当与相关元素的id 属性相同
<label for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex" />


select下拉表单元素


  • 下拉表单元素
  • <select>中至少包含一对<option>
  • <option>中定义 selected="selected" 时,当前项即为默认选中项。
<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
       ...
</select>


textarea文本域元素


  • 用于定义多行文本输入的控件
<textarea>
    文本内容
</textarea>
  • cols = “每行中的字符数”, rows = “显示的函数”,我们在实际开发中不会使用,都是用CSS来改变大小


相关文章
|
移动开发 HTML5
|
29天前
|
存储 移动开发 UED
HTML5 1
HTML5 是对传统 HTML 的重大升级,引入了新元素和属性,全面支持 CSS3,并增强了多媒体功能(Video 和 Audio)、图形处理(2D/3D 制图)、本地存储和应用开发能力。它简化了视频和音频的嵌入,提供了强大的图形绘制工具(如 &lt;canvas&gt; 和 SVG),并优化了 Web 应用的性能和用户体验。此外,HTML5 还引入了多种新的 CSS3 特性,如动画、转换和阴影效果等。
|
6月前
|
移动开发 前端开发 搜索推荐
|
5月前
HTML4(二)(下)
HTML4(二)(下)
26 0
|
7月前
|
前端开发 Python
初识HTML
本文介绍了HTML的基本概念和使用方法。
|
前端开发
HTML
HTML
155 0
HTML
|
移动开发 搜索推荐 HTML5
|
前端开发
你可能不知道的HTML小技巧(下)
今天来分享一些HTML小技巧~
109 0

相关实验场景

更多