表单元素
每个表单都对应一个<form></form>标签 表单内所有元素都写在 <form></form>里面;
1.最重要的属性
<form 属性 >表单的所有信息都写在这里面</form>
action属性 规定了 提交的地址 action=“网址”
Method属性 规定了 提交方式
method=“get” 传值有长度限制 能看到传值内容
method=“post” 没有长度限制 不能看到传值内容
<form action="上传地址" method=”上传方式“>
表单元素
</form>
标签名 单标签 <input /> 表单元素都有 name value
全部用 <input /> 只是用 type 给他们区别
---------------------------------------------------------------------------------------------------------------------------------
1 文本类
文本输入 <input type=”text” name=”名字” value=”文本框中的内容默认值”/><br />
密码输入(输入内容自动变为特殊字符) <input type=”password” name=“名字” value=“默认值”/>
★隐藏域 <input type=“hidden”name=“” value=“”/> 在界面上看不到 (不想让人看到但是必须提交)
♥特殊 不是单标签♥文本域 双标签 元素的值 放在 中间 当作内容 取值和赋值和和其他表单没有任何区别 只是在代码中有所区别(后期通过样式表控制文本域的大小)
<testarea name=“”> 内容<testarea/>
2,按钮累
普通按钮<input type=”button” value=”显示内容”/>
提交按钮 <input type=”submit” value=“显示内容”/>
点击后界面自动跳转到《action提交地址》使用《method属性提交》
图片按钮(作用 是提交) <input type=”img” src=”图片地址” width=“”height=“” />
重置按钮 <input type=”reset” value=“显示内容”/>
3.选择输入类
单选按钮 <input type=“radio”name=“qwe”;value=“提交的内容”/>男
单选按钮组(几个单选按钮组的name值相同)
单选按钮组<input type=“radio”name=“sex” value=“提交内容”/>男
单选按钮组<input type=“radio”name=“sex” value=“提交内容”/>女
多选按钮(复选框)特殊注意以后还讲
<input type=”checkbox” name=“aihao”value=“显示内容”/>
<input type=”checkbox” name=“aihao”value=“2323”/>
下拉列表 特殊 双标签♥特殊 不是单标签♥
<select name=”minzu”>
<option value=“001”>汉族<option/>
<option value=“002”>回族<option/>
</select>
4.选择文件 (以后还讲)
选择文件<input type=”file”/>
可以用在所有表单
Readonly 只读
Disabled 不可用可以加在所有 表单里
Hidden 隐藏
require 必选项
Checked 默认选中 用在复选框 单选框里用来做选中
Selected 默认选中 在下拉列表里使用
总结
有value 值则提交value值 没有则提交 尖括号外的文字;
根据type不同 划分不同的 功能
属性 name 所有的表单力都可以写 除了按钮类其他的必须都要写
属性 value 所有的表单力都可以写 按钮必须要写value(显示文字) 文本类的 value 为提示信息可写可不写
---------------------------------------------------------------------------------------------------------------------------------
<!-- --> 注释 *代表所有!
1.框架
<iframe src=”网页的地址” width=“” height=“” frameborder=“1” scrolling=“no”></iframe>
边框 是否有滚动条
使用<ifram></iframe>可以把 网页隐藏掉(宽高都为0) 但是仍然运行
2.<frameset></frameset> 完全的框架页面 取代body (没有body)
<frameset cols=“300,700,*”>(cols 表示横向嵌入网页;同样rows 表示纵向嵌入网页)
<frame src=“网页地址”></iframe>
<frame src=“网页地址”></iframe>
<frame src=“网页地址”></iframe>
</frameset>
可以嵌套
---------------------------------------------------------------------------------------------------------------------------------
添加
3.<marquee direction(方向)=“”>滚动效果(此处也可以换成图片)</marquee>
4.mark标签快速关键字标记:<span><mark>苹果</mark>公司发布新手机</span>
5.单标签元素:分割线:<hr />
6.找到视频 点击分享 复制HTML代码 或者复制通用代码 粘贴到网页里面 就可以引入视频: HTML5 里面有个value标签 引入视频
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
样式表:CSS
1.内联样式:写在标签里面的样式
<div style=”color:red;width:30px;”>sssssssssssssssssssss</div>
注意 冒号 使用
控制精确 代码重用性很差 页面代码乱
2.内嵌样式:写在head标签内部
<head>
<style type=”text/css”>
*
{
background-color:red;
} </style>
</head>
代码重用性好 控制不精确
3.外部样式表: 写在css里面 css里面全都是写样式的
可以对所有页面相同的标签同时适用 代码重用性最好
缺点 :控制最不精确; 重点
方法 :先使用内嵌的 测试好之后再使用 再复制到CSS 里面
优先级 : 内联最高 内嵌其次 外部样式表和内嵌的差不多
样式格式:
样式的名:样式的值
多个样式之间用分好(;)分割:
<div style=”color:red;height:300px;”></div>
--------------------------------------------------------------------------------------------------------------------------------
选择器 准确控制 方法 注释语法/* 注释 */
1. *{} 选择器 *表示所有
2. ID选择器 #名字{样式} (只能用 数字字母 或下划线开头 名字不能重名)
一个ID名只能用一次
3. Class选择器 (同一类 ) .名称{样式} 一个样式可以用多次
4. 标签选择器 span{} div{}
选择器的优先级: ID 选择器>class选择器>标签选择器 >*选择器
------------------------------------------------------------------------------------------------------------------------------------------------------
复合选择器
1.并列选择器: div,span{} 两个选择器同时使用一个样式(逗号表示并列)
2.后代选择器: <div class=”3”> (空格表示后代)
<div>后代1</div>
<div>后代2</div>
</div>
3. . 代表筛选 div.3{} 只能大范围内筛选class
<div class=”3”> </div>(被选出的一项)
<div>后代1</div>
<div>后代2</div>