课程内容

HTML框架标签

常见的框

     <frameset rows="20%,*" noresize = "noresize"><frame src="../index.html" name="top" /><frameset cols="25%,*"><frame src="http://www.baidu.com" name="left"/><frame src="https://weibo.com/" name="right"/></frameset></frameset>

框架的概述：

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架标签的构成：

frameset -> frame

Frameset : 主要用于设置窗口的布局方式。

框架结构标签（）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

对于框架标签Frameset用cols和rows来设置每个框架所占的宽度和高度，在设置值时，多个窗口的值可以用所占百分比或者是窗口宽度的像素px来指定，多个值用逗号分隔，通常最后一个用*来自适应。

对于框架标签的子标签是frame：该标签的作用是设置每个窗口显示显示的页面文件地址，通过src属性来设置。

注意：如果要让框架设置窗口禁止拖放，在frameset 标签中加属性noresize = "noresize"

frame 标签的name属性设置该窗的名字，可以和a标签的target属性联合使用设置在框架中的超链接在指定的相同名称的框架窗口打开。

重要提示：不能将<body></body> 标签与<frameset></frameset> 标签同时使用！

DIV+css

div:

DIV 是division的缩写，可以认为他是一个图层，div本身没有大小也没有样式。如果需要给div设置样式，此时就需要依赖css,通过css可以精确的控制div，来进行页面的布局，或者页面的样式。

CSS概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

css的作用：主要用来美化html页面的，设置页面的样式的。

Css的三种引入方式

对于css的引入方式主要有：

行内式
内部式
外部式

行内式：

是将css样式通过html标签的style属性写在html标签的里面作为style属性的值。

语法格式： <标签 style=“样式属性1：属性值1；样式属性2：属性值2；…”></标签>

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>行内式</title></head><body><div style="width: 300px; height: 200px; background-color: red;"></div></body>
</html>

行内式的不足 : 将css和html 写在一起不利于样式和标签本身相分离，会降低页面的可读性、也不利于维护。通常在测试时使用行内式，其他的场景很少使用。

内部式：

在html文件中通过style标签，将css样式通过选择器找到对应标签设置标签的样式的方式。样式是放在style标签内。

<style>选择器{样式名1：样式值1；样式名2：样式值2；样式名3：样式值3；。。。。。。}
</style>

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内部式</title><style>div{width: 400px;height: 200px;background-color: blue;}</style></head><body><div></div><hr /><div></div></body>
</html>

不足：将css写入html文件，不利于样式和html相分离，同样不利于后期页面的维护。

优势：

相比较行内式，使用内部式，可以一次给多个标签设置样式；
可以不用跳转其他文件就可设置html的样式，比较直观，操作简便。

注意：内部式的style标签可以有多个，且可以放在任何位置，但是通常放在head标签内。

外部式：

单独的创建一个css文件，将样式写到css文件中，然后在html页面通过link标签的href属性来引入外部的css文件。

语法：

<link href="css文件地址" type="text/css" rel="stylesheet" ></link>

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内部式</title><!-- rel 是引入样式的名字 href是引入外部样式的地址 type 设置引入文件的类型 --><link rel="stylesheet" href="../css/div.css" type="text/css"/></head> <body><div></div><hr /><div></div></body>
</html>

优势：

符合样式和html相分离的特点。
一个css文件可以在多个html中进行引入，有利于共享，减少重复。

不足：

操作的复杂度提升，增加开发难度。

三种引入方式的生效的优先级（面试）：

对于css的三种引入方式的优先级的遵循的原则是就近原则；

行内式 > 内部式 > 外部式（那个在后运行那个生效）。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 300px;background-color: red;}</style><link rel="stylesheet" href="../css/div.css" /></head><body><div style="background: green;"></div></body>
</html>css文件：
div{width: 300px;height: 100px;background-color: greenyellow;
}v

三种引入方式的作用范围大小（面试）：

外部式 > 内部式 > 行内式。

CSS的语法规则

对于css的语法规则主要有两种写法：

第一种：

选择器{属性名1: 属性值；
属性名2: 属性值2；
.....
}

第二种写法：

选择器{属性名1: 属性值1；属性名2: 属性值2；…}

选择器

选择器是用来选中设置样式的标签的属性值，或者是标签名等、或者是属性值和标签名的组合。

