二阶段002day 部分html和css

1.表单标签和input标签

-1.表单标签(form)
表单标签的作用:收集用户信息。 - 实质是将表单标签作为容器,来收集表单标签中其他标签的信息
本身没有任何显示效果

        action属性: 设置提交地址
        method属性: 提交方式(post/get)
        
        点提交按钮提交的时候,将表单中所有相关标签以name=value的形式,
        按照method属性提供的提交方式,提交给action属性对应的接口
        
        form标签提供了两大功能:a.统一提交   b.重置

2.input标签 - 单标签
既可以放在form标签中,也可以不放在form标签里单独使用

        type属性 - type对应的值不一样,input标签体现的功能不一样
    -->

    <form action="" method="get">
        <!--a.text - 文本输入框
            name属性 - 专门用来区分不同的信息,相当于字典的key
            value属性 - 标签内容;指向输入框中的内容; 设值其实是设文本输入框中的默认值
            placeholder属性 - 当输入框中没有内容的时候,显示的提示信息
            maxlength属性 - 设置输入框最大能输入的文字的个数

b.password - 密码输入框
name属性 - 专门用来区分不同的信息,相当于字典的key
value属性 - 标签内容;指向输入框中的内容; 设值其实是设文本输入框中的默认值
placeholder属性 - 当输入框中没有内容的时候,显示的提示信息
maxlength属性 - 设置输入框最大能输入的文字的个数

c.radio - 单选按钮
name属性 - 要求同一组的数据的name属性值必须一样,才能单选
value属性 - 不可见的,专门用于数据的提交;或者区分被选中的值
checked属性 - 让单选按钮默认处于选中状态

d.checkbox - 复选按钮
name属性 - 要求同一组的数据的name属性值必须一样,才能单选
value属性 - 不可见的,专门用于数据的提交;或者区分被选中的值
checked属性 - 让单选按钮默认处于选中状态
e.button - 普通按钮
value属性 - 决定按钮上显示的文字
-->
<input type="button" value="注册" />

        <!--f.submit - 提交按钮
            点击提交按钮后会自动提交当前form中所有设置了name属性的相关标签的值。
            以‘name=value’的形式进行提交

g.reset - 重置按钮
将当前form标签中所有的标签状态设置为初始状态
3.按钮标签(button)
双标签,中间内容部分更灵活
-->

<button>登录</button>

<button>
<img src="img/luffy.jpg"/>
<p>登录</p>
</button>

2下拉表单和多行文本框

1.下拉菜单(select-option)
a.select标签 - 代表整个下拉菜单
name属性 - 区分和提交

            b.option标签 - 下拉菜单中的选项
            内容 - 显示部分
            value属性 - 提交的内容
            selected属性 - 设置默认选中
            
            c.optgroup标签
            显示效果上对下拉菜单进行分组
            label属性 - 给分组设置名字
        -->
        <font>考试科目:</font><select name="学科">
            <optgroup label="理科"></optgroup>
            <option value="">数学</option>
            <option value="">物理</option>
            <option value="">化学</option>
            <option value="">生物</option>
            <optgroup label="文科"></optgroup>
            <option value="">语文</option>
            <option value="">政治</option>
            <option value="">地理</option>
            <option value="">历史</option>
        </select>

2.多行文本输入框(textarea)
可以输入多行内容,内容超出范围可以上下滚动
name属性 - 提交和区分
rows - 一次性可以显示的行数(决定高度)
cols - 列数(一行最多可以显示多少个文字,决定宽度)
placeholder - 提示语句
内容 - 相当于value
maxlength属性 - 最多能输入的文字个数
-->
<textarea maxlength="200" name="" rows="4" cols="20" placeholder="意见..." >默认值</textarea>

3.css基础

1.什么是CSS
css是web标准中的表现标准,专门负责网页中内容的布局和样式
目前使用的是css3
css代码又叫样式表

2.CSS语法(怎么写?)
a.基本结构
选择器{属性名1:属性值1;属性名2:属性值2;...}

b.说明
选择器{} - 通过选择器决定样式是针对哪个标签写的(在内联样式表中没有这个结构)
属性 - 属性不是随便写的,必须是CSS提供的两百多个属性中的一个;
       属性名和属性值之间用冒号连接,多个属性之间用分号隔开(如果没有分号会导致后边所有的属性无效)  
       
3.CSS代码写在哪儿?
a.内联样式表
将样式表作为HTML中标签的style属性值
内联样式表只能针对一个标签有效

b.内部样式表
将样式表作为style标签的内容
内部样式表可以针对当前html中所有的标签

c.外部样式表
将样式表写在一个css文件中,再通过link导入
外部样式表可以针对所有html文件中的所有标签

优先级:内联样式表的优先级最高;内部样式和外部样式,谁后写谁的优先级就高

4.常用属性补充:
color : 字体颜色
font-size : 字体大小
background-color : 背景颜色
width : 宽度
height : 高度

CSS中的颜色值:a.颜色的英语单词  
              b.rgb的十六进制值,例如:#ff0000  
              c.直接使用rgb值:rgb(R,G,B),  rgba(R,G,B, Alpha)  Alpha:0(完全透明) ~ 1(不透明)
CSS中的数字:如果数字表示大小,必须加单位:px(像素),em(空格)

2.内部样式表
style标签中的内容,必须也只能是css代码
-->
<style type="text/css">
/内部样式,可以同时写多个样式表/
a{
color: yellowgreen;
background-color: sandybrown;

3.外部样式表
a.link标签 - 导入外部文件
rel属性:确定导入的文件功能;stylesheet - 设置样式表 icon - 设置网页图标
type属性:确定文件类型; 文件类型/文件后缀; text/css - 文本/文件后缀是css
image/ico - 图片/文件后缀是ico
href属性: 需要导入的文件的文件路径
-->

<link rel="stylesheet" type="text/css" href="css/css基础.css"/>

<link rel="icon" type="image/ico" href="img/aaa.ico"/>

</head>
<body>
    <!--style标签也可以放在body中-->
    <style type="text/css">

1.内联样式表
body中每个有显示效果的标签都有style属性,用来设置当前标签的样式
style属性值的引号中,写的是CSS代码
-->
<p style="color: #ff00ff; font-size: 40px;">我是内联样式表</p>
<a href="http://www.baidu.com">百度一下</a>
<div id="">
我是div
</div>
<a href="#">刷新</a>
<h1>我是标题1</h1>

4.表格标签

表格标签(table-tr-td)
table标签 - 代表整个表格
tr标签 - 代表表格中的每一行
td标签 - 代表表格中的每一个单元格

        1.border   -  设置边框宽度(单位是像素)
        设置整个表格的边框宽度,同时设置每个单元的边框宽度为1
        
        2.bordercolor -  设置边框颜色
        html中的颜色值:a.颜色的英语单词
                      b.rgb对应的16进制值,前加#,例如:#ff0000(红色)
                      
        3.cellspacing  -    设置表格中单元格和单元格之间,以及单元和边框之间的间距
        
        4.cellpadding  -   设置表格中的内容到单元格边框之间的距离
                                               默认情况下,单元格的大小跟内容的大小有关
        
        5.bgcolor  -  设置背景颜色
        作为table属性  - 设置整个变革的背景颜色
        作为tr属性  - 设置一行的背景颜色
        作为td属性  - 设置一个单元格的背景颜色
        
        6.width - 设置宽度
        作为table属性  -  设置整个列表的宽度
        作为td属性  - 设置当前td所在的列的宽度
        
        7.作为table属性  -设置整个列表的高度
          作为tr属性  - 设置一行的高度
          
        8.align  -设置
        
        注意:html中所有的属性值都是写在双引号里面
    -->
    <table height="200" width="500" bordercolor="blue" cellspacing="0" cellpadding="5" bgcolor="bisque">

5.伪类选择器

伪类选择器
伪类选择器是用来选中标签的不同的状态(为了标签的不同状态设置不同的样式)
1.基本格式
普通选择器:伪类选择器
2.伪类选择器
1) link - 标签的初始状态;一般作用于a标签,表示a标签中的连接没有成功访问过对应的状态
标签:link{} - 标签是通过各种选择器来选中的标签
2)visited - 超链接被访问后的状态。一般作用于a标签
3)hover - 鼠标悬停在标签上的时候对应的状态
4)active - 激活状态,鼠标按下还没有弹起的时候对应的状态

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

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • <!DOCTYPE html> 入学登记 学号: 性别: 男 女 姓名:...
    学python的铁头娃阅读 111评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,327评论 0 7
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,828评论 0 11
  • 公司行情不好,昨天工资发下来了,看着可怜巴巴的工资几乎一整天都没说话,行情不好我多多少少也有原因,就说自己不够努力...
    魏昌阅读 141评论 0 0