概述：
HTML基本标签
表单标签
CSS引入方式
CSS选择器
CSS盒子模型(Box模型)
CSS浮动(float)
一：HTML概述
HTML（Hyper Text Markup Language）：超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。
*******HTML基本结构
DOCTYPE声明 //( <!DOCTYPE html>)
<head>
<title>标签</title>
<meta 标签 /> //如charset=gbk(网页字符编码)
</head> //主要包括网页的基本信息
网页标题元数据标签
<body></body> //主要包括网页内容
二：HTML基本标签
1. 标题标签(数字越小标题字体越大)
<h1>一级标题</h1>
....
<h6>六级标题</h6>
2. 段落标签 <p>…</p> 注意：若只是在编写代码时换行而没有使用</p>，那么实际运行时字符不会换行
3. 换行标签 <br/> //为单标签，单独使用
4. 水平线标签 <hr/> //运行效果为网页中出现一条横线
5. 注释 <!-- 注释内容 -->
---------------------------------------
-------------------------------------
6. 图像标签
<img src="path" alt="text" width="x" height="y" /> //src:图像地址 alt:图像的替代文字 width,height:图像宽高
7. 链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a> //href:链接路径 target常用值：_self、_blank
超链接使用场合
a. 页面间链接 ：从一个页面链接到另外一个页面
b. 功能性链接 :电子邮件,迅雷,QQ
eg. b<a href="mailto:xxx@qq.com">联系我们</a>
8. HTML列表
(1)无序列表:<ul> <li>桔子</li> <li>香蕉</li> </ul>
ul标签的type属性取值: disc ：项目符号显示为实体圆心,默认值
square : 项目符号显示为实体方心
circle : 项目符号显示为空心圆
(2)有序列表:<ol> <li>桔子</li> <li>香蕉</li> </ol>
ol标签的type属性取值: 1 : 使用数字作为项目符号
A/a：使用大写/小写字母作为项目符号
I/i ：使用大写/小写罗马数字作为项目符号
9. 表格
<table> // 表格标签
<tr> //行标签
<td>第1个单元格的内容</td> //单元格标签
<td>第2个单元格的内容</td>
……
</tr></table>
（1）对其方式
表格对齐方式： 默认对齐、居中对齐、左对齐、右对齐
单元格对齐方式： 水平对齐方式、垂直对齐方式
（2）表格的跨行和跨列
跨列：<td colspan="n"> //n为所跨列数
跨行：<td rowspan="n"> //n为所跨行数
三：表单标签
表单(form)：是用来接收用户信息的标签
1. 表单语法
<form method=“” action=“请求服务器端路径">
<p> 名字：<input name=“" type="" value=""> </p>
</form>
说明：
(1)method 规定如何发送表单数据常用值：get | post(在实际网页开发中通常采用post方式提交表单数据)
(2)type 指定元素的类型。text(文本框)、password（密码框）、checkbox(复选框)、radio(单选按钮)、submit(提交按钮)、reset(重置按钮)、file、hidden、image(图片按钮) 和 button(普通按钮)，默认为 text
(3)name 指定表单元素的名称
(4)value 元素的初始值, type 为 radio时必须指定一个值
(5)size 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
(6)checked type为radio或checkbox时，指定按钮是否是被选中
(7)maxlength type为text 或 password 时，输入的最大字符数
2.表单元素
(1)文本框：<input type="text" name="userName" value="用户名" maxlength="20" >
(2)密码框：<input type="password " name="pass" size="20" >
(3)单选按钮：<input name="gen" type="radio" value=“boy" checked="checked" >男
<input name="gen" type="radio" value=“girl" >女
(4)复选框：<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
(5)下拉列表框: <select name="列表名称">
<option value="选项的值" selected="selected">…</option > //选项
.....</select>
(6)按钮：<input type="reset" name="butReset" value="reset按钮">
<input type="image" src="images/login.gif" /> //src为图片路径
(7)多行文本域 : <textarea name="showText" cols="x" rows="y"> 文本内容 </textarea >
(8)文件域 :<form action="" method="post" enctype="multipart/form-data"> // 文件域表单编码属性
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
(9)表单元素高级属性 只读 readonly="true"
禁用 disabled="true"
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form method="post" action="url" enctype="multipart/form-data">
用户名：<input name="name" type="text"><br/>
密码：<input name="pwd" type="password"><br/>
性别：<input name="sex" type="radio" value="man" checked="true">男
<input type="radio" name="sex" value="woman">女<br/>
兴趣爱好：<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="play games">游戏
<input type="checkbox" name="hobby" value="ball"> 球类运动
<br/>
籍贯：<select>
<option value="sx" >陕西</option>
<option value="ah">安徽</option>
<option value="jx">江西</option>
<option value="xj">新疆</option>
</select><br/>
自我介绍：<br/>
<textarea name="introduce" cols="30" rows="20"></textarea><br/>
上传照片：<input type="file" name="picture"/>
<input type="submit" value="确定">
<input type="reset" value="重置">
</form>
CSS(Cascading Style Sheets)：层叠样式表。用来给html网页设置样式。
当多个选择器对同一个元素进行样式设置时，则该元素的样式为多个选择器的叠加效果(当有冲突时，按照优先级设置);
一：CSS的引入方式
1.方式一：行内样式(在html元素的style属性上设置样式)
eg. <div style=“background- color:yellow”>.........</div>
2. 方式二：页面内嵌样式 (在head标签内部声明样式)
eg.<style type="text/css"> // CSS样式表 </style>
3. 方式三：引入外部样式文件
<link rel="stylesheet" type="text/css" href="外部CSS样式文件路径">
二：CSS选择器
1.标签选择器
标签名{
CSS属性名:属性值;
... }
2.类选择器
.class类名称{
CSS属性名:属性值;
... }
3.ID选择器
#ID名称{
CSS属性名:属性值;
... }
优先级：ID选择器 > 类选择器 > 标签选择器
4.复合选择器
选择器1,选择器2,...{
CSS属性名:属性值;
... }
5. 子选择器(选择父选择器的直接子元素)
父选择器 > 子选择器{
CSS属性名:属性值;
... }
6. 后代选择器
祖先选择器 后代选择器{
CSS属性名:属性值;
... }
7. 伪类选择器(用来设置元素在不同状态下的样式)
E:hover 鼠标悬浮于元素之上的选择器
E:link 超链接未访问时状态选择器
E:active 激活状态时选择器
E:visited 访问之后的状态选择器
三：CSS盒子模型(Box模型)
border(边框)
padding(内边距,也叫填充)：元素中的内容与边框(border)之间的距离。
margin(外边距)：与相邻元素或父元素之间的距离。
content(内容)：盒子包含的内容(皇宫)。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嘻嘻</title>
<style type="text/css">
#div1{
background:pink;
width:300px;
height: 300px;
border:20px solid yellow;
padding-top: 20px;
margin-bottom: 20px;
}
#div2{
color: white;
background:red;
width:100px;
height: 100px;
border:20px solid yellow;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="mydiv" id="div1">皇宫里住着皇帝大臣···</div>
</body>
</html>
四：CSS浮动(float)
浮动属性： float:left|right 设置了float属性的元素即为浮动元素，浮动元素脱离了正常的文档流(标准流), 不遵循“从左到右,从上到下，遇块换行”的标准文档流的排布方式。
可以清除浮动：使用 clear:left|right|both
规律一：
如果某个元素是浮动元素，那么有两种情况：
这个浮动元素的上一个元素是标准流中的元素，则该浮动元素与上一个标准流元素的相对垂直位置不变。
这个浮动元素的上一个元素也是浮动元素，则这两个浮动元素在同一水平位置排列(除非两个浮动元素的宽度和超过水平位置总宽度，这种情况下该浮动元素会被“挤”到下一行)。
规律二：
设置了clear属性的元素，主动负责完成清除浮动(移动自身完成目标)。
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
#div1{
width:100px;
height:30px;
background-color:pink;
float: left;
}
#div2{
width:120px;
height:50px;
background-color:blue;
}
#div3{
width:140px;
height:70px;
background-color:red;
}
</style>
</head>
<body>
<div class="mydiv" id="div1">这是div1</div>
<div class="mydiv" id="div2">这是div2</div>
<div class="mydiv" id="div3">这是div3</div>
</body>
</html>
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
