随笔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>标签选择器>*(所有)
时间： 2024-10-13 22:23:21