HTML
用vscode的，直接打关键字，自动生成括号
一、基本介绍
1、什么是HTML？
Hyper Text Markup Language
超文本标记语言
超文本？超级文本，例如流媒体，声音、视频、图片等。
标记语言？这种语言是由大量的标签组成。
任何一个标签都有开始标签和结束标签，例如：
<标签> : 开始标签
</标签> : 结束标签
HTML严格意义上来只能说是一种规范，一种浏览器上的规范，
标签语言，不能称为编程语言，因为HTML中没有变量、数据类型
控制语句if 、for，这些都没有的。
2、HTML运行在哪？
运行在浏览器上。
前端的程序员开发完成之后需要在不同的浏览器上运行程序，
以便发现浏览器兼容问题。
3、HTML怎么开发？
新建一个.html或者.htm结尾的文件。
使用记事本打开就能开发，浏览器打开就能运行。不需要编译。
4、什么是web？
web就是网站开发。
5、web程序员包括：
web前端程序员：
需要精通：html css javascript
web前端主要负责的是：前端浏览器展示的效果，客户要求：要酷炫、要震撼....
web前端页面展示的时候，是需要动态的数据的，这些数据是后台java程序或者
C++程序提供的。
web后台程序员
需要精通：
这个不一定了，后台有可能是C语言，也可能是C++，也可能是Java，也可能PHP
也可能是Python等....
这种系统架构被称为：B/S结构系统。
B: Browser （浏览器）
S: Server （服务器）
6、HTML是哪个组织制定的标准呢？
W3C.
html实际上是w3c制定的一套标准，有不同的版本，例如：HTML4.0、HTML5.0(简称H5)
W3C是一个什么组织呢？
W3C是World Wide Web Consortium（万维网联盟）的缩写
tim berners-lee 万维网联盟创始人。万维网之父。（地位等同于爱因斯坦...）
因为有了他，才有了现如今的互联网时代，他让我们能够上网了。
HTTP协议：超文本传输协议，也是W3C制定的。
HTTP协议是一种什么协议？
浏览器和web服务器传消息的协议。
7、B/S架构的原理？（粗略的描述一下）
第一步：用户在浏览器地址栏上输入URL。【http://www.baidu.com】
第二步：回车（这一步相当于通过浏览器向服务器发送了一个请求）
请求：request
Browser ----> Server（浏览器向服务器发送数据）
第三步：服务器会给浏览器一个响应，最终响应一段HTML代码给浏览器，
浏览器对HTML代码进行执行展示一个结果。
响应：response
Server ---> Browser（服务器向浏览器发送数据）
重点：
到目前为止，浏览器向服务器发送请求有两种方式：
第一种方式：用户直接在浏览器的地址栏上输入URL，回车。
第二种方式：用户直接在网页上点击超链接。
以上两种方式在本质上是没有区别的。
但是第二种方式更加方便，更加傻瓜式！
二、语法+实践
2.1 基本标签
- p-paragraph 分段
<p>
《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
</p>
<p>
贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
</p>
- 标题字
h1–>h6
<h1>标题</h1>
- 换行（独目标签）
hello<br>world!
- 水平线（独目标签），其中color是颜色属性
HTML中字符串可以使用单引号也可以使用双引号，也不区分大小写
<hr>
<hr color="red">
- 预留格式
在HTML源码上是什么格式，到网页上还是这个格式
<pre>
for(int i = 0; i<100; i++){
System.out.println("i = " + i);
}
</pre>
- 字体
<b>粗体字</b>
<i>斜体字</i>
<ins>插入字</ins>
<del>删除字</del>
- 右上，右下
10<sup>2</sup>
m<sub>2</sub>
- font标签–字体标签
<font color="red",size="5">hello world</font>
最终效果
2.2 实体符号
<!-- 空格 -->
a bc
<br />
<!-- 大小于符号 > < -->
b<a>c
2.3 表格
- 基本表格
<body>
<!-- 三行三列的table -->
<!-- border用来设置边框的宽度，1px表示1像素 -->
<!-- <table border="1px" width="300px" height="200px"></table> -->
<!-- 还可以写成百分比的形式 -->
<table border="1px" width="50%" height="200px" align="center">
<!-- 第一行 -->
<tr>
<!-- 第一个单元格 -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td align="center">3</td>
</tr>
</table>
</body>
- 单元格合并
列合并和行合并
<body>
<table border="1px" width="50%">
<tr>
<td>1</td>
<!-- colospan 表示列合并，2表示合并两个 -->
<td colspan="2">xy</td>
<!-- <td>y</td> -->
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- rowspan表示行合并，2表示合并两个 -->
<td rowspan="2">shuaige</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<!-- <td>ge</td> -->
</tr>
</table>
</body>
- th标签
th可以代替td做单元格，th中的内容会自动加粗，会自动居中。
<body>
<table border="1px" width="50%">
<tr>
<!-- <td>员工编号</td>
<td>员工姓名</td>
<td>员工薪资</td> -->
<!-- th可以代替td做单元格，th中的内容会自动加粗，会自动居中。 -->
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr>
<tr>
<td>7370</td>
<td>KING</td>
<td>8000.0</td>
</tr>
</table>
</body>
- thead, tbody, tfoot标签
<body>
<!-- 一个table可以被thead tbody tfoot分隔为三部分。 -->
<!-- 这个语法主要是为了后期javascript提供方便。 -->
<table border="1px" width="50%">
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr>
<tr>
<td>7370</td>
<td>KING</td>
<td>8000.0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tfoot>
</table>
</body>
2.4 背景颜色和背景图片
<!-- body标签的bgcolor属性指定背景颜色。 -->
<!-- <body bgcolor="red"> -->
<!-- body标签的background属性指定背景图片。 -->
<body background="images/dyzh.jpg"></body>
2.5 图片
<!-- 背景图片 -->
<body background="images/dyzh.jpg">
<!-- 这个图片是网页中的一个元素 -->
<!-- <img src="images/bd.png"></img> -->
<!-- 开始标签和结束标签之间没有内容的话，可以直接把结束标签删除掉，开始标签末尾添加 / -->
<img src="images/bd.png" />
<!-- img标签的属性有哪些呢？ -->
<!-- src属性：用来指定图片的路径 -->
<!-- width属性：用来指定图片的宽度，高度会等比例缩放！ 不要手动设置高度。-->
<!-- title属性用来设置鼠标悬停时的提示信息。 -->
<img src="images/bd.png" width="200px" title="点击我跳转到百度哦!" />
<!--alt用来指定当图片加载失败的时候的提示信息 -->
<img src="im/bd.png" alt="图片找不到了哦!" />
</body>
2.6 超链接
<body>
<!-- 链接到百度 -->
<!-- href 属性表示：hot references，用来指定链接的路径 -->
<a href="http://www.baidu.com">百度</a>
<br />
<!-- 链接路径可以是一个网络中的路径，也可以是一个本地的路径！ -->
<!-- 超链接的特点：鼠标停留在超链接上自动变成小手，超链接自动添加下划线！ -->
<a href="basic3.html">链接到本地的表格！</a>
<br />
<a href="http://www.jd.com">京东商城</a>
<br />
<a href="http://www.126.com">126邮箱</a>
<br />
<a href="https://map.baidu.com">百度地图</a>
<!-- 图片可以做热链接吗？可以 -->
<a href="https://map.baidu.com">
<!-- 标签嵌套使用！ -->
<img src="images/bd.png" width="200px" title="点击我跳转到百度地图哦!" />
</a>
<hr />
<!-- 关于超链接的target属性 -->
<!-- target属性用来设置，最终打开窗口的位置 -->
<!--
target ：
_blank：新窗口
_self：当前窗口
_parent：当前窗口的父窗口
_top：当前窗口的顶级窗口
-->
<a href="http://www.baidu.com" target="_self">百度（当前窗口）</a>
<a href="http://www.baidu.com" target="_blank">百度（新窗口）</a>
<a href="http://www.baidu.com">百度（默认是怎样的？当前窗口）</a>
<hr />
<!-- 一个窗口中的内部窗口 -->
<iframe src="http://www.baidu.com"></iframe>
</body>
补充解释下top self parent
三个窗口，按理来说应该出现在三个不同窗口，不过现在看来不行了。，所以关注新窗口还是原来窗口就行（_self, _blank）
<body>
top
<iframe src="parent.html" width="500px" height="500px"></iframe>
</body>
<body>
parent
<iframe src="self.html" width="300px" height="300px"></iframe>
</body>
<body>
self
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_parent">百度</a>
<a href="http://www.baidu.com" target="_top">百度</a>
</body>
2.7 列表
无序和有序
标签：anchor 的缩写。anchor ['æŋkə] 基本解释n. 锚, 铁锚的。
＜li＞：List Item列表项目
＜ol＞：Ordered List 排序列表
＜ul＞：Unordered List 不排序列表
<!-- 无序列表 -->
<ul type="circle">
<!-- 列表项 -->
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
<li>俄国</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>水果
<ol type="a">
<li>香蕉</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>苹果</li>
</ol>
</li>
<li>蔬菜</li>
<li>茶
<ol type="I">
<li>绿茶
<ol type="1">
<li>西红柿茶</li>
<li>龙井</li>
<li>毛尖</li>
</ol>
</li>
<li>红茶</li>
</ol>
</li>
</ol>
2.8 表单（最重要的）
1、什么是表单有什么用？
发送请求，并且携带数据给服务器。
表单和超链接有共同的特征，就是都可以向服务器发送请求，
只不过超链接是用户直接点击发送请求，不能填写数据。
而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
表单最主要的作用就是：收集用户的信息。
表单对应的英语单词是：form
2、怎么定义一个表单对象呢？语法格式
<form>
表单项1:
表单项2:
</form>
另外要注意：一个网页上可以有多个表单对象。
3、第一个表单
form标签中有一个action属性，这个属性和超链接的href相同。都需要填写url。action属性用于规定当提交表单时，向何处发送表单数据
<body>
<!-- 表单-->
<form action="http://www.baidu.com">
<!-- 按钮，提交表单的按钮，只要点击这个提交按钮，就发送请求了！ -->
<!-- 所有能够提交表单的按钮，type必须是submit，不能随便写 -->
<!-- <input type="submit"/> -->
<!-- 设置按钮上显示的文本 -->
<input type="submit" value="百度"/>
<!-- button是一个普通按钮，能提交表单吗？不能。 -->
<!-- <input type="button" value="百度"/> -->
</form>
<!-- submit提交按钮放在form外面也是不行的！-->
<input type="submit" value="百度(外)"/>
</body>
http://192.168.145.2:8080/crm/login
协议：http协议
访问的服务器IP地址是什么？192.168.145.2
访问这个服务器上的那个软件：8080端口对应一个服务。
/crm/login：是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！！！）
重点*****重点*****重点*****重点*****重点*****重点*****重点*****重点*****重点*****
表单最终提交的时候，表单项的name属性非常重要，有name的才会提交。没有name是不会提交的。
并且浏览器向服务器提交数据的格式是？
url?name=value&name=value&name=value&name=value&name=value
以上的提交数据的格式，是W3C指定的格式。所有浏览器都是这样的。
以下表单提交数据的时候，格式是这样的：
http://192.168.145.2:8080/crm/login?x=zhangsan&y=111
这个格式非常重要，必须背会，所有浏览器都是这样提交数据的：name=value&name=value&name=value
类似map：
key value
---------------------------
x zhangsan
y 111
<body>
<form action="http://192.168.145.2:8080/crm/login">
<!-- input是输入域，type不同，展示样式不同。text表示文本框 -->
用户名：<input type="text" name="x"/><!-- 文本框和密码框的value上是不需要程序员提供的，是用户输入的！ -->
<br />
<!-- type="password"表示密码框 -->
密码：<input type="password" name="y" />
<br />
<!-- 提交表单的按钮 -->
<input type="submit" value="登录" />
</form>
</body>
4、用户注册表单
<!-- name有，就能提交，没有name属性就不能提交。 -->
<!-- 提交格式：name=value&name=value&name=value -->
<!-- 表单中，如果有一些项用户没有填写，默认提交的就是空字符串："" -->
<form action="http://localhost:80/crm/register">
用户名 <input type="text" name="username" /><!-- value不需要程序员提供 -->
<br>
密码 <input type="password" name="userpwd" /><!-- value不需要程序员提供 -->
<br>
性别 <!-- 最终提交给服务器的数据是：sex=1 或者 sex=0 -->
<!-- 同一组的单选按钮，name是需要一致的，这样才可以做到单选的效果 -->
<!-- checked 表示默认选中此项 -->
<input type="radio" name="sex" value="1" checked />男 <!-- value需要程序员提供 -->
<input type="radio" name="sex" value="0"/>女
<br>
兴趣
<!-- 复选框，同一组的复选框name也是一致的。 -->
<input type="checkbox" name="aihao" value="smoke"/>抽烟 <!-- value需要程序员提供-->
<input type="checkbox" name="aihao" value="drink" checked />喝酒
<input type="checkbox" name="aihao" value="firehair" checked />烫头
<br>
学历
<!-- 下拉列表 -->
<select name="xueli"><!-- 假设选中专科，提交的是：xueli=zk -->
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk" selected >本科</option><!-- selected默认选中 -->
<option value="ss">硕士</option>
</select>
<br>
简介
<!-- 文本域 --><!-- value是用户填写的！-->
<textarea rows="10" cols="60" name="jianjie"></textarea>
<br>
<!-- 提交表单 -->
<input type="submit" value="注册" /><!-- 这个提交按钮不能有name，不然，这个按钮的value也会提交给服务器。 -->
<!-- 重置按钮 -->
<input type="reset" value="重置" />
<!-- 普通按钮不能提交 -->
<input type="button" value="普通按钮" />
</form>
<!-- 不管用！ -->
<input type="reset" value="重置" />
提交后
http://localhost/crm/register?username=shuai&userpwd=123&sex=1&aihao=drink&aihao=firehair&xueli=bk&jianjie=hahahaha
5、下拉列表怎么显示多个条目，支持多选
按住conmand即可多选
<body>
<!-- multiple 表示下拉列表支持多选 -->
<!-- size是设置下拉列表一次最多显示的条目数量。 -->
<select name="province" size="3" multiple>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="shandong">山东省</option>
<option value="shanxi">山西省</option>
<option value="hubei">湖北省</option>
<option value="hunan">湖南省</option>
</select>
</body>
6、file控件
<body>
<!-- 后台java程序使用IO流的方式接收这个文件！ -->
<form action="http://www.baidu.com">
文件：<input type="file" />
<br /><br /><br /><br />
<input type="submit" value="文件上传" />
</form>
</body>
7、hiden隐藏域
<body>
<!-- hidden隐藏域空间 -->
<form action="http://127.0.0.1:8080/crm/save" >
<!-- 隐藏域 -->
<!-- 不希望用户在浏览器上看到，但是希望可以将这个数据提交过去！ -->
<input type="hidden" name="usercode" value="11111"/>
<!-- 提交按钮 -->
<input type="submit" value="提交" />
</form>
<!-- 最终提交：http://127.0.0.1:8080/crm/save?usercode=11111 -->
</body>
8、read only和disabled
<body>
<!--readonly和disabled都是只读的！ -->
<!-- http://127.0.0.1:8080/crm/save?orgcode=1111 -->
<!-- readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！ -->
<form action="http://127.0.0.1:8080/crm/save">
机构代码 <input type="text" name="orgcode" value="1111" readonly />
<br>
用户代码 <input type="text" name="usercode" value="2222" disabled />
<br>
<input type="submit" value="提交" />
</form>
</body>
9、maxlength属性
<body>
<!-- 最多输入3个字符 -->
<input type="text" maxlength="3" />
</body>
2.9 HTML元素的id属性
1、在HTML中任何一个节点上，都有id属性
2、在同一个网页中，id属性是不能重复的。
3、id代表了这个节点，id是这个节点的身份证号。
4、后期学习了javascript之后，我们要通过javascript
对HTML的节点进行增删改，对节点增删改的时候，需要先
获取到该节点对象，id属性可以让我们方便的获取到该节点
对象。
5、通过id属性可以很方便的在Javascript中获取到该节点，
然后对这个节点进行操作，最终产生网页的动态效果，所以
javascript可以让死气沉沉网页活跃起来。
<body id="mybody">
<form id="myform">
<input id="username">
</form>
<ul id="myul">
<li id="myli"></li>
</ul>
</body>
2.10 div和span
1、div和span都是图层。（div和span都是盒子）
2、什么是图层，有什么用？
每一个图层在网页当中都是一个独立的盒子。
图层的最主要作用就是：网页布局
3、table表格不是可以布局吗？
table表格布局有什么缺点：不灵活
div和span布局更加灵活。
4、每一个div和span左上角的顶点，都有x和y轴的坐标，通过这个坐标可以定位div在网页当中的位置。
后面讲CSS的时候，我们可以通过CSS样式进行定位。
5、很久以前都是采用table进行布局，现代化的网页都是采用div+span进行布局。
6、对于web前端来说，怎么调试程序？
每一个浏览器都内置了调试器。
使用快捷键F12，可以调出来调试器。
7、div和span有什么区别？
div默认情况下独自占用1行。
span不会独占行！
<body>
<div id="div1">我是一个div</div>
是新的一行吗
<span id="myspan">我是一个span标签</span>
</body>
CSS
CSS课堂笔记
一、基本概念
1、什么是CSS？
Cascading Style Sheet
层叠样式表语言（不是编程语言，属于样式表语言，没有变量、数据类型、控制语句...）
CSS其实是专门用来修饰HTML的，让HTML更好看。
CSS是HTML的化妆品。
2、CSS是为HTML服务的，所以HTML还是主体，CSS是依附在HTML上的，
所以进行CSS的开发，我们还是需要新建html/htm文件。
3、在HTML中怎么嵌入CSS样式呢？三种方式
第一种方式：内联定义
第二种方式：定义内部样式块对象
第三种方式：链入外部样式表文件（这种方式最常用！）
4、关于选择器的优先级：
标签选择器优先级最低。
其次是类选择器。
最高优先级是id选择器。
还有什么疑问的，可以自行测试以下！
二、实战
2.1 第一种嵌入方式-内联定义
内联定义语法格式？
<标签 style="样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;"></标签>
style：风格，样式。
任何一个HTML标签都可以指定style属性。
<div id="div1" style="background-color : #CCCC33;
width : 300px;
height: 300px;
position : absolute;
top: 100px;
left: 100px;
border-style : solid;
border-color : red;
border-width : 1px;">
</div>
红线100为左和上的距离。
2.2 第二种嵌入方式-样式块
head标签中使用style标签，定义样式块对象
这里应该怎么写样式，语法是什么？
选择器 {
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
}
CSS中常见的选择器包括：最常用的三种选择器。
标签选择器
id选择器
class选择器
<html>
<head>
<meta charset="utf-8">
<title>HTML中嵌入CSS样式的第二种方式：定义内部样式块对象</title>
<!-- head标签中使用style标签，定义样式块对象 -->
<style type="text/css">
/*
标签选择器，很简单：
标签名 {}
*/
div{ /* 作用于所有的div元素*/
background-color: aqua;
width: 100px;
height: 100px;
border-color: red;
border-style: solid;
border-width: 10px;
}
/* ID选择器
#id{} 只作用于id这个元素
*/
#username {
width: 400px;
height: 30px;
border-color: black;
border-style: solid;
border-width: 1px;
}
/* 类选择器
.class {} 样式作用于当前网页中某一类的标签
*/
.student {
font-size: 12px;
color: #FF0000;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<br>
<br>
<br>
<!-- 怎么才能让样式作用于某1个标签，可以使用id选择器 -->
<input type="text" id="username" />
<hr>
<!-- class属性，任何一个标签都有，class相同的，可以看做是同一类标签。 -->
<span class="student">文本内容span</span>
<p class="student">文本内容：段落p标签</p>
<br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
2.3 第三种嵌入方式-链入外部样式表文件（最常用的）
<head>
<meta charset="utf-8">
<title>HTML中嵌入CSS样式的第三种方式:链入外部样式表文件</title>
<!-- 引入外部独立的CSS样式表文件 -->
<!-- 在web前端开发中，这种方式是最常用的！ -->
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div id="div1">
</div>
<input type="text" class="myinput" />
<input type="text" class="myinput"/>
<input type="text" id="username" class="myinput"/>
</body>
#div1 {
background-color: #FF0000;
width: 100px;
height: 100px;
}
/* 标签选择器 */
input {
/* border-style: solid;
border-color: red;
border-width: 1px; */
border : solid 1px red;
}
/* 类选择器也可以使用 */
.myinput {
border : solid 2px blue;
}
#username {
border : double 3px black;
}
2.4 隐藏样式+列表（list-style-type: circle/none）
<head>
<meta charset="utf-8">
<title>隐藏样式</title>
<style type="text/css">
#citysOfChina {
display: none; /* 隐藏*/
}
input {
display: block; /* 显示*/
}
ul {
/* list-style-type: circle; */
list-style-type: none;
}
ol {
/* list-style-type: none; */
list-style-type : upper-roman;
}
</style>
</head>
<body>
<ol>
<li>水果</li>
<li>蔬菜</li>
<li>茶</li>
</ol>
<ul>
<li>中国
<ul id="citysOfChina">
<li>北京</li>
<li>天津</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<input type="text" />
</body>
2.5 文本装饰
<head>
<meta charset="utf-8" />
<title>文本装饰样式</title>
<style type="text/css">
#baidu {
text-decoration: underline;
/* text-decoration : overline; */
/* text-decoration : line-through; */
/* text-decoration : blink; */
}
#baidu2 {
text-decoration: none;
}
</style>
</head>
<body>
<div id="baidu">百度</div>
<a id="baidu2" href="http://www.baidu.com">百度</a>
</body>
2.6 设置鼠标悬停效果
:hover 是专门用来设置鼠标悬停效果的
<head>
<meta charset="utf-8">
<title>设置鼠标的悬停效果</title>
<style type="text/css">
/* :hover 是专门用来设置鼠标悬停效果的 */
span:hover {
color: red;
font-size: 20px;
}
/* 注意：:hover在使用的时候，这个冒号两边都是不允许有空格的。 */
input:hover {
border-color: black;
}
</style>
</head>
<body>
<span>我是一个段落</span>
<span>我是一个段落</span>
<input type="text" />
</body>
2.7 内间距和外间距
padding-left–内
margin-top–外
<head>
<meta charset="utf-8">
<title>内边距和外边距</title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: #00FFFF;
border: solid 1px red;
/* 内补丁 */
padding-left: 20px;
}
#div2 {
width: 100px;
height: 100px;
background-color: black;
border: solid 1px red;
/* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
/* 外补丁 */
margin-top : 10px;
}
</style>
</head>
<body>
<!-- 盒子套盒子 -->
<!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
<div id="div1">
<div id="div2">
</div>
</div>
</body>
2.8 float浮动效果
<head>
<meta charset="utf-8" />
<title>float浮动效果</title>
<style type="text/css">
img {
float: right;
}
</style>
</head>
<body>
<p>
<img src="images/lmt.gif" />
《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
</p>
</body>
前者为不用浮动，后者为用浮动（ps图片是动图）
2.9 定位样式position+光标样式
<head>
<meta charset="utf-8" />
<title>定位样式position</title>
<style type="text/css">
#div1 {
background-color: red;
border: solid 1px black;
width: 100px;
height: 100px;
/* 定位 */
position: absolute;
top: 100px;
left: 100px;
}
#baidu:hover {
/* 变成小手 */
cursor: pointer; /* 尽量不要使用hand，有浏览器兼容问题！*/
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<div id="div1">
<span id="baidu">百度</span>
</div>
</body>
参考资源：B站搜老杜
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
