Day21表单标签和CSS基础

表单标签和input标签
1.表单标签
这个标签是作为一个容器,来收集和提交这个标签中的其他相关标签的数据。一般不会单独使用。
action属性:设置提交路径(接口)
method:设置请求方式(post,get)
2.input标签
input标签可以单独使用,也可以和form配合使用
type属性:这个值不一样,input的功能就不一样
text,password
name:对输入的内容进行说明,提交数据的时候以name:value的形式进行提交,
name值会作为发送请求的参数名,value就是参数值
value:指向的就是文本框输入的内容
placeholder:提示信息
maxlength:输入的最大长度
3.单选:radio
name:同一类信息的name需要设置成一样的值,才能做到。选择其中一个让别的取消选中
checked:默认选中
4.复选:checkbox
5.下拉菜单:select>option
6.普通按钮:button
type:button
value:设置按钮上的文字
button标签
7.提交按钮
type:submit
8.重置标签
type:reset
可以将当前form标签中所有的标签的值设置为初始状态的值
<form action="" method="post">
用户名<input type="text" name="username" placeholder="姓名"/><br />
密码<input type="password" name="password" placeholder="密码"/><br />
电话<input type="text" name="tel" placeholder="电话"/><br />
<input type="radio" name='sex' value="boy" checked="true"/>男
<input type="radio" name="sex" value="girl" />女<br />
<input type="color" name="" id="" value="" />
<input type="submit" value="提交" />
</form>

下拉菜单和多行文本域
多行文本域:textarea
输入的内容可以显示多行
rows:设置一屏最多能显示的行数
cols:设置一行能显示最大的列数
<form action="" method="get">
<select name="ABC">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="">
<optgroup label="四川"></optgroup>
<option value="">成都</option>
<option value="">绵阳</option>
<optgroup label="云南"></optgroup>
<option value="">昆明</option>
<option>玉溪</option>
</select>
<input type="submit" name="" id="" value="提交" />

<textarea name="" rows="5" cols=""></textarea>

div和span
div和span标签都是无语意的标签,一般用来对网页中的标签进行分组和分块使用
一个div独占一行,多个span可以在一行
css基础
1.什么是css
css就是web标准中的表现标准,专门用来对网页标签进行布局和设置样式的一门语言
目前一般使用css3,css又叫样式表
2.css基本语法
结构:
选择器{属性:属性值;属性2:属性值2...}
说明:
选择器:用来选中/确定需要设置样式的标签
属性:必须是css提供的属性
属性值:根据属性赋不同的值。如果属性是数字,后面必须加单位。例如:px(像素)、em(空格)
css中的颜色值:颜色的英文单词,颜色对应的6位十六进制值,RGB(R,G,B),rbga(r,g,b,alpha)
属性和属性值之间用冒号隔开。多个属性用分号隔开;属性的顺序除特殊情况外是任意的
3.在哪写css代码
内联样式:写在标签的style属性 --只对一个标签有效
内部样式:写在head的style标签中 -- 只对当前HTML文件有效
外部样式:写在外部的css问价中,通过link导入 -- 可以作用于所有的html
内联样式优先级最高,内部样式和外部样式谁后写,谁的优先级高
css选择器
选择器{属性1:属性值1...}
选择器 -- 选中需要添加样式的标签
常用的选择器:元素选择器,id选择器,class选择器,群组选择器,父子选择器,通配符
1.元素选择器:
将标签作为选择器
2.id选择器:
将id属性的值作为选择器
3.class选择器:
将class属性的值作为选择器
4.群组选择器:
多个选择器用逗号隔开,同时选中所有选择器对应的标签
5.父子选择器:
多个选择器用空格隔开作为一个选择器,按顺序依次往后找,找到最后一层选择器对应的标签
6.通配符:
将*作为选择器
伪类选择器
伪类选择器是选中某个标签的不同的状态。可以给不同状态设置不同的样式
1.link
标签:link{} - 选中的是初始状态(a标签中的网址一次都没有访问成功的状态)
例如:a:link{}; p:link{}; #a1:link{}
2.visited:访问后的状态
3.hover:鼠标悬停在标签是对应的状态
4.active:鼠标按住没有放开的效果
注意:使用伪类选择器的时候要遵守爱恨原则(LoVeHAte),如果不遵守可能会导致某些状态的样式无效
选择器的优先级:权重值越大,优先级越高
内联样式 > id > class > 元素选择器 = 伪类选择器
1000 0100 0010 0001 0001
群组选择器权重:单独看每个选择器的权重
父子选择器权重:所有的选择器权重之和

<style type="text/css">
    a{
        transition: all, 0.5s;
    }
    a:link{
        color: red;
    }
    a:visited{
        color: green;
    }
    a:hover{
        font-size: 20px;
    }
    a:active{
        color: deepskyblue;
    }
</style>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1 92
  • 一、表单标签和input标签 1.表单标签:form 这个标签是作为一个容器,来收集和提交这个标签中的其他相关标签...
    xdxh阅读 187评论 0 0
  • 01-表单标签和Input标签 1.表单标签: form 这个标签是作为一个容器,来收集和提交这个标签中的其他相关...
    佐手牵鼬手_89a9阅读 249评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,465评论 1 45
  • 昨天晚上我们的短程三次团体沙盘拉上了帷幕。回顾我们整个做盘的过程,有冲击、有摩擦、有协助、有静观。总之每一场沙盘都...
    藜箬阅读 528评论 0 0