5-2day-homework(本网页实现内容跳转a标签实现)
2018-08-14 本文已影响0人
阅心_5cc2
<!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>
