列表、表格、表单 笔记分享

列表、表格、表单

1.掌握背景样式的使用

• 背景颜色：background-color

  颜色可选的值：red、green……、十六进制的值（#FFFFFF 简写为#FFF）、RGB形式（255，43，55）、RGBA（234，43，346，0~1之间）

• 背景图片：background-image

  background-image：url(“图片地址”);

• 背景重复方式：background-repeat

  • repeat：x轴和y轴平铺
  • no-repeat：不平铺 只显示一个
  • repeat-x：x轴平铺
  • repeat-y：y轴平铺

• 背景位置：background-position

  • 水平方向的关键词：left、center、right

  • 垂直方向的关键词：top、center、bottom

  • Xpos Upos：单位px 例如 20px 25px

  • X% Y%

• background：背景颜色 url(背景图像) 背景定位 背景不重复显示

2.掌握H5的补充标签

2.1列表的使用

• 无序列表（常用）

  ul标签内不要去写其他的标签 只写li即可 如果非要写其他标签 请在li中编写

  <ul>
  	<li></li>
      <li></li>
  </ul>
  

  • list-style:none; 去除小黑点
  • list-style:square; 小黑方块
  • list-style: decimal; 数字序号
  • list-style: circle; 空心圆点

• 有序列表

  <ol>
  	<li></li>
      <li></li>
  </ol>
  

• 定义列表（第二常用）

  <dl>
  	<dt>列表项标题</dt>
      <dd>列表项内容描述</dd>
  </dl>
  

2.2表格的使用

<table>
    <tr>
        <th></th> 表头
    </tr>
    <tr>
        <td></td> 内容
</table>

属性：

<table border="1">边框 一般都写1

<table cellspacing="">单元格间距

<table cellpadding="">单元格边距

合并单元格：

• 跨列合并

  首先找到需要合并的单元格
  选择一个要留下来的单元格 给其设置属性colspan
  将值设置为要合并的单元格数量
  删除无用的单元格

• 跨行合并

  找到要合并的单元格
  选择一个要留下的单元格 并添加属性rowspan
  将属性值设置为要合并的单元格数量
  删除无用的单元格

2.3表单的使用

表单：用于填写信息，收集信息的一种格式。

常见的有：输入框、下拉框、单选按钮、复选框等等 这些都是表单元素

<form action="" method="">
    <input type="text" name="" value="" size="" maxlength="" checked/>   
</form>

action：表单数据提交的地址

method：请求方式，支持两种比较常用的请求方式 GET（默认） POST

• 文本输入框

  <input type="text" name="" />

• 密码输入框

  <input type="password" name="" />

• 数值输入框

  <input type="number" name="age" id="" value="" max="10" min="1" step="2"/>

• type：date 日期输入框

• type：file 文件域

• type：radio 单选按钮

  借助于Name属性将两个表单元素关联关系 设立为一个组

  默认选中：checked

• type：checkbox 复选框

  同的信息 应该也保证name属性值一致

按钮：（value写按钮上的字）

• type：button 普通按钮

• type：submit 提交按钮 disabled禁用

  点击它可以将form表单中的所有数据提交到指定的action

• type：reset 重置表单

  必须放在form标签内

• type：image 除了设置图片之外 它的功能和submit是一致的

下拉列表:

<select name="city">
	<option value="1">请选择</option>
	<option value="2" selected>北京</option>
	<option value="3">上海</option>
</select> -->

selected 下拉列表里的默认！

文本域：

<textarea rows="" name="" cols="">hehe</textarea>

style=“resize: none;” 关闭调整大小

扩展

推荐订阅：

思否

开源中国

helloGitHub

注：笔记思路来自查老师！！！