表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
表单标签：form标签
表单标签是用来收集用户信息的。是一个容器，用来获取这个标签中相应的其他标签的数据
可以将收集到的数据，通过method相应的方式，去发送请求(发送给action对应的接口)
-->
<form action="homework.html">
<!--
input标签，单标签
type属性:
text(默认下)-文本输入框
password-密码框
radio-单选框
value值表示是否选中
将多个radio框中只选中一个，可以将name值给相同值，提交时name=value
checked属性:设置默认选中
checkbox-复选框
将多个checkbox的name值给一样
button-普通按钮
submit-提交按钮
自动将当前form标签中设置了name属性的input标签对应的值通过method方法提交到action的
reset-重置按钮
将当前form中内容全部重置到初始状态
file-文件域
可用于本地提交文件
name属性:标签的名字
value属性:标签中默认值
input标签中的值-提交数据给服务器时是以name=value的方式传值
placeholder属性:输入框的提示信息
-->
用户名:<input type="text" name="user" value="" placeholder="输入用户名" maxlength="8"/><br />
密码:<input type="password" name="pwd" value="" placeholder="输入密码" maxlength="6"/><br />
性别:
<input type="radio" name="sex" value="male" >男
<input type="radio" name="sex" value="famale" checked="">女<br />
爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="swim">游泳
<input type="checkbox" name="hobby" value="tennis">网球 <br />
<input type="button" name="" value="button"/><br />
<input type="submit" name="" value="确认" />
<input type="reset" name="" value="重置" />
<input type="file" name="icon"/>
</form>
<body>
</body>
</html>
效果:
下拉多行文本按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
下拉和多行文本域可以放在form标签中用于收集信息
下拉菜单:select标签
一个select标签对应一个下拉菜单，菜单的选项要通过option来列举
option属性-为下拉菜单中每一个子项
optgroup属性-用于对多个同类子项分组
selected属性-设置默认选中的子项
-->
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="绵阳">绵阳</option>
<option value="南充" selected="selected">南充</option>
<option value="遂宁">遂宁</option>
</optgroup>
<optgroup label="其他">
<option>重庆</option>
<option>湘潭</option>
<option>长沙</option>
<option>沈阳</option>
</optgroup>
</select>
<select name="year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<hr />
<!--
多行文本域: textarea标签
name:提交数据对应的名字
rows:默认一屏对应的行数
cols:默认的列数
placeholder:设置占位符
disabled:禁用
maxlength:结束能输入的最大的字符数
-->
<textarea name="message" maxlength="200" rows="10" cols="20">
</textarea>
<!--
按钮: button标签
-->
<button><img src="img/yasuo.jpg" alt="亚索"/></button>
</body>
</html>
效果:
div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div和span标签是空白标签，没有语义
一般用来做分组(将网页分块)
div是块级标签 一行只能放一个
span是行内标签 一行可以放多个
块级标签和行内标签
块级标签:一个占一行
h1-h6 p 列表标签(il ol dl li) table hr
行内标签:一行可以有多个
img a input button select textarea
-->
<span><a href="">aaa</a></span>
<span>bbb</span>
<div id="">
<a href="">百度</a>
<a href="">新浪</a>
</div>
<div id="">
<a href="">谷歌</a>
<a href="">苹果</a>
</div>
</body>
</html>
效果:
css基础
<!--
css是web标准中的表现标准,用来规定网页上内容的布局和样式(层叠样式表)
目前广泛使用的是CSS3
分类:
内联样式表
将样式写在标签的style属性中(每个可见标签都有style属性)
内部样式表
将样式表写在head标签中的script style="text/css"里面
外部样式表
注意: 内联样式表的优先级最高 其次内部样式表和外部样式表的优先级根据读取的顺序，在后面的优先级高
固定语法:
选择器{属性1:属性值1;属性2:属性值2;...}
选择器-选择器的作用是用来确认后面的样式是给哪些标签写的
属性-是css中本来就支持和拥有的属性，属性顺序随意
属性和属性值冒号连接
属性后面必须是分号
属性值-数值:如果是数值用来表示大小,后面接单位px或%
颜色-颜色对应的英语单词;#RGB16进制; rgb() rgba() a表示透明度;hsl() H色相S饱和度L明度 hsla()
常见的属性:
color:设置字体颜色
background-color:背景颜色
width:高度
height:高度
font-size:字体大小
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠样式表</title>
<style type="text/css">
img{
height:200px;
width: 300px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/yasuo.css"/><!-- 外部样式表 -->
</head>
<body>
<p style="font-size:20px; color:chartreuse">此处使用了内联样式</p>
<h1>其随疾风前行，身后亦须留心</h1>
<h2>长剑漫漫，唯剑作伴</h2>
<h3>明日安在，无人能与</h3>
<a href=""> <img src="img/2.jpg"/> </a>
</body>
</html>
效果:
选择器
<!--
常用的选择器:
标签/元素选择器:直接将标签名作为选择器, 同时选中网页中所有同类型的标签
a{} -- 选中所有的a标签
id选择器:通过 #id属性值{}
id属性:所有的标签都有id属性,且是唯一的
class选择器:通过在class属性值前加 . 以构成类选择器。选中class等于对应的值的标签
.c1{}
群组选择器:多个选择器中间使用逗号隔开，选中所有的单独的选择器。
a,p,#p1,.c1{} -- 选中所有的a标签，p标签和所有id值为p1以及所有class值为c1的标签
包含选择器:多个选择器之间使用逗号隔开,从前往后找，找到最后一个选择器
div .c1 p{} -- 选中div下.c1 下p标签(可以是直接子标签或间接子标签)
通配符*:直接将*作为选择器，选中当前页面所有的标签
选择器的优先级:通过不同的选择器选中了同一个标签，并且设置了同一个属性，就看选择器的优先级,优先级就比较权重
权重值一样的情况下,谁后写，优先级高
伪类选择器:0001
元素选择器:0001
class选择器:0010
id选择器；0100
群组选择器:直接看单独每一个的权重
包含选择器:所含选择器的权重和
通配符:0001
注意: 不管选择器的权重如何，内联样式表的优先级始终最高。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1{
font-family: "arial narrow";
font-size: x-large;
color: crimson;
}
.c1{
color: darksalmon;
font-size: xx-large;
}
div .c1 p{
color: chartreuse;
font-family: fantasy;
}
</style>
</head>
<body>
<div id="p1">
<p>让我们去猎杀那些陷于黑暗中的人吧.</p>
</div>
<div id="p1">
<p>廉颇老矣，尚能饭否?</p>
</div>
<span class="c1">无丝竹之乱耳，无案牍之劳行</span>
<div>
<div class="c1">
<p>我们去大草原的湖边</p>
<p>等候鸟飞回来</p>
<div>
<p>等我们都长大了</p>
<p>就生一个娃娃</p>
</div>
</div>
</div>
</body>
</html>
效果:
伪类选择器
<!--
伪类选择器选中标签的某个状态
伪类选择器:选中某个标签的不同状态(适用于超链接和按钮)
语法:
标签选择器:状态{}
状态:
link 初始状态(a标签对应的初始状态没有访问成功过的状态)
visited 访问后的状态(使用a标签)
hover 鼠标悬停在标签上的状态
active 被激活对应的状态(一般用于超链接,在鼠标按下不动的状态)
爱恨原则: 先爱后恨（LoVeHAte）
如果想要给一个标签同时给link\visited\hover\active中两个或以上的状态设置样式，需要遵守爱恨原则(不遵守可能出现问题)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color:gray;
}
a:visited{
color: darkred;
}
a:hover{
color:deeppink;
font-size: 20px;
}
#a2:hover{
color:darkmagenta;
font-size: 20px;
}
a:active{
color:cadetblue;
font-family: "book antiqua";
font-size: 16px;
}
input:focus{
outline-color: #E9967A;
}
</style>
</head>
<body>
<a href="http://www.tencent.com">英雄联盟</a><br />
<a id="a2" href="http://www.tencent.com">英雄联盟</a><br />
<input type="text" name="" placeholder="mmmmm" />
</body>
</html>
效果:
