前端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. windows下apache + mod_wsgi + python部署flask接口服务

    windows下apache + mod_wsgi + python部署flask接口服务 用python3安装虚拟环境 为啥要装虚拟环境? 原因1:安装虚拟环境是为了使项目的环境和全局环境隔离开,在 ...

  2. destoon搜索伪静态失败解决办法

    今天给一个朋友调试DT6.0内核的站点,搜索中文出现http 403 forbidden,找了半天,很纳闷,最后一个一个查看源代码总算找到,在此分享给大家! 解决的方法: 1.找到include/sa ...

  3. MySQL 的各种 join

    table th:first-of-type { width: 200px; } join 类型 备注 left [outer] join right [outer] join union [all ...

  4. swiper使用总结-坑点汇总

    1.开发中遇到个坑,ScrollableTabView(选项卡)+swiper(轮播图)在安卓下,初始化的第一页不会渲染,需要在ScrollableTabView挂载完毕后再渲染swiper. 解决方 ...

  5. MacOS下IDEA设置智能提示不区分大小写

    本文只针对,IDEA-2019.2.3版本 目录地址: Edit -> General -> Code Completion -> Match case -> 勾选去掉 截图如 ...

  6. Java多态中成员的调用的特殊情况

    1.当子类和父类中有相同的成员属性的时候 public class Demo { public static void main(String[] args) { Father son=new Son ...

  7. BILIBILI之滑块验证

    bilibili的滑动验证码图片比较好玩,和前一篇不大一样. 采用canvas方法,分析发现只找到一个图片,不过,可以通过设置display截图方式获得2张图(完整图片,带缺口的图片),取得图片后接下 ...

  8. 【border树】【P2375】动物园

    Description 给定一个字符串 \(S\),对每个前缀求长度不超过该前缀一半的公共前后缀个数. 共有 \(T\) 组数据,每组数据的输出是 \(O(1)\) 的. Limitations \( ...

  9. Java 抽象类 抽象方法 接口

    #抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化 ...

  10. 2018-2019-2 20165315《网络对抗技术》Exp7 网络欺诈防范

    2018-2019-2 20165315<网络对抗技术>Exp7 网络欺诈防范 一.实验内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 简单应 ...