前端记录2（常用标签,css）

• 列表标签：ul是无序列表，ol是有序列表

  • 属性type,无序可设置列表显示符号，有序可设置1,a,A,i,I，切有star属性设置起始值，也可以去掉样式：list-style: none;

  <ul>
  <li>列表标题一</li>
  <li>列表标题二</li>
  <li>列表标题三</li>
  </ul>

• 表单

  • <form>标签 定义整体的表单区域
    • action属性 定义表单数据提交地址
    • method属性 定义表单提交的方式，一般有“get”方式和“post”方式

    <form action="http://www.cnblog.com" method="post">
    </form>

  • <label>标签 为表单元素定义文字标注
  • <input>标签 定义通用的表单元素
    • 属性type:
      • type="text" 定义单行文本输入框
      • type="password" 定义密码输入框
      • type="radio" 定义单选框
      • type="checkbox" 定义复选框
      • type="file" 定义上传文件
      • type="submit" 定义提交按钮
      • type="reset" 定义重置按钮
      • type="button" 定义一个普通按钮
    • value属性 定义表单元素的值
    • name属性 定义表单元素的名称，此名称是提交数据时的键名
  • <textarea>标签 定义多行文本输入框
  • <select>标签 定义下拉表单元素,<option>标签 与<select>标签配合，定义下拉表单元素中的选项

• css的其他选择器：

  • id选择器：通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，选择时用#+id

  #id

  • 组选择器：多个选择器，如果有同样的样式设置，可以使用组选择器

  .class1,.class2,.class3

  • 伪类选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。如class1是一个超链接，当鼠标放上该链接时会调用该设置，连接字体变为300px

  .class1:hover

  • 全局选择器：用*匹配所有

  *

• 标签分类：

  • 块标签
    • 每个标签会单独占领一行
    • 可以设置宽度和高度
    • h1-h6,p,div,li,ul,ol
  • 行内标签
    • 标签会并排显示，不会主动换行
    • 不能设置宽度和高度
    • a , span ,label
  • 行内块标签
    • 会并排显示，不会主动换行
    • 能设置宽度和高度
    • img

• 标签转换

  • 转块标签：display: block;
  • 转行内标签：display: inline;
  • 转行内块标签：display: inline-block;

• 元素溢出：overflow: auto; 可选参数

  • visible 默认值。内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。