一、列表

(1)、无序列表<ul>

<body>
<ul type="disc">
<li>属性一</li>
<li>属性二</li>
</ul>
</body>

上述type属性:

disc(实心圆心,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)

(2)、有序列表<ol>

<body>
<ol type="1" start="1">
<li>第一项</li>
<li>第二项</li>
</ol>
</body>

  上述type属性

1 数字列表,默认值
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马

(3)、标题列表 <dt>为标题 <dd>为标题内容

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

二、表格

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
表格的基本结构:

<body>
<!--给表格加了表框-->
<table border=" 5">
<!--end-->
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
</tr>
<tr>
<td>jassin</td>
<td>21</td>
<td>男</td>
<td>play</td>
</tr>
</table>
</body>

属性:
border : 表格边框
cellpadding:内边距
cellspacing:外边距
width:像素百分比(最好通过css来设置长宽)
rowspan:单元格竖跨多少行
colspan:单元格横跨多少行(即合并单元格)

三、表单(form)

  表单工作原理:访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。主要包含两个属性分别为:a. action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理。b. method:表单的提交方式 post/get默认取值就是get。

  表单标签包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。以及textarea、select、fieldset和 label标签,分别介绍如下

功能:

表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

(1)<input>系列标签(内联标签)

input标签如果是要提交给后端的数据,一定要加上enctype="multipart/form-data"  method必须是post

<1.> 表单类型

type:    text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用。)button 和 submit 的区别????
file 提交文件:form表单需要加上属性enctype="multipart/form-data" (记住)
上交文件注意两点:请求方式必须是:post;enctype="multipart/form-data"
 <> 表单属性

 name:    表单提交项的键.

           注意和id属性的区别:name属性是和服务器通信时使用的名称;
而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,
        而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型,value 属性的用法也不同: type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.

 

 text、password、submit类型实例:

下图from应为form

  checkbox与radio实例:

  file 、reset 、button实例:

(2)select系列

  具体实例如下:

属性说明:

  • multiple:布尔属性,设置后为多选,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

(3)<textarea>多行文本框

(个性签名 、简介)

<textarea name="memo" id="memo" cols="" rows="">
默认内容
</textarea>

属性说明:

  • name:名称
  • rows:行数
  • cols:列数
  • disabled:禁用

(4)<lable>标签

定义:<label> 标签为 input 元素定义标注(标记)。说明:1 label 元素不会向用户呈现任何特殊效果。2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

(5)分组下拉框

前端之HTML补充的更多相关文章

  1. 前端 ---jQuery的补充

    15-jQuery补充   jquery内容补充 jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryu ...

  2. web前端----Bootstrap框架补充

    一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等- 响应式怎 ...

  3. Web前端——JavaScript扩展补充

    JS补充 document也是windows的一个子对象 a标签点击事件 要想设置点击a标签,执行某种方法,推荐在a标签的herf属性使用JavaScript伪协议,实现点击之后执行的js方法,而不是 ...

  4. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

  5. 前端之JavaScript 补充

    1. BOM window location.href = "https://www.sogo.com" location.reload() // 重新加载当前页 location ...

  6. Web前端/后端

       Web前端:         1)精通HTML,能够书写语义合理,结构清晰,易维护的HTML结构.         2)精通CSS,能够还原视觉设计,并兼容业界承认的主流浏览器.         ...

  7. JavaScript资源分享

    一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...

  8. 以ZMQ为基础的通信模型

    最近使用了一下ZMQ的java版本,先不评述其它,网上已经有很多内容了. 我通过ZMQ的模式,在MsgClient,MsgServer中封装了基础ZMQ的使用.以此扩展了使用模型: 主要是基于2类分布 ...

  9. Django之stark组件2

    action批量处理功能 用户可以自定义批量处理功能,但是默认的有批量删除功能. ***思路*** 1,定义一个列表用来装action的类名并extend用户自定义列表 2.循环该列表获取到函数名(用 ...

随机推荐

  1. CNN学习笔记:卷积运算

    CNN学习笔记:卷积运算 边缘检测 卷积 卷积是一种有效提取图片特征的方法.一般用一个正方形卷积核,遍历图片上的每一个像素点.图片与卷积核重合区域内相对应的每一个像素值乘卷积核 .内相对应点的权重,然 ...

  2. 发送邮件——stamplib

    配置文email.ini件信息: [email]sender=xxxxxxxxxxxpwd=xxxxxxxxxxxxreciver=xxxxxxxxxxxxxpython 3.x代码如下: impor ...

  3. Keepalived 服务器状态监测

    keepalived简介: keepalived是一个类似于layer3, 4 & 5交换机制的软件,也就是我们平时说的第3层.第4层和第5层交换.Keepalived的作用是检测web服务器 ...

  4. SqlHelper简单实现(通过Expression和反射)2.特性和实体设计

    对于需求中的不要暴露DataTable或DataSet,我想到了设计中常用的对象:实体(Entity),通过实体将数据库中的字段封装成类,这样做不仅使代码更有可读性,维护起来也很方便.同时我自定义了一 ...

  5. Oracle数据安全(四)j角色管理

    一.角色管理的概述 1.角色的概念 为了简化数据库权限的管理,在Oracle数据库中引入了角色的概念.所谓的角色就是一系列相关权限的集合. 2.角色的特点 在数据库中,角色的名称必须是唯一的,不能与用 ...

  6. ubuntu开启ROOT用户自动登录教程

    ub默认不开root很纠结,虽说是为了安全,但对于linux老鸟,老是sudo烦的很 开root方法: sudo passwd root 输入root密码 sudo gedit /etc/gdm/cu ...

  7. pt-osc测试

    pt-osc测试 1.原表必须存在主键 PRIMARY KEY 或者 UNIQUE KEY The new table `darren`.`_t_user_new` does not have a P ...

  8. JDK1.8之Stream

    为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...

  9. jQuery个人名片焦点图

    在线演示 本地下载

  10. C语言中 ln(以自然对数e为底) lg(以十为底) 以及logab(以a为底,b为真数)的相关知识

    总所周知,我们在高中学过对数函数,记作y=logax.下面是百度百科关于对数函数的描述: 对数的定义:一般地,如果ax=N(a>0,且a≠1),那么数x叫做以a为底N的对数,记作x=logaN, ...