dengz

前端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:设置这个单元格的背景图片。

      具体代码如下:

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-06-21
  • 2021-07-04
  • 2022-12-23
  • 2021-12-06
  • 2022-12-23
  • 2021-05-26
  • 2021-07-21
猜你喜欢
  • 2022-12-23
  • 2022-02-05
  • 2021-12-20
  • 2021-11-24
  • 2022-12-23
  • 2022-12-23
  • 2021-04-05
相关资源
相似解决方案