<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day2</title>
<style type="text/css">
h2{
background: rgba(200,200,200,0.7);
width: 30%;
}
h3{
color: crimson;
padding: 5px 5px;
}
p{
padding: 0px 40px;
}
</style>
</head>
<body bgcolor=whitesmoke>
<div id="01">
<h2>01-表单标签</h2>
<h3>表单标签</h3>
<p>
1.可以提交表单中收集的信息
action属性:设置提交信息的位置
method属性：提交方式 - post/get
</p>
<h3>input标签（单标签） -- text(文本输入框)</h3>
<p> 1.是表单标签<br />
2.type属性：<br />
text - 普通的文本输入框<br />
3.name属性: 必须设置（a.用于提交信息）<br />
4.value属性: 标签内容<br />
5.placeholder属性:占位符（提示信息）<br />
6.maxlength: 输入框最多能输入的字符个数<br />
7.readonly:readonly - 输入框只读(不能往里面输入内容)
</p>
<h3>input标签- 密码输入框</h3>
<p> 1.type属性: password --- 输入的值是密文显示</p>
<h3>input标签：单选按钮</h3>
<p>
1.type属性：radio<br />
2.name: 同一类型对应的name值必须一样<br />
3.value：设置选中按钮提交的值<br />
4.checked: 设置为checked，让按钮默认处于选中状态
</p>
<h3>input标签:多选按钮</h3>
<p>
1.type：checkbox<br />
2.name：同一类型对应的name值必须一样<br />
3.value：设置选中按钮提交的值<br />
4.checked: 设置为checked，让按钮默认处于选中状态
</p>
<h3>input标签：普通按钮</h3>
<p>disabled:disabled - 让按钮不能点击</p>
<h3>input标签：重置按钮</h3>
<p>让当前所在的form中的所有表单相关标签对应的值，回到最初的状态</p>
</div>
<div id="02">
<h2>02-下拉菜单和多行文本域</h2>
<h3>fieldset：</h3>
<p>
一个fieldset标签对应一个表单分组<br />
legend标签：设置分组名
</p>
<h3>下拉菜单+多行文本域</h3>
<p>
<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="北京">北京</option>
<option value="大连">大连</option>
<option value="青岛" selected="selected">青岛</option>
</p>
<p>
<textarea name="message" rows="2" cols="100" placeholder="请输入意见..." maxlength="200"></textarea>
</p>
</div>
<div id="03">
<h2>03空白标签</h2>
<h3>html中标签分为两大类：</h3>
<p>
1.块级标签：一行只能有一个(不管标签的宽度是多少)<br />
h1-h6, p, hr, 列表标签，table, form,
<br />
2.行内标签：一行可以有多个<br />
a, img, input,下拉列表(select), textarea
<br />
div标签，是空白标签，没有任何特殊的意义(无语义标签)
</p>
</div>
<div id="04">
<h2>04-认识css</h2>
<h3>1.什么是CSS</h3>
<p>
CSS是web标准中的表现标准，用设置网页上的标签的样式（长什么样，在哪儿）<br />
CSS代码/CSS文件，我们叫样式表<br />
目前我们使用的是CSS3。<br />
</p>
<h3>2.写在哪儿</h3>
<p>
内联样式表：将css代码写在标签的style属性中<br />
内部样式表：写在head标签中的style标签的内容中<br />
外部样式表：写在一个css文件中，通过head中的link标签来关联<br />
优先级: 内联的优先级最高；内部和外部没有绝对优先，主要看同一个属性谁最后赋值，谁就有效
</p>
<h3>3.怎么写(CSS语法)</h3>
<p>
选择器{属性:属性值; 属性：属性值;}<br />
选择器： 用来选中需要设置样式的标签<br />
属性：css属性（css2中的属性有两百多个）<br />
属性值：如果属性值是数字，表示的是大小要在后面加px<br />
注意：每个属性之间要使用分号隔开，否则属性无效
</p>
<p>
补充属性: color: 设置字体颜色 background-color:设置背景颜色 width：标签的宽度 height：标签的高度
</p>
</div>
<div id="05">
<h2>05-css选择器</h2>
<h3>1. 元素选择器(标签选择器)：标签名</h3>
<p>选中所有的标签名对应的标签</p>
<h3>2.id选择器：#id属性值</h3>
<p>每个标签都有一个id属性，整个html中，id的值必须唯一</p>
<h3>3.class选择器：.class属性值</h3>
<p>每个标签都有一个class属性，</p>
<h3>4.通配符：*</h3>
<p>选中所有的标签 </p>
<h3>5.层级选择器：选择器1 选择器2...</h3>
<h3>6.群组选择器：选择器1，选择器，....</h3>
</div>
<div id="06">
<h2>06-伪类选择器</h2>
<h3>伪类选择器: 选择器:状态</h3>
<p>
link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态<br />
visited: 超链接访问后的状态 --- 已经访问成功后的状态<br />
hover: 鼠标悬停在标签上对应的状态<br />
active：鼠标按住的状态
</p>
</div>
</body>
</html>
内容.png
网友评论