HTML与CSS详细总结

最新推荐文章于 2024-05-18 12:54:30 发布

Is-Me-HL

最新推荐文章于 2024-05-18 12:54:30 发布

阅读量598

点赞数 1

分类专栏： JavaWeb 文章标签： html和css详细总结高度塌陷盒子模型定位选择器优先级、框架集等

本文链接：https://blog.csdn.net/m0_37265215/article/details/89553099

版权

JavaWeb 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

作为一个后端技术热爱者而言，实际开发中也难免和要前端知识打交道，或者说，偶尔前端不在，也得能顶上。所以抱着这样的想法，将从前零零散散的知识，依靠阅读相关书籍，学习各类教学视频，认真地整理了一番。学习整理过程中将知识点也都记录在文档html和css详细总结中。下面就文档中罗列的一些知识点，做一个简单的总结，方便快速查阅。

HTML中的实体

实体指的是在HTML中，一些特殊字符如<>是不能直接使用的，需要使用一些特殊的符号来表示这些特殊的字符，这些特殊的符号我们称之为实体（转义字符串）。

实体的语法：& 实体的名字

meta标签

Meta标签日常使用：
1、设置编码
<meta charset="UTF-8">
2、设置网页关键字
<meta name="keywords" content="H5,CSS,JS">
3、可以用来指定网页的描述
<meta name="description" content="HTML5总结、CSS总结">
4、可以用来做网页的重定向
<meta http-equiv="refresh" content="5;url=http://www.208j.club">

内联框架：Iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    iframe{
        width: 80%;
    }
</style>
<body>
<iframe src="test2.html" name="Is-Me-HL"></iframe>
<a href="http://www.208j.club" target="Is-Me-HL">点击加载页面到iframe框架中</a>
</body>
</html>


a标签的target属性可以用来指定打开链接的位置，可选值：
_self：表示在当前窗口打开（默认值）
_blank，表示在新的窗口打开
也可以设置为一个iframe内联框架的name属性，表示在该内联框架中打开

Iframe：
Src：只想一个外部的页面的路径，可以使用相对路径
Width、height属性
Name：可以为内联框架指定一个name属性

块元素和内联元素

块元素：Div就是一个块元素，所谓块元素就是会独占一行的元素，无论内容有多少都会独占一行：div，p，h1，h2，h3……Div这个标签没有任何的语义，就是纯粹的一个块元素，并且不会为他里面的元素设置默认任何的默认样式，其主要作用使用来对页面进行布局的。

内联元素：Span是一个内联元素（行内元素）。所谓行内元素，指的是只占自身大小的元素，不会占用一行，常见的行内元素a，img，iframe，span。Span没有任何语义，span标签专门用来选中文字，然后为其设置样式

对比&小结：块元素主要用来做页面的布局，内联元素主要用来选中文本设置样式。
一般情况下使用块元素包含内联元素，而不会使用内联元素包含块元素，当然，像a这样的内联标签，是可以包含除了自身的其他标签的。

选择器、伪类、伪元素

除了常见的标签选择器、类选择器、id选择器，还有很多其他的选择器，此处选择器相关内容（ps：笔者太懒）不做总结，详细查看文档html和css详细总结。

选择器的优先级

当使用不同的选择器选中同一个元素，并设置相同样式时，这时样式之间会生冲突，到底选择那个选择器，应该由选择器的优先级（权重）决定：

优先级规则：

内联样式：优先级1000

Id选择器：优先级100

类和伪类选择器：优先级10

标签选择器：优先级1

通配选择器*：优先级0

继承的样式：没有优先级

注意（1）：选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较；如#hello{}和p#hello{}，优先会显示p#hello的样式，一个权重是100，一个是100+1=101，所以显示101。

注意（2）: 不存在11个类选择器优先级会高于一个id选择器，规定了类选择器不会超过其自身数量级，如类是10 ，最多也是99，不可能是100。当选择器的优先级是一样的，谁在后面就使用谁的样式。以上将的是交集选择器可以进行优先级相加，但是对于并集选择器，则是单个计算的，不能相加：如：#pa,.cs,p{}

总结，所以在开发中一般不推荐使用内联样式，否则其他选择器都无法改了，当然，如果在其他选择器中的属性加上！important，则会是该选择器生效，甚至超过内联样式的优先级。当然这个！important也和内联样式一样不建议使用。如.pa{color:green !important;}表示特别重要，必须显示。

伪类的优先级

涉及到a标签的伪类有四个a:link{}，a:visited{}，a:hover{}，a:active{}，hover必须写在active前面，否则会有样式显示不出来，即active样式无法展示。该四个伪类优先级一样。

HTML标签

em标签：斜体，强调
strong标签：加粗，更强调
i标签：斜体，无语义
b标签：加粗，无语义
small标签：表示较小子，合同，版权信息
cite标签：网页中所有的加书名号的内容都可以使用cite标签，还有歌名，书名，话剧名，电影名等
q标签：表示短的引用（行内引用），引用的内容浏览器会默认加上引号。通过css样式：before和after加上的引号。
blockquote标签表示一个长引用（块级引用），独占一行
sup标签：设置上标，如x平方的2。在百度百科中经常看到，上标再给个链接。
sub标签：设置下标。
ins标签：表示一个插入内容，在该内容下会自动添加下划线。
del标签：表示一个删除的内容。在内容中部加删除线。
pre标签：是一个预格式标签，会将代码中的格式保存，不会忽略多个空格。
code标签：专门用来表示代码的，但不会保留格式，是个语义标签，一般和pre一块使用，使得既有语义也能保留预格式。

