HTML学习 day03
表单
表单
表单:表单域:包含了处理表单数据所用的程序的URL以及数据提交到服务器的方法。
表单控件:(对象、元素):包含了文本框、密码框、隐藏、多行文本框(文本域)、复选框、单选框、下拉列表、文件上传框、提交按钮、复位按钮、一般按钮。
提示信息:同一个表中还应该添加一些说明性文字,提示用户填写操作。
表单域
Form:用于定义采集数据的范围,即设定表单的起止位置,并指定处理表单数据程序的url地址,其基本语法结构如下:
<form action=“url” method=“get/post” name=“名” >表单内容</form>
Action:用于设定表单数据文件的URL的地址,这个文件通常是一个后台程序或是一个电子邮件地址。
Method:指定数据传递到服务器的方式。
Name:用于设定表单名称,便于其他地方引用表单的值。
注*1. get是从服务器上获取数据,post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,在URL中可以看到。post是通过HTTP post机制,用户看不到这个过程 。
3. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
4. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
表单控件(常用)
文本框: <input type=“text” />
密码框: <input type=“password”/>
提交按钮: <input type=“submit” value=“按钮上显示的文字” />
重置按钮: <input type=“reset” value=“按钮上显示的文字”/>
跳转按钮: <input type=“button” value=“按钮上显示的文字” />
样式表的创建
CSS的三种样式:
内部样式表
插入到HTML头部head标签中
<style>
CSS语句
</style>
说明:内部样式表必须定义在 <head>和</head>之间;页面所有样式都可以写在<style>和</style>之间。
引用外部样式表
引用外部样式表 前提需要创建一个CSS文件 链接方式:在HTML文件头部
<link rel="stylesheet" href="样式表路径及全称" type="text/css" />
说明:rel="stylesheet"是指这个link和其href之间的关联样式为样式表文件
type="text/css" 是指文件类型是样式表文本
<style>
@import url(样式表路径及全称);
</style>
*link与import导入外部样式的区别
1.link属于XHTML标签,而@import是CSS提供的一种方式。link除了可以加载CSS,还可以定义RSS、rel连接属性等,@import只能加载CSS
2.加载顺序的差别:当一个页面被加载时,link引用的CSS会同时被加载,而@import引用的CSS会在页面被全部下载完再被加载。
3.兼容性的差别:@import只能在IE5以上的浏览器识别(@import是CSS2.1被提出的),link则没有该问题。
4.使用dom控制样式的差别:当使用JavaScript控制dom改变样式时,只能使用link,@import不是dom可控制的
内联样式表(行间样式、行内样式、嵌入式样式)
<标签 style="属性:属性值;属性:属性值;"></标签>
样式表的作用域
内联样式表的优先级最高
内部样式表与引用外部样式表的优先级与其先后顺序有关
内联样式表的作用域是当前标签,内部样式表的作用域是当前文件,外部样式表的作用域是所有关联的文件
CSS的基础语法
CSS是由两部分组成:选择符和声明 其中声明是由属性和属性值组成,具体格式如下
注* 不同的属性之间要用英文分号隔开
基础选择符
类型选择符
标签名称{属性:属性值;}
类型选择符就是网页元素本身,定义时直接使用元素名称。例:p{color:red;}
ID选择符
#id名{属性:属性值;}
在使用ID选择符前,为元素定义一个ID属性。
ID选择符可对元素进行一个ID名的指派,是对每一个页面中的唯一出现的元素进行样式定义
例:html:<div id="top"></div>
CSS:#top{font-size:12px;color:blue;}
class选择符
. 类(class)名{属性:属性值;}
对同类标签进行不同的样式设定;对不同类的标签进行同样的样式设置
例:CSS:.txt{font-size:12px;color:blue; }
html:<div class="txt">111</div>
<div>222</div>
<div class="txt1">333</div>
群组选择符
通配符 " * "
*{属性:属性值;}
其含义就是所有元素
例:*{margin:0; padding:0;}将所有元素的边界值和填充值清零。 margin:0 auto;使元素居中
包含选择符
父元素 子元素......{属性:属性值;}
对某个对象的子对象定义样式
例:div a{font-size:12px; } 可多级包含,标签之间用空格空开
子选择符
父元素 > 子元素{属性:属性值;}
不选择任意的后代元素,而是选中某个元素的子元素
例:h1 > strong{color:red;}
伪类选择符
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标划过超链接时的状态;
a:active{属性:属性值;}即鼠标按下时超链接的状态;
拓展
html的注释
<!--注释内容-->
css的注释
/*注释内容*/
HTML学习 day03的更多相关文章
- Python学习 day03打卡
今天学习的主要内容: ppython的基本数据类型: 1. python基本数据类型回顾 2.int---数字类型 4.str---字符串类型 一.python基本数据类型 1. int==>整 ...
- python开发学习-day03(set集合、collection系列 、深浅拷贝、函数)
s12-20160116-day03 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- Python学习day03 - Python基础(1)
1. 执行Python程序的两种方式 (1)交互式(Jupyter) 优点:运行一句执行一句 缺点:关闭即消失# (2)命令行式(pycharm) 优点:可以一直保存 缺点:全部写完才能调试bug虽然 ...
- Java学习day03
day03 课堂笔记 1.数据类型 2.总结第二章到目前为止所学内容: * 标识符 * 关键字 * 字面值 * 变量 成员变量如果没有赋值,系统会自动赋值,而局部变量不手动赋值,则会编译不通过. * ...
- python学习-day03:整形、字符串常用方法:
一.数字,int 1.1: a.int(object)转化数字类型: a=' b=int(a) b=b+1000 print(b) 223 <class 'int'> 答案 b.转化二进制 ...
- 学习day03
1.结构标记 ***** 做布局 1.<header>元素 <header></header> ==> <div id=&quo ...
- 大数据学习--day03(运算符、流程控制语句)
运算符.流程控制语句 自增自减容易出错的地方: 扩展的赋值运算符 a+=b 等同于 a = a+b; 扩展的赋值运算符 隐含了一个类型的强制转换 & && 有何区别 & ...
- Python学习 day03
一.基本数据类型 python中的基本数据类型有以下几种: int -- 整数 python3中默认整数都是int型,python2中int的范围为-231~232-1(32位系统中)/ ...
- 黑马MySQL数据库学习day03 级联 多表查询 连接和子查询 表约束
/* 存在外键的表 删表限制: 1.先删除从表,再删除主表.(不能直接删除主表,主表被从表引用,尽管实际可能还没有记录引用) 建表限制: 1.必须先建主表,再建从表(没有主表,从表无法建立外键关系) ...
- Java 学习 day03
01-语句(while) 02-语句(do while) 03-语句(for) 04-语句(for和while的区别) 05-语句(循环语句的其他特点) 06-语句(for语句练习-累加&计数 ...
随机推荐
- GROUP BY中的WITH CUBE、WITH ROLLUP原理测试及GROUPING应用
前几天,看到一个群友用WITH ROLLUP运算符.由于自个儿没用过,看到概念及结果都云里雾里的,所以突然来了兴趣对生成结果测了一番. 一.概念: WITH CUBE:生成的结果集显示了所选列中值的所 ...
- IO相关Demo
这几天复习了IO相关知识 只为记录,好记性不如烂笔头 有误请指正 ありがとうございます. 我的公众号 作者:晨钟暮鼓c个人微信公众号:程序猿的月光宝盒 1.判断存在,存在改名,并延迟删除,不存在新建 ...
- fiddler抓包syntaxview窗口乱码
只需再fiddler界面GO往右第二个Decode点击一下,让他出现蓝色边框即可 注意:抓取前的他不会进行自动解码,要再重新刷新页面才能获取界面后的内容
- 池化HttpClient,拿去就能用
import lombok.extern.slf4j.Slf4j; import org.apache.http.HttpEntity; import org.apache.http.HttpResp ...
- 清新淡雅教育教学工作课件PPT模板
模板来源:http://ppt.dede58.com/jiaoxuekejian/26240.html
- Eclipse 的快捷键
1. 代码折叠的快捷键,默认是: Ctrl+Shift+Numpad_Divede(小键盘的/号) Ctrl+Shift+Numpad_Multiply(小键盘的*号) 2.删除一行:Ctrl+D 3 ...
- ie11 SCRIPT5011:不能执行已释放Script的代码
依照我遇到的问题为例: (我的页面结构为:父页面中嵌套有iframe子页面) 1.造成这种情况的原因是:父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给 ...
- ArcGIS以数据库作为数据源作为source发布服务步骤详解(以Postgresql为例)及各种发布问题
创建企业级数据库 Data Management Tools-->Geodatabase Administration-->Create Enterprise Geodatabase 按如 ...
- ABP入门教程12 - 展示层实现增删改查-脚本
点这里进入ABP入门教程目录 创建目录 在展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\下新建文件夹Course //用以存放Course相关脚 ...
- 循环语句for基本概述
循环语句for基本概述 01. for循环基础语法 for 变量名 in [ 取值列表 ]do 循环体done 02. for循环基本使用示例 #取值列表有多种取值方式,可以直接读取in后面的值,默认 ...