<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/zj.css" />
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color: deepskyblue;
}
a:visited {
color: purple;
}
a:hover {
font-size: 25px;
color: red;
}
a:active {
background-color: yellow;
}
</style>
</head>
<body>
<h1>day30-总结</h1>
<ul>
<li><a href="#1">表单标签form</a></li>
<li><a href="#2">下拉菜单和多行文本</a></li>
<li><a href="#3">空白标签</a></li>
<li><a href="#4">初识css</a></li>
<li><a href="#5">css选择器</a></li>
<li><a href="#6">伪类选择器</a></li>
</ul>
<div id="1">
<div class="hf">
<strong>表单标签form</strong>
</div>
表单标签<br />
专门用来收集信息的标签，可以提交表单中收集的信息<br />
action属性：设置提交信息的位置<br />
method属性：提交方式 - post/get
<br />
<form action="" method="post"><br />
input type="submit" value=""/><br />
</form><br />
<br />
input标签 (单标签) <br />
1.是表单标签 <br />
2.type属性：<br />
<table border="1">
<tr><td>text - 普通的文本输入框</td></tr>
<tr><td>password - 密码输入框，输入的值密文显示</td></tr>
<tr><td>radio - 单选按钮，
同一类型对应的name值必须一样，
value设置按钮提交的值，
checked设置为checked使其处于选中状态</td></tr>
<tr><td>checkbox - 多选按钮，
同一类型对应的name值必须一样，
value设置按钮提交的值，
checked设置为checked使其处于选中状态</td></tr>
<tr><td>button - 普通按钮</td></tr>
<tr><td>reset - 重置按钮，
重置当前所在的form的各标签的值</td></tr>
<tr><td>file - 文件选择器</td></tr>
</table>
3.name属性：必须设置(a.用于提交信息) <br />
4.value属性：标签内容 <br />
5.placeholder属性：占位符(提示信息) <br />
6.maxlength属性：限制最多输入位数 <br />
7.readonly：输入框只读 <br />
8.disabled属性：按钮不可点击 disabled:disabledbr <br />
<br />
fieldset标签 <br />
一个fieldset标签对应一个表单分组 <br />
legend属性：设置分组名 <br /> <br />
<form action="" method="get">
<fieldset id="">
<legend>账号信息</legend>
<p>用户名：<input type="text" name="name" id="name" placeholder="请输入姓名" /></p>
<p>密码：<input type="password" name="pwd" id="pwd" placeholder="请输入密码" maxlength="8"/></p>
</fieldset>
<fieldset id="">
<legend>个人信息</legend>
<p>性别：<input type="radio" name="sex" id="sex" value="m" checked="checked"/>男
<input type="radio" name="sex" id="sex" value="f"/>女</p>
<p>爱好：<input type="checkbox" name="habbits" id="habbits" value="篮球"/>篮球
<input type="checkbox" name="habbits" id="habbits" value="足球"/>足球
<input type="checkbox" name="habbits" id="habbits" value="乒乓球"/>乒乓球 </p>
<p><input type="file" name="file" id="file" value="选择文件" /></p>
</fieldset>
<input type="reset" value="重置"/> <input type="button" value="按钮"/>
<input type="submit" value="提交信息"/>
</form>
</div>
<br />
<br />
<br />
<div id="2">
<div class="hf">
<strong>下拉菜单和多行文本</strong>
</div>
1.下拉菜单 <br />
selected="selected"表示默认选中 <br />
<select name="city"> <br />
<option selected="selected" style="display: none;">请选择城市</option> <br />
<option value="无选项">无选择</option> <br />
<option value="成都">成都</option> <br />
<option value="遂宁">遂宁</option> <br />
<option value="北京">北京</option><br />
<option value="青岛">青岛</option><br />
</select>
<br />
<select name="city">
<option selected="selected" style="display: none;">请选择城市</option>
<option value="无选项">无选择</option>
<option value="成都">成都</option>
<option value="遂宁">遂宁</option>
<option value="北京">北京</option>
<option value="青岛">青岛</option>
</select> <br />
<br />
2.多行文本 <br />
<textarea name="story" id="story" placeholder="请输入你的故事" style="width: 300px;height: 150px;" maxlength="400"><"/textarea>
<textarea name="story" id="story" placeholder="请输入你的故事" style="width: 300px;height: 150px;" maxlength="400"></textarea>
</div>
<br />
<br />
<br />
<div id="3">
<div class="hf">
<strong>空白标签</strong>
</div>
html中的标签分为2大类：<br />
块级标签：一行只能有一个(不管标签的宽度是多少) <br />
h1-h6，p，hr，ol，ul，dl，table，form，div <br />
行内标签：一行可以有多个 <br />
a，image，input，select，textarea，span <br />
div和span标签，是空白标签，没有任何特殊的意义(无语义标签) <br />
<br />
<div style="background-color: red; width: 100px; float: left;">
我是div
</div> <br />
<div style="background-color: yellow; width: 90px; float: left;">
我是div
</div> <br />
<div style="background-color: blue; width: 120px; float: left;">
我是div
</div> <br />
<span style="background-color: green;">
我是span
</span> <br />
<br />
<div style="background-color: red; width: 100px;">
我是div
</div>
<div style="background-color: yellow; width: 90px;">
我是div
</div>
<div style="background-color: blue; width: 120px;">
我是div
</div>
<span style="background-color: green;">
我是span
</span>
</div>
<br />
<br />
<br />
<div id="4">
<div class="hf">
<strong>初识css</strong>
</div>
1.什么是css <br />
CSS是web标准中的表现标准，用来对网页上标签的样式进行设置(长什么样，在哪) <br />
css代码/css文件，称其为样式表 <br />
目前我们使用的是CSS3 <br />
<br />
2.写在哪儿<br />
内联样式表：将css代码写在标签的style属性内 <br />
内部样式表：写在head标签中的style标签的内容中<br />
外部样式表：写在一个css文件中，通过head'中的link标签来关联<br />
优先级：内联的优先级最高，内部外部后加载优先级高<br />
<br />
3.怎么写<br />
选择器{属性：属性值； 属性：属性值} <br />
选择器：用来选中需要设置样式的标签 <br />
属性：css属性 <br />
属性值：数字且表示大小要加px或者% <br />
注意：属性之间用；隔开 <br />
<br />
补充属性：color：设置字体颜色 background-color：设置背景颜色 width：设置宽度 height：设置高度 <br /> <br />
1.关联外部样式表 <br />
<link rel="stylesheet" href="css/index.css" /><br />
2.style标签 <br /> <br />
<style type="text/css"> <br />
div{
background-color: yellowgreen;
} <br />
</style> <br />
</div>
<br />
<br />
<br />
<div id="5">
<div class="hf">
<strong>css选择器</strong>
</div>
选择器 <br />
0.元素选择器(标签选择器)：标签名 <br />
选中所有的标签名对应的标签 <br />
1.id选择器：#id属性值 <br />
每个标签都有一个id属性，整个html中，id的值必须唯一 <br />
2.class选择器：.class名 <br />
给标签设置class属性，通过class属性引用样式 <br />
3.通配符：* - 选中所有的标签 <br />
4.层级选择器：选择器1 选择器2...{} <br />
5.群组选择器：选择器,选择器,...{} <br />
补充：css中的颜色值： <br /><br />
1.颜色的英文单词<br />
2.16进制颜色值0-255 -- 00-ff(#ff0000-红色)<br />
3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) 透明度 0-1<br /> <br />
<style type="text/css"> <br />
.c2 p{
color: blue;
} <br />
* {
font-size: 25px;
} <br />
.c1 {
background-color: green;
} <br />
a {
text-decoration: none;
background-color: yellow;
} <br />
#a1 {
color: rgb(255,0,0);
} <br />
h1,span {
color: gold;
} <br />
<"/style>
</div>
<br />
<br />
<br />
<div id="6">
<div class="hf">
<strong>伪类选择器</strong>
</div>
伪类选择器 <br />
选择器:状态 <br />
:link - 超链接的初始状态 <br />
:visited - 超链接访问后的状态 <br />
:hover - 鼠标悬停到标签上的状态 <br />
:active - 鼠标点击时的状态 <br />
给同一个标签通过伪类选择器给予不同状态的样式时要遵循 <br />
LoVe HAte <br />
<style type="text/css"> <br />
a {
text-decoration: none;
} <br />
a:link {
color: deepskyblue;
} <br />
a:visited {
color: purple;
} <br />
a:hover {
font-size: 25px;
color: red;
} <br />
a:active {
background-color: yellow;
} <br />
<"/style> <br />
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</div>
</body>
</html>
效果图
image.png
image.png
image.png