css常见的选择器

ID选择器

使用html标签的通用属性id的值来选择标签，格式为：#id值

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ID选择器</title><style>#di{ /* id选择器*/width: 200px;height: 100px;background-color: #0000FF;}</style></head><body><div id="di"></div></body>
</html>

特点：设置样式的标签是唯一的，只能设置指定id值的标签。

类选择器

通过标签的通用属性class来选择一类标签。格式： .类值

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>class选择器</title><style>.test{color: red;font-size: 30px;width: 300px;height: 100px;background: gray;}</style></head><body><div class="test">div</div><hr /><p class="test">p</p></body>
</html>

在使用css的选择器时，优先选择使用class选择器。可以选择一个或者是多个标签。

标签选择器

使用标签名称作为选择器来选中相同的名称的标签，格式：div、p、 a、img、 tr、span 、input

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>class选择器</title><style>li{ /* 选中所有标签名的标签*/width: 100px;height: 60px;background: deepskyblue;border: 1px solid red;}</style></head><body><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li></ul><ol><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li></ol></body>
</html>

通配符选择器

通配符选择器会选中所有的标签。格式： *

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>class选择器</title><style>*{/* 通配符选择器*/margin: 0px;padding: 0;font-size: 14px;}.test{color: red;font-size: 30px;width: 300px;height: 100px;background: gray;}</style></head><body><div class="test">div<h1 class="test"></h1></div><hr /><p class="test">p</p></body>
</html>

选择器的优先级

ID选择器 > 类选择器 > 标签选择器 > 通配符*

注意：选择器对大小写敏感，但是css样式的属性对大小写不敏感。

CSS的常用样式

1. css设置标签的背景

background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

实例：background-color

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css设置元素的背景</title><style>div{width: 100px;height: 100px;background-color: red;}#di{width: 600px;height: 500px;/*设置背景图片*/background-image:url(../img/3.jpg);/*背景图片不平铺*//* 可以通过background-repeat-y/x 设置y或者x反向的平铺方式*//*background-repeat-y: no-repeat;*/background-repeat: no-repeat;/*background-position: center;*//* 精确控制背景图片的位置 */background-position-x: 10px;background-position-y: 10px;}</style></head><body><div></div><div id="di"></div></body>
</html>

2. CSS 对文本设置

指给标签中的文本内容设置样式。

color: 设置文本的颜色。
line-hight: 设置文本的行高，可以实现上下居中。
text-align: 设置文本左右方向的对齐方式。
text-decoration : 设置文本的修饰样式，如下划线等。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>设置文本的样式</title><style>li{height: 50px;width: 100px;border:1px solid red;color: blue; /* 设置文本的颜色*/line-height: 50px; /*设置文本上下居中*/text-align: center;  /* 左右居中*/text-decoration: underline; /* 给文本添加下划线*/}a{/* 去除a标签提示信息默认的下划线*/text-decoration: none;color: black;}</style></head><body><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul><a href="#">点我</a></body>
</html>

3. CSS 字体

设置字体的样式。

font-family	设置字体系列。如：宋体、微软雅黑。
font-size	设置字体的尺寸，大小，单位可以是像素。
font-style	设置字体风格。 oblique 表示斜体；
font-weight	设置字体的粗细。设置粗细，取值100 - 900，数字越大越粗。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>设置文本的样式</title><style>li{font-family: "微软雅黑";font-size: 70px;font-style: oblique;font-weight: 900;}</style></head><body><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></body>
</html>

4. 边框样式

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

边框样式的设置：设置边框的宽度。

