一、主要内容
二、HTML
head标签
1、doctype 对应关系
2、html 标签，标签内部可以写属性
3、注释： <!-- 注释的内容 -->
-
<!-- 类似html这种格式，标签，叫做html标签 -->
例如：
写一个a标签，点击跳转到指定的URL
需要在body里面写：
-
<body>
<a href="http://www.cn.bing.com";>必应</a>
</body>
4、标签分类
head下面的东西
其他都是主动闭合
-
<meta http-equiv="refresh" content="3" >
-
<meta http-equiv="refresh" content="3;Url=http://www.cn.bing.com" >
-
<meta name="keywords" content="星际2，测试"
-
<meta name="description" content="汽车之家提供权威报价">
IE主动兼容高版本
-
<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;">
搞个图标
-
<link rel="shortcut icon" href="image/favicon.ico">
小结：
head标签中：
- <meta> 编码，跳转，刷新，关键字，描述，IE兼容
- title 标签：IE上显示名称，可以为任意自定义
body标签
空格
-
<a href="http://www.cn.bing.com">必 应</a>
大于号和小于号
-
<a href="http://www.cn.bing.com">必><应</a>
p标签和br
-
<p>段落段落段落段落段落<br />段落段落段落段落段落段落段落</p>
<p>段落</p>
<p>段落</p>
实现效果：
h加大加粗，块级标签，占用一整行
-
<h1>发财</h1>
<h2>发财</h2>
<h6>发财</h6>
span标签，行内标签，只占自己
-
<span>hello</span>
<span>hello</span>
<span>hello</span>
div 标签，白板，块级标签
-
<div>1</div>
<div>2</div>
<div>3</div>
定位到右下角：
-
<div id="i1" style="position: fixed;bottom: 0;right: 0;">我要找它</div>
小结：
body标签中：
- 所有标签分为2类：块级标签（即使内容少也占一整行），行内标签（自己有多少占用多少）
- 块级标签：div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
body内标签之input系列
登录页面
input 系列：
- input type=‘text’ name属性 value=“test” 默认值
- input type='password' name 属性 value=“1234” 默认值
- input type='submit' value=“提交” 提交按钮，表单
- input type='radio' 单选框 value,name 属性（name相同则互斥） checked=checked默认选中
- input type='checkbox' 复选框 value，name属性（批量获取数据） checked=checked默认选中
- input type='file' 依赖form表单的一个属性enctype="multipart/form-data"
- <textarea>默认值放中间</textarea> - name 属性
- select标签 name，内部option value ，提交到后台，size，multiple
-
<form action="http://www.baidu.com">
<input type="text" name="user" />
<input type="password" name="pwd" />
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
分析：
向后台发数据： form标签
发给谁： form标签内的action
按钮： input标签里的type="submit"
提交默认：默认是GET 或者在form标签写上method="GET"或method="POST"
提交到别人的服务端，直接跳转
-
<form action="https://www.cn.bing.com" >
<input type="text" name="query" />
<input type="submit" value="搜索" />
</form>
选择性别然后提交到后台
-
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2" />
中：<input type="radio" name="gender" value="3" />
<input type="submit" value="提交" />
</div>
</form>
终极版本
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data ">
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" />
女：<input type="radio" name="gender" value="2" checked="checked" />
中：<input type="radio" name="gender" value="3" />
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked" />
足球：<input type="checkbox" name="favor" value="2" />
台球：<input type="checkbox" name="favor" value="3" />
网球：<input type="checkbox" name="favor" value="4" />
<p>技能</p>
干活：<input type="checkbox" name="skill" value="1"/>
搞事情：<input type="checkbox" name="skill" value="2" />
<p>上传文件</p>
<input type="file" name="fname" />
<input type="reset" value="重置" />
</div>
<input type="submit" value="提交" />
</form>
</body>
</html>
效果图：
文本框
-
<textarea name="meno" >sdfdd</textarea>
下拉框，默认是上海,selected=selected，下拉框有10个 size=10
-
<select name="city" size="10">
<option value="1">北京</option>
<option value="2" selected="selected" >上海</option>
<option value="3">仙桃</option>
</select>
下拉框多选 ：在select标签里加入multiple
-
<select name="city" size="10" multiple="multiple">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
<option value="3">仙桃</option>
</select>
a 标签
跳转
-
<a href="http://www.cn.bing.com" target="_blank">必应</a>
锚（小说的例子，就是点一个跳转到相应地方）
href=#某个ID" 标签的ID不允许重复
-
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height: 600px;">第一章内容</div>
<div id="i2" style="height: 600px;">第二章内容</div>
引入图片
-
<a href="http://www.cn.bing.com">
<img src="1.jp" title="大美女" style="height: 200px; 200px;" alt="美女">
</a>
列表
实现代码如下：
-
<ul>
<li>adf</li>
<li>adf</li>
<li>adf</li>
</ul>
<ol>
<li>df</li>
<li>df</li>
<li>df</li>
</ol>
<dl>
<dt>123</dt>
<dd>ttt</dd>
<dd>ttt</dd>
<dd>ttt</dd>
</dl>
表格
下面写到不是很规范
-
<table border="1">
<tr>
<td>主机名</td>
<td>端口</td>
<td>操作</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a href="s2.html">查看详细</a>
<a href="#">修改</a>
</td>
</tr>
</table>
实现效果如下：
点击查看详细可以跳转到我指定的页面，点击修改不跳转
这会生成就全了：
-
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
效果如下：
合并单元格，横向和纵向合并
-
<tbody>
<tr>
<td rowspan="2">1</td>
<td colspan="2">2</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
点用户名出现光标编辑
显示如下：
代码如下：
-
<body>
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
</body>
实现下面边框功能
代码如下：
-
<fieldset>
<legend>登录</legend>
<label for="username" >用户名：</label>
<input id="username" type="text" name="user" />
<br/>
<label for="pwd" >密码</label>
<input id="pwd" type="password" name="pwd" />
</fieldset>
CSS
我们可以在标签上设置style属性
-
<divstyle="height: 48px;">1</div>
效果如下：
这是一种方法，另外，我们我可以在head标签写style
ID选择器
例如：
-
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
height:48px;
}
</style>
</head>
然后呢，引用直接写id=1即可
-
<body>
<div id="i1">1</div>
还有一种class选择器
引用
-
<span class="c1">dfdf2</span>
找到所有的div然后给予上色
标签选择器
把所有div设置成此样式
-
div{
color: white;
}
</style>
</head>
<body>
<div class="c1">1</div>
<span class="c1">dfdf2</span>
<div class="c1">3</div>
</body>
效果如下：
指定span标签下面的应用样式
层级选择器
-
span div{
color: white;
}
body里面写的：
-
<span class="c1">dfdf2
<div class="c2">sdafs</div>
</span>
效果就是只给span标签里面的div生效
还有就是在.c1 下面加div
效果跟上面是一样的
层级用空格关联，下面的组合用逗号来关联
-
.i1,.i2,.i3{
color: white;
}
下面的body
<div class="i1">1</div>
<div class="i2">21</div>
<div class="i3">13</div>
这个就是组合选择器，如果下面是id那么上面就应该是#i1，#i2，#i3
属性选择器：
对选择到的标签再通过属性在进行一次筛选
-
.c1[n="jixuege"]{100px;
height:200px;}
body里面的写法
<input class="c1" type="text" n="jixuege">
<input class="c1" type="password" >
实现效果：
上面就是一大堆的选择器，class选择是最多的。
优先级
-
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: white;
}
.c2{
/**/
/*color: white;*/
font-size: 58px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color: pink;" >fsdfsadf</div>
</body>
优先级顺序为：标签上的style优先，其他按照编写的顺序，越往下越优先，就近原则
把css样式写到文件里
-
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commons.css"
</head>
<body>
<!--<div class="c1 c2" style="color: pink;" >fsdfsadf</div>-->
<div class="c1 c2" >fsdfsadf</div>
</body>
CSS样式，本质就是把文件拿到然后给你填过来
-
.c1{
color: white;
}
.c2{
font-size: 58px;
color: black;
}
边框
宽度，样式，颜色
border solid red
-
<div style="border: 1px solid red;" >
sdfsdf
</div>
高度和宽度的练习：
-
<div style="height: 48px; 80%; border: 1px solid red;" >
sdfsdf
</div>
效果
字体大小：font-size: 36px;
字体颜色： color
高度： height
宽度： width 像素和百分比都可以
水平方向居中：text-align: center;
文字放在中间：line-height: 48px; 水平和垂直都居中，要给height值相同
加粗：font-weight: bold;
重点来了，float，飘
需求：
把整个屏幕分成二块，如何实现？
float 让标签浪起来，块级标签也可以堆叠
-
<div style=" 20%;float: left;">1</div>
<div style=" 60%;">1</div>
实现效果：
但凡遇到左边一个右边一个，固定一个都要用到float
其实就是div嵌套div，然后里面来回float ，然后需要用<div style="clear: both;"></div>来压他们。
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
line-height:38px;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header">
<div style="float: left;" >收藏本站</div>
<div style="float: right;" >
<a>登录</a>
<a>注册</a>
<a>我的订单</a>
<a>VIP会员俱乐部</a>
<a>客户服务</a>
<a>关注</a>
<a>手机版</a>
</div>
</div>
<div style=" 300px;border: 1px solid red;">
<div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
<div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
<div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
<div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
<div style=" 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
实现效果
块级转换为内联标签，通过display：inline 和block inline-block
-
<div style="display: inline;">asd</div>
<span style="display: block;">asd</span>
行内标签：无法设置高度，宽度，
块级标签： 设置高度，宽度
-
<span style="display: inline-block; height: 50px;">alex</span>
display：none 让块消失，用法，视频网站的开灯关灯
边距padding margin(0,auto)
内边距padding和外边距margin
应用：
默认情况 html两边有边距，想去掉
<body style="margin: 0" >
