网页编程基础-HTML
HTML是什么
HTML(Hyper Text Markup Language ): 超文本标记语言，是开发网页的最基础的语言由W3C组织提供
关于HTML:
(1) HTML是一门标记(也叫做标签或元素)语言，不是编程语言
(2) HTML是一门标记语言，是利用标记来组织网页结构的
(3) 使用html开发的网页文件，以".html"或".htm "（.shtml）为后缀
(4) 使用html开发的网页文件，由浏览器负责解析并执行（即显示在浏览器中）
(5) HTML是文档的一种，例如：word pdf txt…HTML的结构
1.案例：编写我的第一个HTML网页, 并用浏览器打开
新建一个txt文档，将后缀名改为.html，代码实现如下：
<! doctype html>
<html>
<head>
<title>frist page</title>
</head>
<body>
<h1>
hello CGB1905
</h1>
</body>
</html>例如：另存html文档时保存的编码为utf-8:
乱码出现的本质的原因：编码时和解码时使用的码表不一致造成的
出现乱码解决的方法：只要保证网页保存时候的编码（可以通过文件的另存为进行来却定）和meta标签指定的编码相同就不会出现所谓的乱码的问题
只要在html文档中添加一个meta标签，同时也指定保存的编码为utf-8即可解决乱码问题!!
<! doctype html>
<html>
<head>
<title>frist page</title>
<meta charset="utf-8">
</head>
<body>
<h1>
hello CGB1905
</h1>
</body>
</html>2.HTML结构详解
(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本上面是html5.0的声明, 也是目前最常用的版本
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8"/> 用来通知浏览器使用哪一个编码来打开HTML文档,
这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.HTML语法(了解)
1、html标签
HTML是一门标记语言，标记也叫做元素/标签，标签分为开始标签和结束标签。例如:
<body></body>
<table></table>
<form></form>如果标签内没有内容要修饰，可以合并成一个自闭标签。例如:
<meta/> <br/> <hr/> <input/> <img/>等等
<meta/>=<meta></meta>
主要涉及到的问题是自闭的标签的内容写在什么位置
<meta charset="utf-8">=<meta charset="utf-8" ></meta>
标签的属性不可以独立的存在，必须要声明在标签里面，如果不是自闭的标签，就要将属性写标签的开始的位置，属性可以有多个，多个属性之间用空格进行操作2、html属性
标签都可以具有属性，属性可以有多个，多个属性之间用空格隔开。例如：
<font size="7" color="red" face="华文琥珀">文本内容…</font>
提示：属性的值用单引号或双引号引起来，或者不用引号。通常使用双引号引起来。
3、html注释
注释格式：<!-- 注释内容 -->，注意html注释不能交叉嵌套，例如：
<!-- 下面声明了一个标题 -->
<h1>一级标题</h1>4、html空格和换行 <br/>  
如何在网页中做一个空格或者做一个换行？
由于在网页中多个连续的空白字符会被当成一个空格来显示，所以
如果要做一个空格，可以用转义字符 来代替;
如果要做一个换行，可以用<br/>标签来代替;
提示：中文状态下的空格(全角空格)请使用: HTML标签
图像标签
注意：不要再开发中进行书写带盘符的路径，因为将来在项目的发布中的系统里面可能是不带有盘符的一次写带盘符的路径并不是非常靠谱，推荐相对的路径，即相对于一个文件的位置去找另外的文件
图片的属性（宽度和高度可以用具体的值进行更改，也可以使用百分比的方法进行设置）
img标签用于在网页中插入一幅图片
标签介绍：
//注意：要将图片和文件的所在的相对路径写出来，而不是绝对的路径
<img src="img/1.jpg" width="70%" border="5px"/>
属性介绍：
src属性：用来指定图片的url地址（即图片的所在路径）
width属性：指定图片的宽度，单位可以为px（像素）或者%（百分比）
height属性：指定图片的高度，单位可以为px（像素）或者%（百分比）在HTML网页文档中，通过a标签可以创建一个超链接标签
1、用于创建指向另外一个文档的超链接（点击后可以跳转到另外一个文档），例如：
<a href="http://www.baidu.com" target="_blank">百度一下，你就不知道</a>href属性：用来指定点击超链接后将要跳转到的url地址
target属性：用来指定以何种方式打开超链，其常用取值为:
_self：默认值，在当前窗口打开超链接
_blank：在新的窗口中打开超链接插入一个图片和超链接的实例的代码：
<! doctype html>
<html>
<head>
<title>插上一副图像</title>
<meta charset='utf-8'>
</head>
<body>
<h3>
<!--img就是插入图片的方法，后面的src是图像的路径-->
<!-- -->
<!--如何进行确定地址，在此处使用的是文件的相对的地址 -->
<img src="FristDay/2.jpg" border="5px" width="500px" />
</h3>
<!--进行创建一个超链接,可以设置成为文字的超链接，或者是图片的超链接-->
<h3>
进行创建一个超链接
<h3>
<!--href代表的属性是跳转得网页的地址-->
<!--
target代表的的属性是以何种形式进行打开地址
_blank代表的是创建一个新的网页或者是新的窗口打开
-->
<a href="http://baidu.com" target="_blank">
百度一下你就知道
</a>
</body>
</html>1、表格标签介绍
table – 用来定义一个表格
tr – 用来定义表格中的行
td – 用来定义表格中的单元格
th – 用来定义表头2、练习：使用表格标签在网页中生成一个表格，如下图：
要求如下:
在设置表格的边框的的时候有两种方法，一种是html自己提供的一种添加边框的方式
<table border="1px">
另外一种方式是：
<!--这样进行添加边框的好处是可以进行选中所有的表格，可以在这儿进行设置表格的属性 solid 代表的是实线的边框 后面可以直接加上颜色的属性值进行添加边框--> table{border:1px solid red;
<!--进行设置表格得边框合并-->
border-collapse:collapse;
//设置单元格的宽度,当设置的百分比的时候可以跟随者页面的大小进行变化，但是设置的是固定的像素的时候则不会进行变化，可能会出现数据的溢出的现象
width:70%;
//可以进行设置表格距离网页的边框的距离，同为左，同为右
margin-left:170px;
//可以进行设置表格的位置，靠左，靠右，或者是让表格进行居中的操作，
//让左右的都进行自适应就可以，就会让左右两边的距离相等
margin-left :auto;
margin-right :auto;
<!--微表格的设置性对应的背景的颜色-->
background:pink;
}
<!--这个代表的是给单元格内部的设置的边框-->
td,th{border:1px solid;
<!--这个代表的将单元格的边框中间的间隙进行合并，合并的方法写在单元格的-->
<!--进行设置表格得边框合并-->
border-collapse:collapse;
//将单元格之间的间距可以进行自动的设置,就是表格里面的内容和表格之间的距离
padding :5px
}
//这个是进行将表格意外的文本进行更改
<!--设置元素进行水平的居中-->
h3{<!--设置元素进行水平的居中-->
text-align:center;
}
<tr>
<!--表头的内容是自动的居中和加粗的-->
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<!--td代表的含义是将每一行记性分成列-->
<td>11</td>
<td>12</td>
<td>13</td>
</tr>(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题
表格代码的实现，主要是记忆表格中的方法
<! doctype html>
<html>
<head>
<title>表格的标签</title>
<meta charset='utf-8'>
<style>
table{border:1px solid red;
border-collapse:collapse;
width:70%;
margin-left:auto;
margin-right:auto;
background:pink;
}
td,th{border:1px solid red;
border-collapse:collapse;
padding:5px;
}
h3{
text-align:center;
}
</style>
</head>
<body>
<h3>
插入一个表格,插入四行四列的表格
</h3>
<table border="1px">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
</html>表单
通过form标签可以在网页中进行定义一个表单，表单的作用就是用于服务器提交数据，向服务器提交/发送数据的方式一共有两种（1）：通过表单可以向服务器发送数据（2）：通过超链接的方式向服务器进行发送数据
表单的举例子：表单就是类似于我们日常生活中的注册的表格，称之为表单，可以将表单的内容提交给服务器，在提交的过程中涉及到信息的检测的功能
可以通过表单的方式进行提交数据
在上面的表单中，可以进行传入数据，可以提交/注册可以将表单中的数据提交给服务器，然后服务器将提交的内容进行处理操作可以通过超链接的方式进行提交数据，可以进去以下的内容
：在英文的？后面都是提交给服务器的内容
http://tmooc.cn/?username=zhangfei&password=123&like=football
可以在URL的后面，可以通过？进行拼接数据，当访问URL所在的服务器时候，会将?后面的参数一并的带给服务器，服务器再将这些数据进行处理
但是这种方式安全的系数不高，容易泄露个人的信息http://www.tmooc.cn/?username=zhangfei&password=123&like=football表单标签
<form> 标签用于网页中进行定义一个表单
<form> //可以有很多个表单项标签，比如用户名的输入框，密码的输入框。。。。。。表单标签中的属性
action 必须存在的属性，用来指定表单提交的目的地地址
method 可选属性，用来指定以何种方式来提交表单，如果不指定，post和get的提交两中方式，默认是GET提交
提示1：在HTTP协议中规定了7种提交方式，其中5种都不常用，只用GET和POST。
提示2：只有使用表单，并且明确的指定了提交方式为POST时，才是POST提交，其他方式都是GET提交。
表单项的标签
input 元素
普通的文本输入框
用户名: <input type="text" name="username" value="设置默认值"/> 
密码的输入框
密码: <input type="password" name="password" value="设置默认值"/>
单选按钮
性别: <input type="radio" name="gender" value="man"/>男
<input type="radio" name="gender" value="woman" />女
其中checked属性可以设置选项默认被选中value用来指定选项被提交时的值, 如果不设置value, 选项被提交时, 值为on.
复选框
爱好: <input type="checkbox" name="like" value="lanqiu"/>篮球
<input type="checkbox" name="like" value="zuqiu"/>足球
其中checked属性可以设置选项默认被选中value属性用来指定选项被提交时的值, 如果不设置value, 选项被提交时, 值为on.
提交的按钮
<input type="submit" value="按钮上显示的文本"> 用来提交表单用的普通的按钮
<input type="button" value="按钮上显示的文本">普通按钮本身没有功能, 但是可以通过js来为按钮添加功能和行为.
textarea多行文本输入区域
个人描述: <textarea name="description" cols="宽度" rows="高度">请输入个人描述..</textarea>
cols属性：设置输入框宽度
rows属性：设置输入框高度
下拉选项
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz" selected="selected">广州</option>
</select>
其中selected属性用来设置该选项默认被选中
value属性用来设置选项被提交时的值
提交表单时，表单中的数据为什么没有被提交？
在表单中，每一个要提交数据的表单项标签都要具有name属性，例如
如果表单项标签没有name属性，在表单提交时，该项默认会被忽略。
<!-- 用户名 -->
<input type="text" name="username"/>
<!-- 密码 -->
<input type="password" name="pwd"/>
如何让多个单选框只能有一个被选中？
设置这多个单选框的name属性值相同，如果name相同，这多个单选框就默认是一个组，一个组就只能选中一个选项。
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
为什么单选框、复选框选择后提交时的值都是on?
如果单选框或复选框没有设置value属性，选择任何一个选项最终提交的值都是on，这样服务器无法区分用户到底选择是什么选项。因此我们需要通过value属性为单选框和复选框设置提交时的值，例如：
性别
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
爱好
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" name="like" value="football"/>足球
<input type="checkbox" name="like" value="velloyball"/>排球
如何设置单选框或复选框默认选中某一项?
只需要在单选框或复选框上面添加一个属性: checked="checked"，例如：
单选框: <input type="radio" name="gender" value="female"
checked="checked"/>女
复选框: <input type="checkbox" name="like" value="football"
checked="checked"/>足球
如何设置下拉选框默认选中某一项?
如果不设置，下拉选框默认选中的第一个选项，可以通过 selected="selected"属性设置某一项默认被选中，例如：
<select name="city"><!-- 下拉选框 -->
<option>北京</option><!-- 选项 -->
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
下拉选框中option选项上的value属性的作用是什么？
选中某一个option，在表单提交时，如果option上没有value属性，就提交option标签的内容；如果option上有value属性，就提交value属性的值。
<select name="city"><!-- 下拉选框 -->
<option value="bj">北京</option><!-- 选项 -->
<option value="sh">上海</option>
<option>广州</option>
<option>深圳</option>
</select>
input：实现普通的输入框，密码输入框、单（复）选、多选、按钮
select/option ：下拉的选框
textarea：多行的输入框
表单的注册的案例
<! doctype html>
<html>
<head>
<title>表格的标签</title>
<meta charset='utf-8'>
<style>
table{border:2px solid red;
border-collapse:collapse;
margin-left:auto;
margin-right:auto;
background:pink;
}
td,th{border:1px solid red;
border-collapse:collapse;
padding:5px;
}
h1{
text-align:center;
}
#last{
text-align:center;
}
</style>
</head>
<body>
<h1>
欢迎注册
</h1>
<form action="#"method="get">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username1"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="man" checked="checked"/男>男
<input type="radio" name="gender" value="woman"/女>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="like" value="basketball" checked="checked"/>篮球
<input type="checkbox" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleytball" />排球
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city">
<option value="beijing">北京</option>
<option selected="selected" value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
</td>
</tr>
<tr>
<td>自我描述</td>
<td>
<textarea name="description" cols="30" rows="5"
placeholder="请输入描述的信息"></textarea>
</td>
</tr>
<tr>
<td id="last" colspan="2">
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>页面的样式：
CSS
Css概述：CSS：(Cascading Style Sheets)层叠样式表，用来修饰、美化HTML网页的一门语言。使用CSS来设置样式，可以将设置样式的CSS代码和展示数据的HTML代码进行分离并且还可以实现代码的复用，增强网页的展示能力。
html的作用: 通过html标签组织网页的结构
css的作用: 渲染网页、美化网页
在HTML中引入css
通过style的属性进行引入css
大多数html标签都可以具有style属性，可以通过标签上的style属性为当前标签设置样式，这种方式设置样式不推荐大量使用，会造成页面结构的混乱，不利于后期的扩展和维护
<!--
1.通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px;background:pink;">
这是一个div...
</div>
通过style标签引入css
在head标签内部提供一个style标签，在style标签内部可以选中元素进行修饰，这种方式是将所有的css代码集中在一个style标签内部统一管理。初步实现了html代码和css代码的分离。实现了代码的复用（文件内部复用）。推荐使用这种方式。
<!-- 2.通过style标签给span设置样式如下：
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<style type="text/css">
/* ****** CSS样式 ****** */
span{
border:2px solid green;
font-size:30px;
font-weight:bolder;
}
</style>
通过link链接引入外部的css文件
在head标签下添加一个link标签，link标签可以引入外部的css文件
<!-- 引入demo.css文件 -->
<link rel="stylesheet" href="demo.css"/>
demo.css文件内容
@charset "UTF-8"; /* 指定当前css文件的编码为utf-8 */
p{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}
CSS选择器
其中123代表的是基本的选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
1.标签选择器
根据标签(元素)的名称来选择指定名称的元素进行样式的修饰.就是选定一个指定的标签，进行指定相对应的方法，所有的该标签都会做相应的变化，选择只可能将所有的标签进行选择
格式：标签名{ css属性… }
/* ----- 1.标签名选择器 -----
将所有span标签的背景颜色设置为#DDA0DD, 设置字体大小为24px，
字体加粗；*/
span{
background:#DDA0DD;
font-size:24px;
font-weight:bolder;
}
2.Class选择器
通过标签上通用的属性class，可以为标签指定所属的类(组)，所有class值相同的元素则为一组(类)，可以通过class属性的值选择这一组的标签，为这一组的标签统一设置样式。
给一类的标签加上相同的Class标签，并且名称要相同，然后进行相同类型的类型设置就可以。在调用方法的时候就是在Class文件前面加上一个(.)点，如果说一个元素同时被赋上了两个值，后面的值会将前面的值覆盖
格式：.类名{ css属性… }
/* ----- 2.class类选择器 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色
设置为#b1eb0a, 字体颜色为#0b190b；
(2)将div下的span和内容为"span111"的span，背景颜色设置为
#f3db09、字体颜色设置blue； */
.c1{ /* 表示选中所有class值为c1的元素 */
background: #b1eb0a;
color: #0b190b;
}
.c2{ /* 表示选中所有class值为c2的元素 */
background:#f3db09;
color: blue;
}
另外，一个元素可以设置多个class值，表示当前元素同时属于多个分组。例如：多class的样式会同时作用在当前这个元素上。如果多个样式之间出现冲突（c1和c2同时给当前元素设置背景），后设置的样式会覆盖前面设置的样式。如上，由于c2在后面所以c2会覆盖c1。
<span class="c1 c2">
span111
</span>
3. id选择器
通过标签上通用的属性id，可以为标签设置唯一的标识(ID的值在整个HTML中应该是独一无二的)，通过id值选中指定的元素。可以根据id的值进行独一无二设置类型
#id值{ css属性… }
/* ----- 3.id选择器 -----
用id选择器将第一个p标签设置字体大小为28px，字体颜色
为red, 首行文本缩进20px。 */
#p1{ /* 选中id为p1的元素 */
font-size:28px;
color: red;
text-indent: 20px;
}
常见的选择器的代码的实现
<!DOCTYPE HTML>
<html>
<head>
<title>基本选择器</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css" >
span{
background:#DDA0DD;
font-size:24px;
font-weight:bolder;
}
.a1{
background:#CBF74B;
color: green;
}
.a2{
background:#F0E68C;
color: blue;
}
</style>
</head>
<body>
<br/>
<div>
div111
<span>这是一个span</span>
这是一个div
</div>
<br/>
<span class="a1 a2">
span111
</span">
<span class="a1">
span222
</span>
<span class="a1">
span333
</span>
<p>
ppp111
<span class="a2">这是一个span</span>
这是一个P
</p>
<p>
ppp222
<span>这是一个span</span>
这是一个P
</p>
</body>
</html>后代选择器
意思就是在某一个标签下的所有的子标签，可以根据id的值进行确定位置，然后利用符号#进行引用（包括的是他的孩子，就是每一层的孩子都是后代）
方法调用的形式：#p span(代表的是p标签下每一层层的span元素)
选中父元素内部的指定后代元素
格式： 父选择器 后代元素{ css属性… }
/* ----- 4.后代选择器 -----
为p元素内部的所有span元素，设置字体大小为20px,字体颜色
为绿色,背景颜色为cyan; */
#p span{/* 选中所有p元素内部的所有span元素 */
font-size: 20px;
color:green;
background: cyan;
}
子元素选择器
和上面的用法基本上一致，只是限制了孩子的范围，意思就是在某一个标签下的所有的子标签，可以根据id的值进行确定位置，然后利用符号#进行引用（只包括一层的关系，就是只隔了一层的数据的标签）
方法调用的形式：#p>span(代表的是p标签下一层的span元素)
/* ----- 4.子元素选择器 -----
为p元素内部的所有span元素，设置字体大小为20px,字体颜色
为绿色,背景颜色为cyan; */
#p>span{/* 选中所有p元素内部的所有span元素 */
font-size: 20px;
color:green;
background: cyan;
}
属性选择器
根据属性条件选中元素进行修饰，可以给相应的属性加上相应的私有的方法，比如id的属性值，或者设置type方法里面的不同的类型的元素，如果在只单单的写上type则不会进行单独的分开
格式: 选择器[属性条件…] { css属性... }
/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为pink、字体大小
30px，首行缩进30px； */
input[type='text'][name='user']{
/* 匹配元素名为input的并且type的值为text的元素 */
background:pink;
font-size:30px;
text-indent:30px;
}
其中属性条件可以有多个, 多个属性条件放在多个方括号内部即可，例如，匹配所有的用户名输入框：
input[type='text'][name='username']{...}伪装选择器
方法的格式：a：hover（代表的是a元素）
当鼠标移到某元素上时候，状态发生改变，或者是给某一个标签下的第一个某元素设置相应的方法
a：hover{//当鼠标悬停在a元素上是，进行一下的操作
属性的变化；
//将文本设置成为没有下划线
text-decoration:none；
}
//进行指定某标签下的第几个的某个元素，标签代表得是第几个孩子的意思
div a:frist-child{
background:yellow;
}常用的属性的总结
文本属性
1.text-align 设置元素中文本水平对齐方式，其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
2.text-decoration：设置文本下划线，其常用取值为:
underline: 有下划线
none: 没有下划线
3.letter-spacing: 设置字符间隔/间距，其常用取值为:
normal
像素值
4.text-shadow: 设置字体阴影，其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移, 第二个值为阴影垂直位移, 第三个值为阴影扩散值, 第四个值为阴影颜色
字体的属性
font-size：设置字体大小
font-weight：设置字体粗细 bold、bolder、normal
font-family：设置字体，比如微软雅黑、黑体、楷体等
color：设置字体颜色
背景属性
background-color：设置背景颜色
background-image：设置背景图片，url('图片的路径');
background-repeat：设置或检索对象的背景图像是否及如何铺排
background-position：设置或检索对象的背景图像位置
边框（border）
其他属性
width：设置元素的宽度
height：设置元素的高度
border: 宽度 样式 颜色;
border用于设置元素的边框，可以同时设置边框的宽度、样式、颜色等
例如，设置div元素的边框为2像素、实线、红色：border:2px solid red
扩展内容
display属性
display用来设置元素的类型，常用取值：
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素
元素类型
块级元素
默认情况下，块级元素独占一行
可以设置宽和高，就是设置宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
行内元素
默认情况下，多个行内元素处在同一行
不能设置宽和高
行内多块元素
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)知识点的实践：
<! doctype html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
</head>
<!--首先将页面分为三个部分，注意总体的设置-->
<!--frameset是设置的框架集合，框架在此处代表的是窗口-->
//将页面的框去掉，就可以让他的页面进行固定，不可以拖动，符合我们想要的结果
//就是在frameset的属性里面frameborder="0"的数值设置为0
<frameset rows="14%,86%">
<!--先纵向的切割页面，然后进行横向的切割-->
<!--先分为上下的两列-->
//这个代表的是上下切割的上面的界面
<frame src="_top.html"/> //必须将这个top.html文件放到index文件夹，同一个存储的位置
//下面的窗口先不创建，因为下面的窗口又分为左右的两行
//只要需要切割就需要创建窗口集合
<frameset cols="180px,*">
//这下面代表得是左右的两个窗口
<frame src="_left.html"/>
<frame src="_right.html"/>
</frameset>
</frameset>
<body>
</body>
</html>
//上面窗口的属性设置
<! doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
<style>
body{
//设置的相应的背景
background:#3C8BDC;
//就是将之前的数据进行覆盖，称之为样式重置（css reset）
margin:0px;
}
h1{
//字体的颜色
color:fff;
//字体的首行的间距
text-indent:20px;
//在每个字的行间距
letter-spacing:5px;
//进行设置字体的阴影的功能
//解释三个像素值的含义：
//第一个值：控制的是向右偏移的量,如果是负数的值就会向左进行偏移，水平位置的偏移量
//第二个值：控制的是垂直方向的偏移的量，数值越小，向上便宜的程度就越大
//第三个值：控制数据的清晰程度
text-shadow:5px 5px 5px #000;
}
</style>
</head>
<body>
<h1>
永和大王门店管理系统
</h1>
</body>
</html>
//下面的左面的窗口的笔记
<! doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
background:#222D32;
}
div{
//代表的是文本的框的高度
height:40px;
//框的线是1像素，实线，默认的白色
border :1px solid #fff;
//字体的大小是20像素
font-size:20px;
//设置垂直方向的占据中间的位置，就是将文本的像素和框的高度相同就可以
line-height:40px;
//设置字间距
letter-spacing:5px;
}
//在div的选项里面是没有办法设置超连接里面的字体的
//需要利用文本属性进行强行的加载
div a{
color:#fff;
//设置文本没有下划线
text-decoration:none;
}
div:last-child{
//就是给最后的一个孩子进行设置下面的边框，防止了某一个边框过于突出的现象
border-bottom:1px solid #fff;
}
//当鼠标进行悬停的时候，就会有以下的样式
div:hover{
background:#797979;
}
</style>
</head>
//在写内容的时候一定要注意将编码表更改成为UTF-8，不然在输入中文的时候会出现乱码的情况
<body>
<div>
//在此处进行设置div的标签，超链接里面的#代表的含义是占位符号
//超链接中间的内容都是可以在屏幕上进行显示的内容
<a href="#"> > 门店管理</a></a>></a>
</div>
<div>
<a href="#"> > 订单处理</a>
</div>
</body>
</html>
//下面的右面的窗口的笔记
<! doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
body{
//背景的颜色
background:#ffffff;
}
#wel{
//字体的大小
font-size:36px;
//字体居中
text-align:center;
//字体与上面的边框有180像素的距离
margin-top:180px;
//字体的颜色
color:#686868;
//设置字体的格式
text-shadow:5px 5px 5px #444;
}
</style>
</head>
<body>
<div id="wel">
欢迎访问永和大王门店的管理系统。。。
</div>
</body>
</html>
扫一扫
2494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
