day22
2018-08-14 本文已影响0人
木偶演员
01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="">
<!--可以提交表单收集的信息
action 提交信息的位置,也是接口
method 提交方式-->
<input type="" name="" id="" value="" placeholder=""/>
<!--type 属性: txet--普通的文本输入
name--必须设置,用于提交信息
value--输入框的内容
placeholder--占位符,输入信息提示用
属性: password 密码输入,密文显示
属性: radio(单选框)
name---同一类型,名字必须相同
name 同一类型的那么必须相同,
value---
check : 默认设置选中按钮提交的值
属性: checkbox (多选)
name---统一类型必须相同
属性 : button(按钮)
属性: reset 重制from中所有的表单相关标签对应的值(回到最初的状态)
-->
</form>
</body>
</html>
02
<!--嘿嘿,走过的路,都要变成风景.-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<!--一个fieldset标签对应一个表达分组-->
<fieldset id="">
<legend>1</legend>
</fieldset>
<!--下拉菜单-->
<select name="">
<option value="">成都</option>
<option value="">重庆</option>
<option value="">北京</option>
<option value="">大连</option>
<option value="" selected="selected">青岛</option> <!--默认选中-->
</select>
<!--多行文本域()-->
<textarea name="" rows="2" cols="50"></textarea>
<input type="submit" value=""/>
</form>
</body>
</html>
03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--htlm中的标签分为
块级标签: 一行只能有一个(不管标签的宽度)
h1--h6 p标签 hr标签 列表 , 表格
行内标签: 一行写多个
a img input 下拉列表 ,多行输入框
-->
<!--空白标签:没有任何的意义,(无语义标签)-->
<div id="">
</div>
<span id="">
</span>
<body>
</body>
</html>
04
<!--学习能力太差,所以才来培训吧.自制力也差,所以又来培训把-->
<!--
1.CSS是web标准中,用设置网页的样式(长得样子)
CSS文件CSS代码叫做样式表,目前我们使用的是CSS3
网页布局,样式
2.写在那?
A.内部样式表: 将CSS代码写在标签的style属性中
B. 写在head的style中 里面有是元素选择器
C. 外部写CSS文件 link连接
3. 怎么写
A.选择器(属性:属性值;属性:属性值)
B. 写在head的style中 里面有是元素选择器:选中需要设置样式的标签
C. 属性: 外部写CSS文件 link连接
属性补充: color--字体颜色 bgcolor--背景颜色 width--标签宽度 height--标签高度
优先级: 内联的优先级最高,内部和外部没有绝对的优先级,主要看同一个属性是谁最后赋值,谁就有效
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--专门用来设置样式的标签-->
<style type="text/css">
div{/*元素选项器*/
background-color: yellow;
}
</style>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
</head>
<body>
<div id="">
说我是
</div>
</body>
</html>
05
<!--
1.标签选择器
选中所有的标签对应的标签
2.id 选择器
语法: #id属性值
每个标签都有一个id属性,整个HTMl中,id的值必须唯一
3.class选择器
语法: .class属性值
每个标签都有一个class属性
4.通配符: *号
选中所有的标签
5.层级选择器
语法: 选择器1 选择器2 ...
6.群组选择器
同时选中想选择的标签,用逗号隔开
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a1{
color:rgb(255,0,0);/*1.颜色英语单词 2. 16进制的颜色值 00-ff 前面加#号 3. rgb值 一.rgb() 二.rgba() */
}
.c1{
color: blue;
}
</style>
</head>
<body>
<a href="" id="a1">我是</a>
<p class="c1">我是</p>
<div id="">
我是
</div>
</body>
</html>
06
<!--
语法: 选择器:伪类选择器
1. :link
对应的是超链接的初始状态,(一次都没有访问成功的状态)
2. :visited
超链接访问后的状态
3. :hover
鼠标悬停在标签时对应的状态
4. :active
鼠标按下的状态
爱恨原则:
给同一个标签设置通过伪类选择器给不同状态设置不同的样式
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
