目录
一、表格与表单
表格
显示行和列结构的标签
<table border="2px" cellpadding="5" cellspacing="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td>张三丰</td>
<td>99</td>
<td rowspan="2">男</td>
<td><a href="#">删除</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td>灭绝</td>
<td>45</td>
<td><a href="#">删除</a></td>
<td><a href="#">修改</a></td>
</tr>
</table>表单介绍
描述：用于前后端交互，如：注册，登录功能，输入账号和密码后，点击登录，数据传到后端，都是表单的操作
<!--表单：form
表单属性：action，method（这两个是常用），enctype
action：和a标签的href类似，可以跳转，后续往往跳到后端服务器
method：请求方式， get/post
get请求：（默认）将数据从url中传到后端，参数格式为？name=wyz&age=45&..
post请求：以请求体的方式传数据到后端
区别：get效率高，不安全 post效率低，安全
entype：表单提交的类型（了解）
application/x-www-form-urlencoded：默认 文本形式提交内容
multipart/form-data：提交二进制数据 例如：上传图片
子标签：input 使用type表示不同的表单控件
-->
<form action="01_表格.html">
文本框：<input type="text" name="username" value="wyz" /><br />
密码框：<input type="passwor" name="password" /><br />
单选框：<input type="radio" /><br />
复选框：<input type="checkbox" /><br />
日期框：<input type="date" /><br />
日期和时间：<input type="datetime" /><br />
本地时间：<input type="datetime-local" /><br />
时间：<input type="time"/><br />
邮箱控件：<input type="email" /><br />
数字控件：<input type="number" /><br />
取色：<input type="color" /><br />
隐藏控件：<input type="hidden" /><br />
文件控件：<input type="file" /><br />
范围控件：<input type="range" /><br />
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="image" src="../img/009.png" width="50px" height="30px"/>/*这里要注意单位都是要带px*/
</form>常用控件
常用于注册和登录功能中，以及很多其他的前后端交互的触发中
<form>
用户名：<input type="text" /><br />
密码：<input type="password" /><br />
性别：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br />
爱好：<input type="checkbox" name="love" />吃
<input type="checkbox" name="love" />喝
<input type="checkbox" name="love" />玩<br />
省份：<select>
<option>湖南</option>
<option>贵州</option>
<option>云南</option>
<option>重庆</option>
</select><br />
基本介绍：<textarea rows="10" cols="30">
本人22岁，爱好唱跳rap，篮球
</textarea><br />
<input type="submit" value="注册" />
</form>二、框架集
将多个子页面集成到一起，形成了页面的集合，叫做框架集
框架集不能和body共同使用
基本应用
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset cols="30%,30%,*"> <!-- 按列划分子页面 -->
<frame src="a.html" />
<frame src="b.html" noresize="noresize" />
<frame src="c.html" />
</frameset>/*注意这里再其他位置要单独设立a.html;b.htl;c.html然后设置一个index或者一个总的框架集合的html文件在运行，否则运行不出结果*/应用案例
/*设立一个contend.html文件，之后使用类似于锚点的形式将超链接页面的内容呈现再这个区域内*/
<body bgcolor="blue">
</body><!-- contend.html页面 -->
<body bgcolor="green">
</body><!-- index.html页面 -->
<frameset rows="20%,*">
<frame src="head.html" />
<frameset cols="15%,*">
<frame src="menu.html" />
<frame src="content.html"name="yy"/>
</frameset>
</frameset>
/*这是设立框架集的html文件*/<!-- menu.html页面 -->
<body bgcolor="orange">
<a href="http://www.sina.com.cn"target="yy">新浪一下</a><br />
<a href="http://www.360.com"target="yy">新浪一下</a>
/*这一块区域是通过超链接的形式将内容呈现给前面的一个页面*/三、CSS概述
概述：层叠样式表，也就是多种样式效果叠加到同一页面中；如果有冲突，则选择优先级高的
与HTML的关系：HTML是毛坯房，CSS是内外墙装修
作用：美化页面效果，可以是标签的内容与样式效果分离；实现复用性
样式分类
<head>
<meta charset="UTF-8">
<title></title>
<!-- 3.外部样式：复用性比内部样式更强 -->
<link rel="stylesheet" type="text/css" href="../css/text.css" />/*实现外部样式效果时还要在CSS
文件夹中新建一个CSS文件*/
<style type="text/css">
/*2.内部样式 通过选择器的方式，来设置样式效果
* 结构：选择器名{属性：值；}*/
h1{
color: blue;
font-size: 48px;
}
</style>
<!-- 应用场景：
1.在项目中常用外部样式
2.在现有页面测试中常用内部样式
3.行内样式很少用，简单测试可用一下
优先级：内敛>（内部=外部。要看顺序）
-->
</head>
<body>
<!-- 1.行内（内联）样式：出现在当前标签中（不推荐） -->
<h1 style="color: red;font-size: 50px ;">一级标题</h1>
<h1>一级标题1</h1>
<h1>一级标题2</h1>
</body>
</html>h1{
color: green;
font-size: 52px;
} /*这是实现外部样式时所需要的CSS
文件中书写的内容，也可以书写更多的其他内容*/ 四、选择器
描述：用于给标签加样式效果
分类：标签选择器、类选择器、ID选择器、通配符选择器
基本选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 1.标签选择器 标签名{属性：值}*/
h3{
color: red;
}
/* 2.类选择器 .；类名{属性：值} 类名在标签中设置*/
.yy{
color: green;
}
/* 3.ID选择器 #id名{属性：值}id名在标签汇总设置*/
#dd{
color: blue;
}
/* 4.通配符选择器 *{属性：值} *代表通配所有标签*/
*{
color: yellow;
}
</style>
</head>
<body>
<div>容器层</div>
<h1 class="yy">一级标题</h1>
<h3 id="dd" class="yy">三级标题</h3>
<p>段落</p>
</body>属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 结构：选择器[属性='值'][属性2='值2']{属性：值}*/
h1[aa="a"][bb]{
color: red;
}
</style>
</head>
<body>
<h1 aa="a" bb="b" >一级标题1</h1>
<h1 aa="a">一级标题2</h1>
</body>伪元素选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*伪元素选择器：a：状态{属性：值}*/
a:link{/*静止状态*/
color: red;
}
a:hover{/*悬停状态*/
color: green;
}
a:active{/*激活状态*/
color: yellow;
}
a:visited{/*完成状态*/
color: #0f;
}
</style>
</head>
<body>
<h1><a href="#">让我们一起来看看</a></h1>
</body>层次选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*有基本选择器组合而成，包含后代，子代，相邻兄弟选择器*/
/* 1.后代选择器 父 后代{属性：值}后代起作用*/
/*ul a{color: red;}*/
/* 2.子代选择器 父>子{属性：值}儿子起作用*/
/*ul>a{color:red;}*/
/* 3.相邻兄弟选择器 选择器+选择器{属性：值}*/
/*这里要学会判断当使用不同的选择器时会呈现出什么样的效果*/
ul+a{
color: red;
}
</style>
</head>
<body>
<ul>
<li><a>春眠不觉晓</a></li>
<li><a>处处闻啼鸟</a></li>
<li><a>夜来风雨声</a></li>
<a>花落知多少</a>
</ul>
<a>ul以外的a</a>
</body>五、样式属性
接下来会说明一些其他属性：文本属性、字体属性以及背景属性
基本样式属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
font-size: 40px;
font-family: "微软雅黑";/*字体家族*/
font-style: italic;/*字体样式-斜体*/
font-weight: bold;/*字体权重-加粗 100~500细体 600~900粗体*/
/* 2.文本属性*/
text-align: center;/*文本对齐方式*/
text-indent: 50px;/*文本缩进*/
text-decoration: line-through;/*划线修饰-删除线*/
color: green;/*文本颜色*/
/*height：120px*/ /*行高*/
line-height: 420px;/*垂直居中的行高*/
word-spacing: 30px;/*单词间距，需要用空格隔开内容*/
/*x轴坐标 y轴坐标 模糊值 阴影颜色*/
text-shadow: 10px 10px 10px gray;/*文本阴影*/
background-color: deepskyblue;
background-image: url(../img/IF分支.png);
background-repeat: no-repeat;
background-position: 30px 50px;
/*background: deepskyblue url(../img/IF分支.png) no-repeat 30px 50px;*/
}
</style>
<div>这里是样式属性</div>
</head>
<body>
</body>列表属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ol{
list-style-type: disc;
list-style-image: url(../img/IF分支.png);
list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>三国演义</li>
<li>水浒传</li>
<li>红楼梦</li>
<li>西游记</li>
</ol>
</body>尺寸与显示
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
/*尺寸*/
width: 100px;
height: 50px;
background-color: royalblue;
/*显示属性：与块级元素，行级元素有关
* 值为block-块级元素，div默认为块级（带换行）
* 值为none-隐藏软件
* 值为inline-行级元素（不带换行，且无宽高效果）
* 值为inline-block：行级块（不带换行，但保留宽高效果
*/
display: inline-block;
}
</style>
</head>
<body>
<div>尺寸大小1</div>
<div>尺寸大小2</div>
</body>
扫一扫
755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
