[note] HTML list|table|form

一. HTML-列表元素

列表元素

  • 有序列表:ol、li

    • ol(ordered list)有序列表,直接子元素只能是li
    • li(list item)列表中的每一项
  • 无序列表:ul、li

    • ul(unordered list)无序列表,直接子元素只能是li
    • li(list item)列表中的每一项

    li一定要是ul或者ol的直接子元素

  • 定义列表:dl、dt、dd

    • dl(definition list)定义列表,直接子元素只能是dt、dd
    • dt(definition term)列表中每一项的项目名
    • dd(definition description)列表中每一项的具体描述,是对 dt 的描述、解释、补充

    dt和dd是兄弟元素

    • 一个dt后面一般紧跟着1个或者多个dd
    • dt、dd常见的组合
      事物的名称、事物的描述
      问题、答案
      类别名、归属于这类的各种事物

元素CSS属性

列表相关的常见CSS属性有4个:list-style-type、list-style-image、list-style-position、list-style,它们都可以继承,所以设置给ol、ul元素,默认也会应用到li元素

  • list-style-type:设置li元素前面标记的样式(很少用到)
    • disc:实心圆、circle:空心圆、square:实心方块
    • none:什么也没有(用得最多)
  • list-style-image:设置某张图片为li元素前面的标记,会覆盖list-style-type的设置(很少用到)
  • list-style-position:设置li元素前面标记的位置,可以取outside、inside2个值
    • 前面标记的样式是算在内容内还是内容外
  • list-style: none(用得最多)缩写属性

二. HTML-表格元素

table常见的元素

  • table
    • 属性(很少用到)
  • tr 表格中的行 -> table row
    • 属性
  • td 行中的单元格 -> table description
    • 属性

单元格边框的合并:细线表格(很常用)

  • 合并单元格的边框 table{ border-collapse: collapse }
  • 表格居中:margin auto

其他元素(很少用到)

  • caption
  • tbody
  • thead
  • th
  • tfoot

单元格的合并

  • 合并要领
    • 合并方向是向右、向下
    • 删掉被覆盖掉的td元素
  • colspan
  • rowspan

border-spacing

  • border-spacing用于设置单元格之间的水平、垂直间距,比如
  • table {border-spacing: 10px 20px }
  • 2个值分别是cell之间的水平、垂直间距
    如果只设置1个值,同时代表水平、垂直间距

三. HTML-表单元素

form表单常用元素

  • form表单 一般情况下,其他表单相关元素都是它的后代元素
  • input 单行文本输入框、单选框、复选框、按钮等元素
  • textarea 多行文本框
  • select、option 下拉选择框
  • button 按钮
  • label 表单元素的标题
  • fieldset 表单元素组
  • legend fieldset的标题

input的常用属性

input是一个行内替换元素(和img一样),基本上所有替换元素都是行内元素

input是一个单标签

input的type属性:

  • 1 单行文本输入框

    • text:文本输入框(明文输入)
    • password:文本输入框(密文输入)
  • 2 单选复选框

    • radio:单选框
    男<input type="radio" name="sex" value="1" title="男" checked>
    女<input type="radio" name="sex" value="2" title="女">
    <!--
    具有相同name值的radio input会实现互斥效果
    -->
    
    • checkbox:复选框
  • 3 button 按钮 重置 提交

      1. 普通按钮(type=button):使用value属性设置按钮文字

      按钮的两种实现方法:

      1. <button>标签(比较少用)

      2. <input>标签,type为button(常用)

        <input type="button" value="获取验证码" tabindex="-1">

      1. 重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)
      <form>
          <fieldset>
              <legend>必填信息</legend>
          </fieldset>
      
          <fieldset>
              <legend>选填信息</legend>
          </fieldset>
          
          <div>
              <input type="reset" value="重置" tabindex="-1">
              <input type="submit" value="注册" tabindex="-1">
          </div>
      </form>    
      
      • 前提1:type必须是reset类型 (value值可以不写,默认是“重置”)
      • 前提2:所有的内容都必须在同一个表单中 <form>
      1. 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)
  • 4 file:文件上传

