前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

一丶HTML块级标签

排版标签

p 标签: 段落标签,会自动在段落上下加上空白来分开
p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签 div 标签: 没有样式的标签 ,最常用

列表

​      1.无序列表 常用

      2.有序列表

      3.标题列表

# 无序列表  circle:空心圆, disc:默认实心圆,square:实心方片
<ul type='circle'>
<li>1</li>
<li>2</li>
</ul> <ul type='square'>
<li>1</li>
<li>2</li>
</ul> <ul>
<li>1</li>
<li>2</li>
</ul>
# 有序列表 ol ,type:阿拉伯数字和英文字母. start :从第几个开始
<ol type='1' start='2'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
# 标题列表
<dl>
<dt>标题</dt> <!-- dt 表示标题 -->
<dd>1</dd> <!-- dd 内容 -->
<dd>2</dd>
<dd>3</dd>
</dl>

表格

table 表格:
thead :表头
tr: 一行
th: 一列 , 加粗的单元格。相当于<td> + <b>
<caption>:表格的标题。使用时和tr标签并列
tbody: 表身
tr:一行
td:一列
表格属性:
width : 宽度
height: 高度
bordercolor: 边框颜色
border : 边框
align :表格的水平对齐方式
bgcolor : 背景颜色
background : 背景图片
cellspacing :单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0
cellpadding :单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。注意:注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性dir="rtl",那就指的是内容到右边那条线的距离。 合并单元格:
colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上 tr属性:
dir:公有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left)
bgcolor:设置这一行的单元格的背景色。
height:一行的高度
align="center":一行的内容水平居中显示,取值:left、center、right
valign="center":一行的内容垂直居中,取值:top、middle、bottom td属性:
align:内容的横向对齐方式。属性值可以填:left right center。
valign:内容的纵向对齐方式。属性值可以填:top middle bottom
width:绝对值或者相对值(%)
height:单元格的高度
bgcolor:设置这个单元格的背景色。
background:设置这个单元格的背景图片。

      具体代码如下:

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)的更多相关文章

  1. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

  2. 前端开发-4-HTML-table&form&表单控制 标签

    1.table标签 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=" ...

  3. [oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)

    1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...

  4. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  5. 关于form表单排版的技巧

    //此处说明一个对于排版表单的方法将form表单嵌套在table里,因为table是格式化的,所以就不用再手动排版了源码如下 <from action="" method=& ...

  6. [原创]java WEB学习笔记62:Struts2学习之路--表单标签:form,表单标签的属性,textfield, password, hidden,submit ,textarea ,checkbox ,list, listKey 和 listValue 属性,select ,optiongroup ,checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

  8. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  9. 前端form表单与css

    form表单(******) 能够获取用户输入(输入,选择,上传的文件) 并且将用户输入的内容全部发送给后端 参数 action 控制数据提交的地址 三种书写方式 1.不写 默认就是朝当前这个页面所在 ...

随机推荐

  1. Android程序员事件分发机制学习笔记

    通过问题来学习一个东西是很好的方法.学习Android中View的事件体系,我也通过给自己提问题,在解决问题的同时也就知道了其中原理. 首先来几个问题起步: 什么是事件?什么是事件分发机制? 在我们通 ...

  2. 在centos下安装pycrypto报错

    yum -y install python36-devel libevent-devel libjpeg-devel zlib-devel

  3. 《always run团队》第六次作业:团队项目系统设计改进与详细设计

    项目 内容 这个作业属于哪个课程 老师链接 这个作业的要求在哪里 作业链接地址 团队名称 always run 作业学习目标 掌握面向对象软件设计方法:(2)完善系统设计说明书,掌握面向对象详细设计内 ...

  4. 08-numpy-笔记-sum

    求和: axis = 0 按列求和 axis = 1 按行求和 >>> import numpy as np >>> a = np.mat([[1,2,3],[4, ...

  5. Sublime Text2中的快捷方式及html各种标签(待完善)

    快捷方式 1.xhtml+tab 2.自动补全标签 Alt + .  补全标签 标签 1.<p>段落标签 ,前后换行 <h1.2.3.4.5>标题标签 h1最大,一级标题 2. ...

  6. Python进阶-II 参数陷阱、命名空间、嵌套、作用域、闭包

    一.参数陷阱 在使用默认参数时,可能碰见下列情况 def show_args_trap(i, li = []): li.append(100) li[i] = 101 print(li) show_a ...

  7. 使用面向对象思想封装js(附实例)

    平时在写js时应该用面向对象思想将每一组功能封装成一个模块,可实现模块间的高内聚低耦合.重用.结构清晰........... 如果页面中逻辑复杂.功能多,不使用模块封装是不可想象的,维护起来非常复杂. ...

  8. #51nod上topcoder练习记

    好久没刷51nod了,又听说topcoder有很多好题.那么就来51nod上刷吧.(那个客户端搞得有点烦(看不懂)) [1366 贫富差距] 当图不连通的时候,答案为无穷大. 当图连通时,两个点之间的 ...

  9. Python面向对象 | 类属性

    property property是一个装饰器函数,可以将一个方法伪装成属性,调用的时候可以不用加().@property被装饰的方法,是不能传参数的,因为它伪装成属性了. 装饰器的使用:在要装饰的函 ...

  10. 使用Java将搜狗词库文件(文件后缀为.scel)转为.txt文件

    要做一个根据词库进行筛选主要词汇的功能,去搜狗下载专业词汇词库时,发现是.scel文件,且通过转换工具(http://tools.bugscaner.com/sceltotxt/)转换为txt时报错如 ...