HTML CSS入门级常用知识点归纳总结

　　one:基础标签的嵌套

　　two:常用实体总结

　　three:图片的插入及相对路径

　　four:选择器

　　five:超链接的四个伪类

　　six:常用文本标签总结

　　seven:网页的三种列表

　　eight:三种单位长度行高 rgb

　　nine:表格

　　ten:盒模型

　　eleven:块，内联元素的简单布局规则

　　twelve:高度塌陷问题三种解决办法

　　thirteenth:三种定位元素层级透明度

　　fourteenth:背景图片

　　fifteenth:表单

　　One:标签：首先列出最最基础的常用标签是第一遍学的时候从嵌套层级的角度很混乱，它们都属于哪个层级？怎么嵌套是正确的？写网页最常用的嵌套有哪些？

　　块级元素：

　　内嵌元素：

　　块级元素可以比作一张大饼，那么内嵌元素可以比作大饼里面的豆沙馅镶嵌在大饼里面

　　嵌套规则：块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

　　（p标签比较特殊，p标签不能嵌套块元素）

　　下面图片是我练习时候写的，我们就以它来举例子（后面我会详细写一下这张练习图）

　　最常用的搭配模式：

　　div嵌套div 我们可以发现这张图片全部大框是一个div，里面嵌套上面一小条（开班信息 16年面授开班计划）div，下面比较大的具体内容的div

　　div里面嵌套列表也是常见的写法我们的（开班时间日期预约报名）是嵌套在大div里面第二个小div写的无序列表

　　这种嵌套模式是为了使整个超链接中间的几个字进行修饰，也很常用

　　还有很多嵌套我就不一一说明了，想再看一看比较全面的嵌套规则戳一戳这个传送门（我感觉总结的很好易懂）标签嵌套层级总结

　　Two:实体：实体就是一些特殊符号例如￥ @ > < 等等，我觉得这些东西相对不是很重要，用到的时候查一查手册就可以了。下面我总结一些最常用的实体符号

　　< > 空格 ? ? ? ? ?

　　Three:图片的插入及相对路径：图片插入用img自结束标签实现非常简单具体格式如下：这里的alt主要针对浏览器搜索用途，对客户不可见。下面详细来说一下src中的相对路径

　　相对路径我们来这么理解：相对于当前html文件位置，我们寻找图片位置。

　　下一层目录

　　上一层目录

　　这里我们举三个例子：

　　当前html和图片在同一文件夹下径"

　　a文件夹下有一个b文件夹 html在a文件夹下图片在b文件夹下

　　a文件夹下有 b文件夹和c文件夹 html在b文件夹下图片在c文件夹下

　　这三个例子已经很明白了哈，去敲一敲记忆更深刻

　　Four:选择器：第一遍的时候学选择器就头大，后代选择器，子孙选择器等等，在练习的时候我用最懒的方式选择器，为标签设置class属性或者是id属性，自我感觉极其好用，或者直接写标签本身进行选择，这里先留下一个坑吧，之后慢慢补齐各种选择器的用法，先举出这三个最简单的选择器

　　标签本身进行选择：

　　class选择

　　id 选择

　　Five: 超链接a标签的四个伪类

　　未被访问链接样式 a:link

　　访问过的链接样式 a:visited

　　鼠标悬浮在链接的样式 a:hover

　　鼠标点击链接的样式 a:active

　　通过四种链接的状态我们可以设置颜色字体形态等等样式来增强用户的体验，background-color font-size等等，后面总结雪碧图我们还会用到这四种伪类选择器

　　Six:文本标签：文本标签简单来说就是对文字的一种修饰作用，文本标签有很多靠我们平常积累慢慢熟悉，下面总结一些比较常用的文本标签

　　（1）斜体

　　我爱吃肉和青菜

　　（2）粗体

　　大二下学期，逃网课，学前端？

　　（3）书名号

　　《三年高考五年模拟》是我青春最美好的回忆

　　（4）引用

　　孔子说三人行必有我师焉

　　（5）下划线（嵌套斜体+粗体）

　　我很平凡，但也拥有站在舞台中央的权利

　　小结：我在总结中发现文本标签作用效果过可以相互嵌套的，写一遍知识点真的可以重新发现一些东西

　　Seven:列表

　　列表我拿出来单独总结一下用法，其实列表也是文本标签的一种，网页上面一般列表分为三种：无序列表有序列表定义列表

　　1 无序列表

　　购买清单

　　牛肉胡萝卜土豆

　　我们可以看到每个物品前面都有一个实心圆，在不同浏览器中兼容性是有差异的，因此我们经常在css中去掉前面的符号，去掉方式如下

　　2 有序列表

　　购买清单