border-top-width : 设置上边框的宽度
border-right-width ：设置右边框的宽度
border-bottom-width 设置下边框的宽度
border-left-width ：设置左边框的宽度
border-width: ：统一设置四个边的宽度。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>边框的样式</title><style>#di{width: 400px;height: 400px;background-color: yellow;border-width: 10px;border-style:solid;border-color: red;border-left-width:3px ;border-top-style: double;border-right-color: green;/* 边框设置的简写形式首先该种简写形式的顺序不能变，且前两个参数是不能省略的* */border: 2px solid gray;}.da{width: 400px;height: 400px;background-color: yellow;/* 分别给四个边设置宽度，顺序是上右下左 */border-width: 20px 10px 5px 2px;border-style:groove solid double dotted; border-color: red green gold black;}.da1{width: 400px;height: 400px;background-color: yellow;/* 设置三个值时，左右相等，上下不同，顺序还是上右下，左右相等*/border-width: 20px 10px 5px;border-style:solid; }.da2{width: 400px;height: 400px;background-color: yellow;/* 设置两个个值时，左右相等，上下相等*/border-width: 10px;border-style:solid; /* 边框的圆角设置*//* 圆角的设置可以是边框长度的百分比，也可以说是像素*/border-radius:50%; }.da3{width: 400px;height: 400px;background-color: yellow;border: 2px solid red;/* 设置指定边角的圆角，如下左 。上右 */border-bottom-left-radius: 20px;border-top-right-radius: 30px;}</style></head><body><div id="di"></div><div class="da"></div><div class="da1"></div><hr /><div class="da2"></div><hr /><div class="da3"></div></body>
</html>

5. 盒模型

CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。，整个盒模型右外边距，边框，内边距。内容组成。

盒模型所占的宽度=左外边距+左边框的宽度+左内边距+ 宽度 + 右外边距+右边框的宽度+右内边距

盒模型所占的高度=上外边距+ 上边框的宽度+ 上内边距+ 高度+ 下外边距+ 下边框的宽度+ 下内边距

说明：通常给标签通过css设置的宽和高是指内容的宽和高；

外边距：margin 表示的是盒模型的边框向外扩展的宽度。

一个值：margin: 值；表示设置盒子的四个外边距相等值。

两个值：表示的是上下相等，左右相等，顺序上右下左。

三个值：表示左右相等上下不同。

四个值：表示每个方向设置不同的外边距。

marign-top/right/bottom/left: 值来设置不同边的外边距。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒模型</title><style>#di{width: 200px;height: 200px;border: 5px solid red;margin: 50px 40px 30px 20px;}</style></head><body><div id="di"></div></body>
</html>

内边距：padding 表示的是盒模型的内容和边框之间的距离。

一个值：padding: 值；表示设置盒子的四个内边距相等值。

两个值：表示的是上下相等，左右相等，顺序上右下左。

三个值：表示左右相等上下不同。

四个值：表示每个方向设置不同的外边距。

padding-top/right/bottom/left: 值来设置不同边的外边距。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒模型</title><style>#di{width: 200px;height: 200px;border: 5px solid red;margin: 50px 40px 30px 20px;/* 设置盒模型的内边距，分别是上右和左相等下的内边距*/padding: 30px 10px 5px;}</style></head><body><div id="di"></div></body>
</html>

注意：设置盒模型的内边距不会影响盒子中内容所占的大小，但是会改变边框的大小，将整个盒子向外扩展，因此实际使用需要谨慎使用，通常使用较少。

外边距冲突

盒模型外边距冲突计算两个盒子外边距的方式：

如果上下两个盒子都设置了外边距，此时在上下方向两个盒子之间边框之间的距离取外边距较大者；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒模型</title><style>div{width: 200px;height: 200px;border: 1px solid red;/*float:left;*/}#di{margin: 20px;}#di1{margin: 10px;}</style></head><body><div id="di"></div><div id="di1"></div></body>
</html>

如果左右两个盒子都设置了外边距，此时在左右方向两个盒子之间边框之间的距离取去外边距的和；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒模型</title><style>div{width: 200px;height: 200px;border: 1px solid red;float:left;}#di{margin: 20px;}#di1{margin: 10px;}</style></head><body><div id="di"></div><div id="di1"></div></body>
</html>

6. css的定位

浮动定位

标准流：

标准流是指不设置定位或者是浮动，元素在html中默认的排列方式，这种默认的排列方式就称为标准流。

浮动定位：

通过float属性设置元素的定位方式，当给元素设置了浮动属性之后，此时元素会脱离标准流，重新按照指定的属性进行排列。可以是向左也可以是向右。直到碰到边框或者其他设置相同浮动属性的元素为止。对于没有设置浮动属性的元素相比于设置了浮动属性的元素就像不存在一样。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>li{width: 200px;height: 60px;background-color: gray;float: right;border-left:2px solid white;line-height: 60px;text-align: center;color: white;}</style></head><body><ul><li>HTML</li><li>css</li><li class="de">javaScript</li><li class="de" >SQL</li></ul></body>
</html>

