首页 > 代码库 > 随笔-1030

随笔-1030

随笔1030
学习第三天 表单
一、表单
  <form action="" method=""></form>
  其中action代表制作的表单指令提交到的地址,method指提交方式:method="post";与method="get";,post与get的区别是是否能在浏览器地址内查看到表单提交的值。get为所提交的所有的值都能在浏览器查看,post则把提交的值隐藏无法查看,所以post利用较多。
  由于get在浏览器地址栏有显示,因此get提交方式会有长度限制,post则无。
  form表单内通常用<input />单标签来编辑
二、表单元素
  1.文本输入
    (1)文本框
    <input type="text" name="" value="" />
    type指类型;name指名称,即提交时(get)所显示的名称;value指值,即文本框内显示的内容,所显示的值(可以不写)。
    (2)密码框
    <input type="password" name="" value="" />
    type指类型;name指名称,同上;value同上。
    (3)隐藏域
    <input type="hidden" name="" value="" />
    type指类型;name指名称,同上;value同上。 隐藏域用来那些不方便用户看到,但是对内容有用的文本。
    (4)文本域
    <textarea name="">此处添加内容</textarea>
    可自行编辑文本域的大小长宽。
  2.按钮
    (1)普通按钮
    <input type="button" name="" value="" />
    type指类型;name指提交时(get)所显示内容(所有按钮均可以不写);value指按钮上所显示的内容(必写!)
    (2)重置按钮
    <input type="reset" name="" value="" />
    type指类型;name指名称,同上;value同上。
    (3)提交按钮
    <input typs="submit" name="" value="" />
    type指类型;name指名称,同上;value同上。此处注意的是,提交所有form内容,提交到form内action指向的地址,方式为method的get或者post。
    (4)图片
    <input type="image" name="" value="" src="" />
    type指类型;name指名称,同上;value同上(但是可以不写)。此处注意的是,提交所有form内容,提交到form内action指向的地址,方式为method的get或者post。
  3.选择输入
    (1)单选
    <input type="radio" name="" value="" />+备注
    <input type="radio" name="" value="" />+备注
    <input type="radio" name="" value="" />+备注
    name值相同的时候为单选,即只能选一个;value指的是提交时显示在浏览器地址栏上的值。提交后浏览器地址栏对应的是&name=value。
    (2)复选(多选)
    <input type="checkbox" name="" value="" />+备注
    <input type="checkbox" name="" value="" />+备注
    <input type="checkbox" name="" value="" />+备注
    <input type="checkbox" name="" value="" />+备注
    name值相同,提交后浏览器地址栏对应的是&name=value。
    (3)下拉列表
    <select name="">
    <option value="">+内容</option>
    <option value="">+内容</option>
    <option value="">+内容</option>
    </select>
    样式同理于<ul><li>的性质
    select有name值,option有value值,所有的value的值均为提交的值,并非显示出来的值,显示出来的是+内容这部分。
    (4)选择文件
    <input type="file" name="" />
此处需要注意的是,以上所有内容,name属性除了按钮之外必须要填写,因为name对应上传时对应的数据名称;
                value属性按钮必须填写,因为value代表属按钮上的字,
    除了按钮之外,name对应上传时数据的名称,value对应上传的值,简要表达便是&name=value。
其他内容:
    <input readonly="readonly" type=""..... />
    <input disabled="disabled" type=""..... />
    <input hidden="" type=""..... />
    <input checked="checked" type="radio(checkbox)"..... />  checked选项只用于radio单选和checkbox复选之中。
    <option selected="selected" value=""></option>   selected选项只用于select下拉列表的option之中。
三、框架
  1.<iframe></iframe>嵌入网页
    <iframe src="插入的网页地址" width="" height="" frameborder="框架边框" scrolling="是否有滚动条"></iframe>
  2.<frameset></frameset> 框架集
    出现<frameset>时就不会出现<body>
    <frameset cols="300,*"(指左右拆分,左边300px,右边占据剩余部分) rows="300,*"(指上下拆分,同理) frameborder="0"(边框为0)>
    <frame src="框架显示的页面地址" scrolling="是否有滚动条" />
    <frame src="框架显示的页面地址" scrolling="是否有滚动条" />
    </frameset>
四、其他标签
  1.<marquee direction="方向"></marquee>做滚动效果
  2.<mark></mark> 做标记
  3.<hr />做分隔线
  4.页面嵌入视频:1.找到视频 2.找到视频左下方分享 3.复制html代码,复制通用代码 4.粘贴页面过来
五、样式表
  分类:
    1.内联:写在标签内的,用style,控制精确,但是重用性差。
    2.内嵌:写在head <style type="text/css"></style> 控制不如内联精确,但是重用性好。
    3.外部:写在单独的CSS文件,引入:右键-css样式表-附加样式表,即:<link href="text/css" rel="stylesheet" type="text/css"> 控制与内嵌差不多,重用性好、
  样式选择器: 均写在CSS或head内
    1.    *{..} 所有样式均执行
    2.    #代号{..} id样式 用id=""来选择样式
    3.    .代号{..} class样式 用class=""来选择样式
    4.    div{..}  标签选择器 定义div span等等标签的样式
    5.复合选择器  用逗号隔开的,例如div,span{..}是代表并列 此类标签共同执行同种样式
                  用空格隔开的,例如ul li{..}是代表子集,后代,定义ul下li列表的样式
                  用.隔开的,例如div.nva{..}是代表筛选div下的有nva名称的样式
 选择器的优先级为:
  id>class>标签选择器>*(所有)

 

随笔-1030