1.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
formb表单标签
action属性：设置表单内容提交后的处理程序
method属性：表单内容提交方式，常用值有get和post两种
input标签：输入框
type：设置输入框的类型
text：文本框
password“密码框
radio：单选按钮
checkcbox：复选框
file:文件域
button：普通按钮，结合JS代码一起使用
rest:重置按钮
submit：提交按钮
image：图片按钮
checked属性：可以给单选按钮、复选框设置默认选项
textarea:文本域
select标签：下拉框，下拉选项使用option标签来实现
-->
<form action="" method="">
姓名：<input type="text"><br/>
密码：<input type="password"><br>
性别：<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
爱好：<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">棒球
<input type="checkbox">乒乓球
<input type="checkbox">羽毛球
生日：<select>
<option >1990</option>
<option >1991</option>
<option >1992</option>
<option >1993</option>
<option selected="selected">1994</option>
<option >1995</option>
</select>年
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>月
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>日
照片：<input type="file"><br>
自我介绍：<textarea cols="80" rows="10">请输入你的自我介绍</textarea><br>
<!-- 按钮 -->
<input type="reset" value="重填">
<input type="button" value="你点我一下" onclick="alert('你点我干什么')">
<input type="submit" value="登录">
<input type="image" src="img/submit.png">
</form>
</body>
</html>2.行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2 style="color:red;">望庐山瀑布</h2>
<p style="color: blue;">日照香炉生紫烟，</p>
<p style="color: blue;">遥看瀑布挂前川。</p>
<p style="color: blue;">飞流直下三千尺，</p>
<p style="color: blue;">疑是银河落九天。</p>
</body>
</html>3.内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h2{
color: red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h2>悯农</h2>
<h2>李绅</h2>
<p>锄禾日当午，</p>
<p>汗滴禾下土。</p>
<p>谁知盘中餐，</p>
<p>粒粒皆辛苦。</p>
</body>
</html>4.外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <style>
@import url(css/MyCss.css);
</style> -->
<link rel="stylesheet" href="css/MyCss.css">
</head>
<body>
<h2>赠汪伦</h2>
<p>李白乘舟将欲行，</p>
<p>忽闻岸上踏歌声。</p>
<p>桃花潭水深千尺，</p>
<p>不及汪伦赠我情。</p>
</body>
</html>
css样式：
h2{
/*
表示颜色的方式：
方式一：颜色英文单词表示法
方式二：RGB表示法 rgb(r,g,b) r,g,b分别是0-255之间的数字
方式三：RGBA表示法 rgba(r,g,b,a) r,g,b分别是0-255之间的数字 a是表示透明度，数字介于0-1之间，数字越小越透明
方式三：十六进制表示法 #------ -表示十六进制数字，从0-9，A-F
*/
/* color: red; */
/* color:rgb(255, 0, 0); */
/* color: rgba(255, 0, 0, 0.9); */
color: #f00;
}
p{
color: blue;
}5.标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: #f00;
}
a{
color: #00f;
text-decoration: none;
}
</style>
</head>
<body>
<p>标签选择器作用样式</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>6.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: #00f;
}
.second{
color: #f00;
}
</style>
</head>
<body>
<h2 class="second">七步诗</h2>
<p>煮豆燃豆箕，</p>
<p class="second">豆在釜中泣。</p>
<p class="second">本是同根生，</p>
<p class="second">相煎何太急。</p>
</body>
</html>7.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: #f00;
}
#abc{
color: #00f;
}
</style>
</head>
<body>
<h2>题西林壁</h2>
<p>横看成岭侧成峰，</p>
<p id="abc">远近高低各不同。</p>
<p>不识庐山真面目，</p>
<p>只缘身在此山中。</p>
</body>
</html>8.选择器优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#idSty{
color:#00f;
}
.classSty{
color: #0f0;
font-size: 30px;
}
p{
color: #f00;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- id选择器、class选择器、标签选择器优先级：
行内样式>id>class>标签
!important:提升样式为最高级 -->
<p class="classSty" id="idSty">你猜猜我会是什么颜色</p>
</body>
</html>9.层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
border: 1px solid red;
}
/* 选择body标签里的后代p标签 */
/* 后代选择器 E F */
/* body p{
background-color: #ff0;
} */
/* 选择body标签里的子代p标签*/
/* 子代选择器 E>F */
/* body>p{
background-color: blanchedalmond;
} */
/* 选择紧跟在类名为test的元素后面的那个相邻兄弟 */
/* 相邻兄弟选择器 E+F */
/* .test+p{
background-color: blanchedalmond;
} */
/* 通用兄弟选择器 */
/* 选择在类名为test的标签后面的兄弟p */
.test ~p{
background-color: #ff0;
}
</style>
</head>
<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p22</p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