设置左右浮动之后，如果后面的标签不设置浮动，由于浮动会脱离文档流，此时浮动之后空白的位置会被设置浮动后面没有设置浮动标签的内容补上。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>li{width: 200px;height: 60px;background-color: gray;border-left:2px solid white;line-height: 60px;text-align: center;color: white;}.left{float: left;}.right{float: right;}div{width: 300px;height: 100px;background-color: red;}</style></head><body><ul><li class="left">HTML</li><li class="left" >CSS</li><li class="right">javaScript</li><li class="right" >SQL</li></ul><p> 标准流： 标准流是指不设置定位或者是浮动，元素在html中默认的排列方式，这种默认的排列方式就称为标准流。浮动定位：通过float属性设置元素的定位方式，当给元素设置了浮动属性之后，此时元素会脱离标准流，重新按照指定的属性进行排列。可以是向左也可以是向右。直到碰到边框或者其他设置相同浮动属性的元素为止。对于没有设置浮动属性的元素相比于设置了浮动属性的元素就像不存在一样。</p><div></div></body>
</html>

1、概述

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对
CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

2、元素定位的属性position

static (默认)

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 相对定位的属性值

元素框偏移某个距离。元素仍保持其未定位前的形状（位置），它原本所占的空间仍保留。

设置元素定位之后的位置需要依赖top、right、bottom、left属性对元素进行定位。

实例：
```
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>position 实现相对定位</title><style>div{width: 200px;height: 100px;background-color: red;border: 1px solid yellow;}.div2{position:relative; /* 设置元素的相对定位*/left: 300px;top:-100px}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
</html>
```
效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxEqbyjM-1596715558149)(1596592618578.png)]

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
实例：
```
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>position 实现相对定位</title><style>*{margin: 0px;padding: 0px;}div{width: 200px;height: 100px;border: 1px solid yellow;}.div1{background-color: red;position:absolute;left:200px;top:50px;}.div2{background-color: blue;position:absolute;}.div3{background-color: gray;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
</html>
```
设置定位的元素的堆叠属性的样式属性： z-index,该属性值月大，越往上层。

实例：