无序列表、有序列表、定义列表

三者的简单实例，相关代码查看文档html和css详细总结。实际开发中，如果手写目录树，可以通过有序列表和无序列表的相互嵌套实现。

长度单位

像素px

像素是在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，但是这些像素点不能直接看见，不同显示器的一个像素的大小也不同，显示效果越好越清晰，像素就越小，反之就越大。

百分比%

可以将单位设置成一个百分比的形式，这样浏览器会根据其父元素的的样式来计算该值，使用百分比的好处就是当父元素的属性值发生变化时，子元素也会按照比例发生改变，在我们创建一个自适应的页面时，经常使用百分比作为单位。

em和百分比类似，它是相对于当前元素的字体大小来计算的。

1em=1font-size，使用em，当字体大小发生变化时，em也会随之变化，当设置字体样式的时候会经常使用em

.box{

Font-size:100px;

Width:10em;// 那么说明width是100*10=1000px

}

字体属性设置

字体可以设置以下属性：

Color：颜色

Font-size：包含字体框，格的大小

Font-family：可以设置多个字体，如果计算机有该字体就使用，没有就是用默认的字体：如：Font-family华文彩云，微软雅黑，arial;等

等…….

Font-style：斜体，正常字体等

Font-weight：粗细，bold表示粗体，默认细

Font-variant：设置一个小型大写字母，small-caps

当然，如果单纯的给字体设置上述某种样式，是可以选择性的挑出其中写法去写的，但是如果这个字体的每一种样式都需要去设置，那么我们可以使用简写的方式去设置样式

Font：small-caps bold italic 60px ”微软雅黑”;

需要注意的是，前面三种，斜体、粗细、大小字母，没有顺序要求，甚至可以不写，但是60px和”微软雅黑”，必须要写，且60px写在倒数第二个，”微软雅黑”写在倒数第一个！

行高line-height

在CSS中并没有为我们提供一个直接设置行间距的方式，我们只能通使用line-height来设置行高，行高类似于我们上学时的单线本，单线本是一行一行的，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中，而文字会默认在行高中垂直居中显示。

行间距=行高-字体大小

Line-height可以能接收大参数值可以是n个xp，或者百分比（百分比会根据font-size去计算行高），也可以直接上传一个正数，表示是当前字体大小的多少倍。Ps：这里还需要注意的是，当使用font：简写字体样式时，如果在font中没有设置行高，会使用默认的行高，这时line-height如果要生效的话，必须放在font简写样式后面，当然也可以在font中直接设置行高font：20px/40px “微软雅黑”;其中40px表示的就是行高。

文本样式

Text-transform：可以用来设置文本的大小写
Text-decoration：可以用来设置文本的装饰
Text-align：用于设置文本的对其方式
Text-indent：用来设置首行缩进

上诉属性的可选值参见文档html和css详细总结。

盒子模型

盒子可见框的大小由内容区，内边距和边框共同决定。

边框border

为元素如div设置边框，必须指定以下三个样式：

border-width：边框的宽度
border-color：边框的颜色
border-style：边框的样式（必须有，如果没有写，那默认为none，不显示）

使用border-width可以分别指定四个边框的宽度：

如果border-width设置了四个值，则四个值分别会给上右下左，按照顺时针方向设置边框值。

如果设置了三个值，则三个值分别会设置给上右左下

如果设置了两个值，则上下左右

如果设置了一个值，则四边全是该值

Ps：包括border-color，border-style，padding，margin，都是类似这样。

使用border-style，该样式可以有以下值：

None：默认值，没有边框

Solid：实线

Dotted：点状边框

Dashed：虚线

Double：双线

等…..

可以使用border，边框的简写样式：

通过他可以同时设置四个边框的样式，宽度，颜色，且没有任何顺序要求。但是border不能分别指定四个边，都是统一值指定四个边。所以只能使用border-top，border-left等设置

内边距padding

内边距（padding）指的是盒子的内容区和盒子边框之间的距离。

和border一样有四个方向，通过padding-top，padding-right，padding-bottom，padding-left来设置四个方向的内边距。

内边距和border（边框）一样会影响盒子可见宽的大小。

外边距margin

外边距指的是当前盒子与其他盒子之间的距离，他不会影响盒子可见框的大小，而是会影响到盒子的位置，和padding一样也有四个方向。

Margin可以使负数，表示相反方向移动，修改margin-top和margin-left的值可以改变该盒子的位置，设置margin-bottom和margin-right的值可以改变其他位置相对于当前盒子的位置。

当然margin还可以设置为auto，auto一般只设置给水平方向的margin，如果只是指定，左外边距或右外边距的margin为auto，则会将外边距设置为最大值，垂直方向外边距如果设置为auto，则外边距默认就是0。如果将margin-left和margin-right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中自动居中，所以我们经常讲外边距设置为auto，以使子元素在父元素中水平居中。

最后，和padding一样，margin也可以单独设置。

关于盒子模型的内容还有很多，请详见文档：