二阶段day-02 html和css基础
2019-01-22 本文已影响0人
哗啦噼里啪啦
表单标签
表单标签
一般用来作用户信息收集的，单独用没有意义，一般是结合相关标签来使用
表单标签可以对包含在这个标签中的其他标签做信息的提交和重置
action -- 提交位置（接口相关）
metho -- 请求方式
<form action="" method="">
</form>
--input标签
单标签
a.type属性
text - 普通的文本输入框，默认值
password-密码输入框
radio --单选按钮
checkbox -- 复选按钮
button -- 普通按钮
submit -- 提交按钮
reset -- 重置按钮
b.name属性 --主要用来区分数据的，提交的时候是以name=value形式提交的
value值只能是文本
c.value属性--设置value属性其实就是设置输入框中默认显示的内容，修改内容就是在修改value值
d.placehoder -- 文本输入框的提示信息
e.maxlength -- 输入的最长长度
<form action="" method="get">
<input type="text" name="tel" id="" value="" placeholder="输入电话哈嘛" maxlength="6" />
<input type="text" name="email" id="" value="" />
密码输入框
password
-->
<input type="password" name="密码" id="" value="" placeholder="请输入密码" maxlength="12"/>
<br />
radio -- 单选按钮
name -- 同一组数据对应的name值设置成一样的才能做到单选
value -- 这儿的value只是用于提交，不能显示出来的
checked -- 设置为checked让按钮处于默认选中状态
-->
<input type="radio" name="sex" id="" value="男生" checked="checked"/> <font>男</font>
<input type="radio" name="sex" id="" value="女生" /> <font>女</font>
让文字和按钮关联
文字用lable标签显示，设置for属性的值为想要关联的按钮的id值
这样做，点击文字和按钮的效果一样
-->
<input type="radio" name="m" id="m1" value="已婚" /><label for="m1">已婚</label>
<input type="radio" name="m" id="" value="未婚" /><font>未婚</font>
<input type="radio" name="m" id="" value="保密" checked="checked"/><font>保密</font>
4复选按钮 -- checkbox
name--同一组数据的name值要一样
value--只能用于数据的提交不能显示
-->
<input type="checkbox" name="x" id="" value="教育" checked="checked"/><font>教育</font>
<input type="checkbox" name="x" id="" value="互联网" /><font>互联网</font>
<input type="checkbox" name="x" id="" value="食品" /><font>食品</font>
<input type="checkbox" name="x" id="" value="电竞" /><font>电竞</font>
5普通按钮 -- button
value--对应的值会显示在按钮上
-->
<input type="button" value="登录" />
submit--提交按钮
这个按钮的点击事件是将当前所在的form标签中，
设置了name属性的相关的标签数据以name=value的形式提交
-->
<input type="submit" name="" id="" value="提交" />
重置--reset
-->
<input type="reset" name="" id="" value="重置" />
下拉列表
下拉列表（菜单）
select标签 --代表整个下拉列表
option标签 -- 代表列表中的每个选项
可以通过设置selected属性的值为selected来让这个选项默认选中
optgroup标签 -- 设置lable的值来对当前下拉菜单内容进行分组
-->
<select name="省">
<optgroup label="省"></optgroup>
<option value="四川省">四川省</option>
<option value="云南">云南省</option>
<option selected="selected" value="山西省">山西省</option>
<option value="辽宁省">辽宁省</option>
<optgroup label="直辖市"></optgroup>
<option value="">北京</option>
<option value="">天津</option>
<option value="">重庆</option>
<option value="">上海</option>
</select>
<select name="市">
<option value="成都">成都</option>
<option value="绵阳">绵阳</option>
<option value="阿坝">阿坝</option>
<option value="凉山">凉山</option>
</select>
多行文本域
textarea标签 -- 输入框，可以同时显示多行内容，可以自定换行和上下滚动
name属性--区分和提交
rows -- 行数（不滚动最多能显示的行数，影响输入的高度）
cols -- 列数（一行显示的文字的数量，影响输入框的宽度）
placeholder -- 站位符
maxlenth--限制最多的文字的个数
-->
<br />
<textarea name="message" rows="8" cols="34" placeholder="问题"></textarea>
div和span
div和span都是无语意标签
div -- 一个div占一行。网页中内容分组，分块都可以用div作为容器
html中标签分类：行内标签、快级标签
块级标签：一个占一行 例如：div、h1、p、
行内标签：一行显示多个 例如：span、font、
CSS基础
.什么是css（层叠样式表）
css是web标准中的表现标准，主要用来对网页中的内容布局和样式
2.css基本语法
a.语法结构
选择器{属性名1：属性值1；属性名2：属性值2....}
b.说明
选择器--选中想要设置样式的标签
{} -- 固定写法
属性 -- 属性名和属性值用冒号连接，多个属性之间用分号隔开，如果没有分号会导致后面的样式无效
属性名必须是css提供的属性
属性值：表示大小的数值必须加单位，px--像素、
em -- 空格数
也可以使用百分比（相对父标签）
c.常用属性
color--字体颜色
background-color --背景颜色
font-size --字体大小
width -- 宽度
height -- 高度
3.css写在哪儿
a.内联样式表: 将样式表写在标签的style属性中 这种样式表不需要选择器{}，直接给属性赋值
b.内部样式表: 将样式表写在style标签中（这个标签可以放在head中，也可以放在body中）
c.外部样式表: 吧css代码写在一个css文件中，然后在html中通过link去导入
内联样式表不管在什么情况下优先级都是最高的
外部和内部的样式表一样，谁后写，谁的优先级高
4.css中的值
颜色：英文单词，#加16进制颜色值，rgb（红，绿，蓝） rgba(红，绿，蓝，透明度)
3.外部样式表
link -导入外部文件
rel属性 -- 导入文件的作用 stylesheet -》样式表，icon->网页图标
type -- 导入的文件类型说明
herf -- 文件路径
-->
<link rel="stylesheet" type="text/css" href="css/04css基础.css"/>
<link rel="icon" type="img/jpg" href="img/QQ图片20190122144811.jpg"/>
2.内部样式表-->
<style type="text/css">
/*在这儿写css代码*/
div{
background-color: blanchedalmond;
}
/*一个style标签中可以写多个样式表*/
p{
color:purple;
}
</style>
<body>
1.内联样式表-->
<div style="color:rgb(0,255,0);font-size: 40px;">
我是div1
</div>
<p>我是段落</p>
<div id="">
我是div2
</div>
<h1>我是标题</h1>
</body>
选择器
1.选择器 --选中相应的标签
aa.元素选择器（标签选择器）：
直接将标签名作为选择器，功能就是将所有标签名的对应的标签选中
比如：div{}，p{}，a{}
b.id选择器
将标签的id属性值前面加#作为选择器，选中id属性值是指定值的标签
注意：一个页面中id值要唯一
c class选择器（类选择器）
将标签的class属性值千米那加 . 作为选择器，选中所有class属性值是指定的
一个标签可以同时拥有多个class值，让多个class值用空格隔开。
d. *(通配符)
直接将*作为选择器，选中当前页面中所有的标签
e. 群组选择器
将多个选择器用逗号隔开，作为一个选择器，选中每个单独的选择器选中的所有标签
a,p{}---选中所有的a标签和p标签
#p1，div{}--选中id是p1的标签和所有的div标签
.c1，#p1，a{}选中所有class值是c1，id是p1的标签和所有a标签
f.层级选择器（后带选择器）
将多个选择器用空格隔开作为一个选择器
g.选择器的权重
不同的权重值不一样，权重值越大，优先级越高，权重相同的时候，谁后写谁有效
内联优先级最高
元素选择器：0001（1）
通配符：0001（1）
class选择器：0010（2）
id选择器：0100（4）
通配符：0001（1）
群组选择器：分开看每个选择器的权重
后代选择器：所有的选择器权重之和
<head id="">
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
*{
width: 500;
height: 100;
}
p{
color:#FF1493
}
#p1{
color: gold;
background-color: #800080;
}
#d1{
height: 100px;
font-size: 50px;
background-color: #00FFFF;
color: gold;
}
.c2{
color: #FFD700;
}
</style>
</head>
<body>
<h1 >我是标题1</h1>
<div id="">
<div id="d1">
<p>我是段落</p>
</div>
<h2 class="c1" >我是标题2</h2>
</div>
<p id="p1">我是段落2</p>
<font class="c2">请叫我帅哥</font>
伪类选择器
伪类选择器
普通选择器是选择某一个标签，伪类选择器是选中标签某种状态
1.语法
普通选择器 ：状态{}
2.常见状态
a. link -- 初始状态 ，对于a标签来说指的是标签对应的地址没有成功访问过
b. visited -- 访问过后的状态
c. hover --鼠标悬停在标签上的时候的状态
d. active -- 激活鼠标按住标签不放的时候
主意：状态前面不是只能写元素选择器，更不是只能写a标签
2.需要准守“爱恨”原则
