<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>笔记整理</title>
<style type="text/css">
*{
margin:0 auto;
padding:0 auto;
}
div{
height:auto;
width:600px;
background-color: gainsboro;
margin-bottom: 30px;
}
h4{
text-align: center;
background-color: gray;
color:white;
height:80px;
display: block;
}
a{
padding:10px 40px;
background-color: dodgerblue;
margin-top: 20px;
color:#FFFFFF;
display: block;
}
</style>
</head>
<body>
<!--这里是控制按钮-->
<div style="position:fixed;height:1080px;width:100px">
<a href="#con1">01</a>
<a href="#con2">02</a>
<a href="#con3">03</a>
<a href="#con4">04</a>
<a href="#con5">05</a>
<a href="#con6">06</a>
</div>
<!--一下是内容部分-->
<div id="con1" style="background-color: papayawhip;">
<!--这是第一部分知识-->
<h4>01-表单标签基础知识</h4><br />
<p>
表单标签<br />
1.可以提交表单中收集的信息<br />
action属性:设置提交信息的位置<br />
method属性:提交方式 - post/get<br />
</p><br />
<p>
input标签(单标签) -- text(文本输入框)<br />
1.是表单标签<br />
2.type属性:<br />
text - 普通的文本输入框<br />
3.name属性: 必须设置(a.用于提交信息)<br />
4.value属性: 标签内容<br />
5.placeholder属性:占位符(提示信息)<br />
6.maxlength: 输入框最多能输入的字符个数<br />
7.readonly:readonly - 输入框只读(不能往里面输入内容)<br />
</p><br />
<p>
input标签- 密码输入框<br />
1.type属性: password --- 输入的值是密文显示<br />
</p><br />
<p>
input标签:单选按钮<br />
1.type属性:radio<br />
2.name: 同一类型对应的name值必须一样<br />
3.value:设置选中按钮提交的值<br />
4.checked: 设置为checked,让按钮默认处于选中状态<br />
</p><br />
<p>
input标签:多选按钮<br />
1.type:checkbox<br />
2.name:同一类型对应的name值必须一样<br />
3.value:设置选中按钮提交的值<br />
4.checked: 设置为checked,让按钮默认处于选中状态<br />
</p><br />
<p>
input标签:普通按钮<br />
disabled:disabled - 让按钮不能点击<br />
input标签:重置按钮<br />
让当前所在的form中的所有表单相关标签对应的值,回到最初的状态<br />
input标签:文件选择器<br />
</p><br />
</div>
<!--这是第二部分笔记-->
<div id = "con2">
<h4>02-下拉菜单和多行文本域案例</h4><br />
<p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="get">
<!--fieldset:
一个fieldset标签对应一个表单分组
legend标签:设置分组名
-->
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="username" id="username" value="" placeholder="用户名" />
<input type="password" name="username" id="username" value="" placeholder="密码" />
<input type="reset" name="" id="" value="重置1" />
</fieldset>
<fieldset id="">
<legend>反馈信息</legend>
<!--1.下拉菜单-->
<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="大连">大连</option>
<!--selected:设置默认选中-->
<option value="青岛" selected="selected">青岛</option>
</select>
<!--2.多行文本域(多行文本输入框)
-->
<textarea name="message" rows="2" cols="50" placeholder="请输入意见..." maxlength="200">上次没有发送信息</textarea>
<input type="reset" name="" id="" value="重置2" />
</fieldset>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
</p>
</div>
<!--这里是第三部分空白标签案例-->
<div id = "con3">
<h4>03-空白标签案例</h4>
<p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="">
<a href="">百度一下</a>
</div>
<div id="">
<a href="">淘宝</a>
</div>
<!--
html中标签分为两大类:
1.块级标签:一行只能有一个(不管标签的宽度是多少)
h1-h6, p, hr, 列表标签,table, form,
2.行内标签:一行可以有多个
a, img, input,下拉列表(select), textarea
div标签,是空白标签,没有任何特殊的意义(无语义标签)
-->
<div style="background-color: red; width: 100px;">
我是div1 <br />
我是div111
</div>
<span style="background-color: royalblue;">
我是span4
</span>
<div style="background-color: yellow; width: 90px;">
我是div2
</div>
<div style="background-color: palevioletred; width: 120px;">
我是div3
</div>
<span style="background-color: green;">
我是span
</span>
<span style="background-color: gold;">
我是span2
</span>
<span style="background-color: greenyellow;">
我是span3
</span>
<span style="background-color: royalblue;">
我是span4
</span>
</body>
</html>
</p>
</div>
<!--这是第四部分笔记-->
<div id = "con4" style="background-color:mediumspringgreen">
<h4>04-认识css</h4>
<p><br />
1.什么是CSS<br />
CSS是web标准中的表现标准,用设置网页上的标签的样式(长什么样,在哪儿)<br />
CSS代码/CSS文件,我们叫样式表<br /><br />
目前我们使用的是CSS3。<br /><br />
2.写在哪儿<br />
内联样式表:将css代码写在标签的style属性中<br />
内部样式表:写在head标签中的style标签的内容中<br />
外部样式表:写在一个css文件中,通过head中的link标签来关联<br />
优先级: 内联的优先级最高;内部和外部没有绝对优先,主要看同一个属性谁最后赋值,谁就有效<br /><br />
3.怎么写(CSS语法)<br />
选择器{属性:属性值; 属性:属性值;}<br />
选择器: 用来选中需要设置样式的标签<br />
属性:css属性(css2中的属性有两百多个)<br />
属性值:如果属性值是数字,表示的是大小要在后面加px<br />
注意:每个属性之间要使用分号隔开,否则属性无效<br /><br />
补充属性: color: 设置字体颜色 <br />background-color:设置背景颜色 <br />width:标签的宽度 <br />height:标签的高度<br />
</p><br />
</div>
<!--这是第五部分css选择器-->
<div id = "con5" style="background-color:gold">
<h4>05-css选择器</h4><br />
<p>
选择器<br />
0. 元素选择器(标签选择器):标签名<br />
选中所有的标签名对应的标签<br />
1.id选择器:#id属性值<br />
每个标签都有一个id属性,整个html中,id的值必须唯一<br /><br />
2.class选择器:.class属性值<br />
每个标签都有一个class属性,<br /><br />
3.通配符:*<br />
选中所有的标签 <br /><br />
4.层级选择器:选择器1 选择器2...<br />
5.群组选择器:选择器1,选择器,....<br /><br />
补充:<br />
css中的颜色值:<br />
1.颜色英语单词<br />
2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)<br />
3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1<br />
</p><br />
</div>
<!--这是第六部分笔记知识点-->
<div id = "con6" style="background-color:lightskyblue">
<h4>06-css选择器</h4><br />
<p>
伪类选择器: 选择器:状态<br />
link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态<br />
visited: 超链接访问后的状态 --- 已经访问成功后的状态<br />
hover: 鼠标悬停在标签上对应的状态<br />
active:鼠标按住的状态<br /><br />
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候,要遵守爱恨原则(先要爱才能恨)
LoVe HAte<br />
</p><br />
</div>
</body>
</html>
5-2day-homework(本网页实现内容跳转a标签实现)
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- (原文取自格陵兰航空公司杂志《Suluk》2017年03期) When the clock strikes 12...