position 实现相对定位

         width: 200px;height: 100px;border: 1px solid yellow;}.div1{background-color: red;position:absolute;left:100px;top:50px;/* 设置了绝对定位的元素默认的堆叠方式是后面的覆盖前面的元素，* 但是可以通过z-index来改变堆叠顺序，数字远大越上层*/z-index: 10; }.div2{background-color: blue;position:absolute;}.div3{background-color: gray;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div><div class="div3"></div>
</body>

注意：设置了绝对定位会影响设置了定位后面的元素，后面的元素会补位设置了绝对定位删除的空间，置于定位元素的下层。

fixed 固定定位

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>position 实现相对定位</title><style>*{margin: 0px;padding: 0px;}div{width: 200px;height: 100px;border: 1px solid yellow;}.div1{background-color: red;height: 1000px;}.div2{background-color: blue;position:fixed;right: 10px;bottom: 20px;}.div3{background-color: gray;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div></body>
</html>

总结：对于元素的定位，默认的static.主要设置定位的值relative/absoulte/fixed三个属性值，如果需要设置元素的定位位置，此时三个定位的属性值都需要依赖top/right/bottom/left这四个属性来设置位置。

注意：在设置绝对定位时，通常先给父元素设置相对定位，否则设置的定位的元素会相对浏览器窗口或者有定位属性的元素进行定位。

通常在使用定位时，父元素使用相对定位，子元素使用绝对定位。

元素类型的转换和列表样式

在html中有很多标签（元素），这些标签主要分为两类：块级元素和行内元素。

块级元素：该元素默认的会独占一行，比如： div、p、h1-6 、br 、hr ul-li、ol-li

行内元素：行内元素不会独占一行，元素占据的空间根据元素中的内容来确定，且不可以直接设置元素的高和框。如： a、span、b、strong、i、em。

行内块：元素所占的空间根据内容来定，但是可以设置元素的高科框，常见的标签如： img、input.

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>span{ /* 行内元素是没有高宽的*/width:200px;height:100px;color:red;border:1px solid red;}input{ /*行内块的特点是不会独占一行，但是可以设置高宽 */width: 300px;height: 60px;}</style></head><body><!-- 块级元素--><div>div</div><!-- 行内元素 --><hr/><span>span1</span><span>span1</span><br><input type="text" name="name" placeholder="请输入你的用户名请输入你的用户名" /><input type="text" name="name" placeholder="请输入你的用户名请输入你的用户名" /></body>
</html>

对于元素的类型可以通过属性display进行改变，进块级元素转变成行内元素，或者是进将行内元素转变为行内块。

dispaly的常见取值：

none: 将元素隐藏。

block: 将元素设置为块；

inline-block: 将元素设置且行内块；

inline: 设置元素为行内元素。

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.ul1 li{width: 200px;height: 38px;background-color: darkgoldenrod;border: 1px solid red;display: inline-block;}</style></head><body><ul class="ul1"><li>列表1</li><li>列表1</li><li>列表1</li><li>列表1</li></ul></body>
</html>

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a{/*display: inline-block;*/ /*将行内元素转换为行内块 */display: none; /* 将元素隐藏*/width: 40px;height: 20px;}#aa{display: inline-block; /* 将隐藏的元素显示或者改变类型*/}</style></head><body><a id="aa" href="#">点我</a><a href="#">点我</a></body>
</html>

列表样式

列表常用于设置网站的导航栏，如果在设置网站的导航栏时需要去除列表的默认样式，此时需要使用到属性：

list-style-type: none;

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.ul1 li{width: 200px;height: 38px;background-color: darkgoldenrod;border: 1px solid red;list-style-type:none;}</style></head><body><ul class="ul1"><li>列表1</li><li>列表1</li><li>列表1</li><li>列表1</li></ul></body>
</html>

水平排列方法的选择

如果需要将元素进行水平排列布局，可以选择同过display改变元素的类型或者使用float，还有定位使得元素进行水平排列，该如何选择？

如果需要水平排列优先使用display设置为行内块，但是如果不想换行的多个标签中不需要空白格，此时就可以选择浮动，如果要选择定位来设置元素的位置，那么整个网页特别是父元素一定也要设置定位，且通常使用的定位会降低灵活性，因此如果考虑适配问题，尽量减少绝对定位的使用。

HTML+CSS详细介绍（全）相关推荐

HTML中Css详细介绍
HTML中Css详细介绍一.样式表的作用 1.Css样式表,层叠样式表 2.类似于人类的衣服,网页的衣服 3.作用:美化网页 4.优势: 1.内容与表现分离,便于维护 2.样式丰富,页面布局灵活 3 ...
HTML与CSS详细介绍
HTML 与 CSS 1. 主要内容 2. HTML HTML(HyperText Markup Language)就是超⽂本标记语⾔."超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素, ...
【狂神说JAVA】CSS详细笔记(全)
文章目录 1.CSS是什么 1.1什么是CSS 1.2 发展史 1.3 快速入门 1.4 CSS的3种导入方式 2.选择器 2.1 基本选择器 1.标签选择器 2.类选择器 3.ID选择器总结 2. ...
css 滤境的详细介绍
导读: [alpha滤镜属性]这个名字,在flash和photoshop经常见到.它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数值来控制混合的程取u庵帧坝氡尘盎旌稀蓖ㄋ椎厮稻褪且桓鲈 ...
小白学习freemark的过程(代码全贴+详细介绍)
介绍 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用程序环境学习工具 ...
php比较运算符案列,PHP实例：PHP比较运算符的详细介绍
<PHP实例:PHP比较运算符的详细介绍>要点: 本文介绍了PHP实例:PHP比较运算符的详细介绍,希望对您有用.如果有疑问,可以联系我们. 比拟运算符种类 PHP实战如同它们名称所暗示的 ...
Vue详细介绍及使用
Vue详细介绍及使用一.Vue定义及简介 1.Vue定义关于Vue简介,百度百科给出的解释是:Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设 ...
苹果x css适配,CSS如何适配iPhone全面屏 CSS适配iPhone全面屏方法
本篇文章小编给大家分享一下CSS适配iPhone全面屏方法,通过文中代码详细介绍了适配方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.media query方式 / ...
爬虫（详细介绍，由浅入深）
网络爬虫与信息提取笔记学习python的视频https://www.bilibili.com/video/av69060979?p=1 以爬虫视角,看待网络内容(来源:学习强国平台,北京理工大学学习 ...

HTML+CSS详细介绍（全）