day22-作业-页面内的跳转
2018-08-16 本文已影响0人
向前冲我在路上
一、页面内的跳转
根据用a标签来连接其他标签的id或class或其他选择器名进行页内的跳转。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面内的跳转</title>
<link rel="stylesheet" type="text/css" href="css/zuoye.css"/>
</head>
<body>
<div id="head_hc" align="center">
<h1>HTML和CSS的学习</h1>
</div>
<hr align="center" width="960" />
<div id="zs_dian" >
<ol >
<h2><li><a href="#form1">表单标签</a></li></h2>
<h2><li><a href="#form1">下拉列表与多行文本</a></li></h2>
<h2><li><a href="#form1">空白标签</a></li></h2>
<h2><li><a href="#form1">认识CSS</a></li></h2>
<h2><li><a href="#form1">CSS选择器</a></li></h2>
<h2><li><a href="#form1">伪类选择器</a></li></h2>
</ol>
</div>
<hr align="center" width="960" />
<div id="form1" align="center">
<h3 align="left"><a href="#zs_dian">表单标签</a></h3>
</div>
<div id="b_form" align="left">
<textarea id="textarea" name="textarea" rows="" cols="" disabled="disabled">
表单标签:
作用：专门来收集用户信息。
1. 可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 --POST/get
input标签：
1.是表单标签
2.type属性：
text值：普通的文本输入框
password值：密码文字输入框
3.name属性：传值时很重要，
4.value属性：标签内容
5.placeholder属性：提示信息，占位符
6.maxlength:输入框中输入字符的个数
7.readonly属性:值为readonly只读内容，不能编辑。
type属性：password----输入的值是密文显示
单选按钮：
type属性：radio
name属性：统一类型的对应的name值必须一样
value属性：
checke属性：设置按钮默认处于选中状态。
type属性：submit提交按钮值
1.type属性：checkbox
2.name：同一类型对应的name值必须一样
3.value:设置选中按钮提交的值
4.checked：设置checked,让按钮处于默认选中
input标签：type属性：值为button，普通按钮
nput标签：重置标签
将当前所在的from中的所有表单相关标签对应的值，回到最初的状态
nput标签：type属性;file值，文件选择器
</textarea>
</div>
<div id="form1" align="center">
<h3 align="left"><a href="#zs_dian">下拉列表与多行文本</a></h3>
</div>
<div id="b_form" align="left">
<textarea id="textarea" name="textarea" rows="" cols="" disabled="disabled">
1.下拉菜单-->
select 下拉列表标签：
属性selected：selected表示默认选中
2.多行文本输入域（多行文本输入框）
3.表单分组：fieldset：
一个fieldset标签对应一个分组
legend标签：设置分组名。
</textarea>
</div>
<div id="form1" align="center">
<h3 align="left"><a href="#zs_dian">空白标签</a></h3>
</div>
<div id="b_form" align="left">
<textarea id="textarea" name="textarea" rows="" cols="" disabled="disabled">
html中的标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度什么样的）
div，h1-h6,p,hr,dl,dd,li,列表相关的标签都是块标签。
table，form，
2.行内标签：一行可以有多个标签，没有任何特殊的意义（无语义标签）
a,img,input，select（下拉列表），textarea（多行输入）
</textarea>
</div>
<div id="form1" align="center">
<h3 align="left"><a href="#zs_dian">认识CSS</a></h3>
</div>
<div id="b_form" align="left">
<textarea id="textarea" name="textarea" rows="" cols="" disabled="disabled">
1.什么是CSS
CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样，位置）
CSS代码或者CSS文件，我们叫样式表。
目前使用CSS3版本
2.写在哪儿
a.内联样式表：将代码写标签内部的style属性中。（优先级最高）
b.内部样式表：写在head标签中，用style标签来装CSS代码。
c.外部样式表：新建一个CSS文件，通过head中的link标签来关联
优先级：
内联：优先级最高
内部和外部：是那个最后赋值那个就优先
3.怎么写
选择器{属性：属性值；属性：属性值}
选择器：用来选择中需要设置样式的标签
属性：CSS属性（CSS2中的属性有两百多个属性）
属性值：如果是数字，表示的大小要在后面加px.否则无效。
注意：没事属性之间用分号隔开，否则属性无效。
补充属性：color：设置字体颜色，background-color：设置背景颜色 whith：标签宽度
style 属性：每个标签都有
内联的写法
</textarea>
</div>
<div id="form1" align="center">
<h3 align="left"><a href="#zs_dian">CSS选择器</a></h3>
</div>
<div id="b_form" align="left">
<textarea id="textarea" name="textarea" rows="" cols="" disabled="disabled">
0.元素选择器（标签选择器）：标签名
选中所有的标签名对应的标签
1.Id选择器：#id属性值
每个标签都有一个id属性，整个HTML中，id是唯一的。
CSS中的颜色值：
1.颜色英语单词
2.十六进制颜色值；0-255,00-ff(#ff0000-红色)
3.rgb值：rgb(红，绿，蓝) rgba(红，绿，蓝，透明度)-透明度0-1
2.class选择器：.class属性值
每个标签都有一个class，但是class的值不用是唯一的
3.通配符 *
选中所有的标签
4.层级选择器：
选择器1 选择器2...
5.群组选择器：同时选中所有,用逗号隔开。
</textarea>
</div>
<div id="form1" align="center">
<h3 align="left"><a href="#zs_dian">伪代选择器</a></h3>
</div>
<div id="b_form" align="left">
<textarea id="textarea" name="textarea" rows="" cols="" disabled="disabled">
伪类选择器的语法：
1. 选择器：状态
link：超链接对应的是初始状态
visited：超链接访问后的状态
hover：鼠标悬停在标签上的时候对应的状态
active：鼠标按住时的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，
要遵守爱恨原则（先爱后恨）
LOVe HAte
</textarea>
</body>
</html>
结果截图如下：
image.png
