表单

　　表单

　　　　  表单：表单域：包含了处理表单数据所用的程序的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的更多相关文章

  1. Python学习 day03打卡

    今天学习的主要内容: ppython的基本数据类型: 1. python基本数据类型回顾 2.int---数字类型 4.str---字符串类型 一.python基本数据类型 1. int==>整 ...

  2. python开发学习-day03(set集合、collection系列 、深浅拷贝、函数)

    s12-20160116-day03 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  3. Python学习day03 - Python基础（1）

    1. 执行Python程序的两种方式 (1)交互式(Jupyter) 优点:运行一句执行一句 缺点:关闭即消失# (2)命令行式(pycharm) 优点:可以一直保存 缺点:全部写完才能调试bug虽然 ...

  4. Java学习day03

    day03 课堂笔记 1.数据类型 2.总结第二章到目前为止所学内容: * 标识符 * 关键字 * 字面值 * 变量 成员变量如果没有赋值,系统会自动赋值,而局部变量不手动赋值,则会编译不通过. * ...

  5. python学习-day03：整形、字符串常用方法：

    一.数字,int 1.1: a.int(object)转化数字类型: a=' b=int(a) b=b+1000 print(b) 223 <class 'int'> 答案 b.转化二进制 ...

  6. 学习day03

    1.结构标记  *****   做布局    1.<header>元素    <header></header>    ==> <div id=&quo ...

  7. 大数据学习--day03(运算符、流程控制语句)

    运算符.流程控制语句 自增自减容易出错的地方: 扩展的赋值运算符  a+=b 等同于 a = a+b;  扩展的赋值运算符 隐含了一个类型的强制转换 & && 有何区别   & ...

  8. Python学习 day03

    一.基本数据类型 python中的基本数据类型有以下几种: int   --  整数     python3中默认整数都是int型,python2中int的范围为-231~232-1(32位系统中)/ ...

  9. 黑马MySQL数据库学习day03 级联 多表查询 连接和子查询 表约束

    /* 存在外键的表 删表限制: 1.先删除从表,再删除主表.(不能直接删除主表,主表被从表引用,尽管实际可能还没有记录引用) 建表限制: 1.必须先建主表,再建从表(没有主表,从表无法建立外键关系) ...

  10. Java 学习 day03

    01-语句(while) 02-语句(do while) 03-语句(for) 04-语句(for和while的区别) 05-语句(循环语句的其他特点) 06-语句(for语句练习-累加&计数 ...

随机推荐

  1. 从七个方面，面试BAT大厂高级工程师，纯干货！

    转载注明:https://blog.csdn.net/WantFlyDaCheng/article/details/100078782 一.框架是重点,但别让人感觉你只会山寨别人的代码 二.别单纯看单 ...

  2. 【AGC035F】Two Histograms

    Problem Description 你有一个 \(N\) 行.\(M\) 列的.每个格子都填写着 0 的表格.你进行了下面的操作: 对于每一行 \(i\) ,选定自然数 \(r_i\) (\(0\ ...

  3. C#如何判断委托是实例方法还是静态方法

    一. 委托的分类 通过用什么类型的方法来声明为委托,可以分为两类: 1. 委托静态方法:把一个静态方法给委托 2. 委托实例方法:把一个实例对象的成员方法给委托 (这两个名字是博主取的,可能不是很专业 ...

  4. git push 时用户的配置

    Pycharm临时配置git提交的账户:git 修改当前的project的用户名的命令为:git config user.name 你的目标用户名**;git 修改当前的project提交邮箱的命令为 ...

  5. Swoole中内置Http服务器

    创建httpServer.php文件,代码如下: <?php // 创建服务对象 $http = new swoole_http_server("10.211.55.17", ...

  6. golang-结构体与指针

    1.结构体 结构体是一系列具有指定数据类型的数据类型 ,就是一个结构体中存储多个不同类型的数据字段 ,用于创建传递复杂数据结构 结构体可以理解为面向对象的模板 ,但是go并非面向对象 ,结构体只是一种 ...

  7. GitHub访问速度慢的一种优化方法

    GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git 作为唯一的版本库格式进行托管,故名GitHub. 由于GitHub是一个国外网站,在国内访问速度如何呢? 我们通过浏览器访问下ht ...

  8. JPA的一些问题

    Error creating bean with name 'mainController': Unsatisfied dependency expressed through field 'test ...

  9. rsync的简介及使用

    1.rsync的基础概述 1.什么是备份 相当于给源文件增加一个副本,但是备份只会备份当前状态的数据,当你在写数据是,不会备份新写入的数据,除非自己手动在备份一次. 2.为什么要做备份 1.需要备份一 ...

  10. [题解向] Manacher简单习题

    \(1\) LG1659 [国家集训队]拉拉队排练 求前\(k\)大的奇数长度回文串的长度之积. \(\rm |S|\leq 1e6,K\leq 1e12\) --一开始觉得挺水,就开始二分最少长度能 ...