　　青椒猪肉大蒜

　　我们可以看到有序列表会默认在各个物品前面添加数字序号，我们可以在ol标签中设置type=" "一些类型例如罗马数字英文字母等等

　　3 定义列表

　　孔子

　　创立儒家学派，编纂《春秋》，修订《六经》

　　Eight:单位长度行高 rgb

　　长度单位

　　常见单位长度有 px % em三种形式，我们可以为块级元素设置width height 任意长度和高度，%是相对于父元素width height的一种相对长度单位（一定要在其父元素存在px长度单位时使用）

　　——那么下面着重说一下我对em的一些理解，em呢是相对于字体大小的一种长度单位，假如font-size=50px;那么1em=50px,2em=100px；em会随着font-size变化而变化，当用户通过一些插件调节浏览器字体大小时防止布局混乱走样，我们大多数会使用em来保持布局的原样显示在字体是汉字时em多数水平width使用汉字占1font-size的水平宽度恰好是1em（高度却不适用）在英文字母时em多数垂直height使用英文字母占1font-size的竖直高度恰好是1em（宽度却不适用）

　　em的使用和一些方法还需要我后续的深入学习，我会慢慢的补充

　　传送门css布局em使用的方法

　　行高

　　我们想象一下田子格，在一个田子格的上边缘和下边缘之间的距离就叫行高，文字默认在行高居中位置，假设有一段文章我们想要调整行与行间的行间距离，那么我们可以通过调整行高来间接调整行间距

　　rgb是一种颜色设置，通过截图工具右下角三个数值能准确定位颜色

　　Nine:表格

　　表格的简单模式为

　　（1）table是一个大大的块级元素，每一个tr代表着一行，tr中的td代表着每行中的一个元素

　　（2）通常情况下，我们会把第一行设置为来使得元素加粗居中达到标题显示的效果

　　（3）我们需要为表格设置边框（一共分为两个步骤）

　　步骤一：为td元素加上边框

　　步骤二：为table加外边框，并且将td边框和table边框合二为一重叠处理

　　下面是一个简单的例子，结合源代码再看一下这三条知识点就会很清晰

　　Ten:盒模型：盒模型是css布局的一块重要内容，通过盒模型我们搭建了一块块具有层级结构的网页模型，从盒模型衍生出了高度塌陷等经典的一些问题，我们逐步总结盒模型的一些知识

　　盒模型有四个组成部分：外边距边框内边距内容区

　　边框：我们可以给盒子设置各式各样的边框，从样式颜色长度三方面说明，给div盒模型设置一个红色实线长度为10px的边框

　　我们还可以单独的为四个边框设置不同的样式 border-top border-left border-right border-bottom（最重要的一点是设置边框时会增加原有盒子的长度和宽度，因此在布局时候我们需要谨慎操作）

　　内边距：内边距指的是内容区和盒模型边界之间的距离，有padding-left padding-right padding-top padding-bottom四种设置方法，通常用来调节内容区文字在盒模型的位置（最重要的是设置内边距同样会改变原来盒模型的长度和宽度，因此要提前设计出盒模型的内边距及其盒模型的整体大小）

　　外边距：外边距可以使盒模型移动，并且不会改变盒模型的大小，有margin-left margin-right margin-top margin-bottom四种设置方法，因为外边距不会改变盒模型的大小，因此利用外边距可以调节字体在盒模型的位置，我们举个例子（想要文字出现在盒模型的底部区域我们首先搭一个大的div盒模型里面嵌套p标签或者a span等等标签都可以并且开启浮动，如果是a span的话首先变为块级元素display:block 其次在设置padding-top挪动文字即可）

　　补充：如果想居中体现的话可以用 auto元素

　　Eleven:块级内联布局手段：这里我想着重说一下块元素内联元素之间的一些用法

　　块级元素支持盒模型的所有操作方法，相当于一个大的盒子

　　（1）内联元素不支持设置width heigth，我们需要通过设置内边距来调整内联元素内容的位置。

　　（2）通常来说我们把内联元素嵌套在块级元素中间，改变内联元素的宽高及位置并不会影响块级元素宽高及其位置。

　　（3）内联元素支持水平外边距的调节，不支持竖直外边距的调节

　　（4）想要更加自由的内联元素布局位置，我们可以开启浮动来支持调节竖直水平外边距，从而达到想要的精准位置

　　Twelve:高度塌陷问题

　　高度塌陷问题是指盒模型内部元素设置浮动之后，使得外部盒模型塌陷并且造成布局混乱的问题，我们放两张图片

　　上一下代码

　　一旦class为b的块元素开启了浮动，则造成塌陷

　　解决办法一：设置父元素宽度高度，但固定高度宽度不利于后续开发