input的其他属性

  • 注意:【当属性名和值相等的时候可以只写属性名】,例:
    • <input type="text" readonly="readonly"> ,可以简写为:
    • <input type="text" readonly>
  • maxlength:允许输入的最大字数
  • placeholder:占位文字
    • <input id="pwd" type="password" name="pwd" placeholder="请输入密码">
  • readonly:只读(很少用到)
  • disabled:禁用
    • 例如禁用获取验证码
    • <input type="button" value="获取验证码" disabled>
  • checked:默认被选中
    • 只有当type为radio或checkbox时可用
    • 男<input type="radio" name="sex" value="1" title="男" checked tabindex="-1">
  • autofocus:当页面加载时,自动聚焦
    • 通常给第一个输入框添加autofocus
  • name:名字
    • 在提交数据给服务器时,可用于区分数据类型(作为key)
    • 单选框互斥必须设置name
  • value:取值
    • button不设置name,不会上传value
  • form:设置所属的form元素(填写form元素的id)(很少用到)
    • 一旦使用了此属性,input元素即使不写在form元素内部,它的数据也能够提交给服务器

textarea 多行文本输入框

  • textarea的常用属性
    • cols:列数
    • rows:(显示的)行数
  • 缩放的CSS设置
    • 禁止缩放:resize: none;
    • 水平缩放:resize: horizontal;
    • 垂直缩放:resize: vertical;
    • 水平垂直缩放:resize: both;

select、option 下拉选择框

  • option是select的子元素,一个option代表一个选项
<select name="edu" title="学历">
  <option value="1">小学</option>
  <option value="2">初中</option>
  <option value="3" selected>高中</option>
</select>
  • select常用属性
    • multiple:可以多选
    • size:显示多少项
  • option常用属性
    • selected:默认被选中
    • value:上传到服务器的键

fieldset和legend 域方框和域标题

  • fieldset:表单元素组(一个专门的div,把表单包裹起来)
  • legend:fieldset的标题

四. 补充要点

布尔属性(boolean attributes)

布尔属性可以没有属性值,写上属性名就代表使用这个属性
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
如果要给布尔属性设值,值就是属性名本身

按钮的两种标签的实现

  • 用input元素实现:

    • 普通按钮(type=button):使用value属性设置按钮文字

    • 重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)

    • 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)

  • button元素:使用button元素也能实现按钮,功能效果跟input一样

    • button默认的type是submit

input和label

label元素一般跟input配合使用,用来表示input的标题
labe可以跟某个input绑定,点击label就可以激活对应的input

input的外边框outline

通常会设置为none,然后自定义border

input :focus { 1px solid blue }

五. 表单提交:form常用属性

  • 传统的表单提交
    • 1 将所有的input包裹到一个form中,要上传的input需要有name和value
    • 2 form设置action
    • input/button类型是submit
  • action:用于提交表单数据的请求URL
  • method:请求方法(get和post),默认是get
  • target:在什么地方打开URL(参考a元素的target)
  • enctype:规定了在向服务器发送表单数据之前如何对数据进行编码,取值有3种:
    • application/x-www-form-urlencoded:默认的编码方式
    • multipart/form-data:文件上传时必须为这个值,并且method必须是post
    • text/plain:普通文本传输
  • accept-charset:规定表单提交时使用的字符编码

get和post

提交表单数据时,浏览器发送的是http请求,有2种请求方法可以选择

  • get

    • 在请求URL后面以?的形式跟上发给服务器的参数,多个参数之间用&隔开,比如
      http://ww.test.com/login?phone=123&password=234&sex=1
    • 由于浏览器和服务器对URL长度有限制,因此在URL后面附带的参数是有限制的,通常不能超过1KB
  • post

    • 发给服务器的参数全部放在请求体中
    • 理论上,post传递的数据量没有限制(具体还得看服务器的处理能力)

推荐阅读更多精彩内容

  • 一,有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)?...
    kingBirds阅读 395评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 1,122评论 0 7
  • 超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用...
    Nian糕阅读 382评论 0 4
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 300评论 0 1
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 488评论 0 0