web页面制作基础（部分重要知识总结）

一、html

1.标签

是由w3c提前制定好的一些针对于html文档的标记符号,这些符号是具备各自的含义的。具体在html中的变现形式 由 < > 括起来的对象 比如: html  head  body

需要注意的是:

        ①标签通常是成对出现的,但也有极少部分只有开始标签,没有结束标签  称作 单标签或者空标签 比如:meta

        ②标签是允许嵌套的,但是要符合嵌套的标准

通常,我们也会将标签称作为元素 ，例如：根元素  、head元素等

比较重要且常用的标签：

        ①列表标签

                1>有序列表,表示如下：

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
    

                2>无序列表，表示如下：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

                3>定义列表，表示如下：

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</dl>

        注：列表之间是可以相互嵌套的

        ②超链接标签 （a标签）

                1>可以访问到外部网络的资源

                 2>可以访问本地网页资源

                3>可以作为锚点，在当前页面指定位置进行定位跳转

        ③img标签：用于渲染，图片资源的标签

        ④div标签和span标签

小tip：href和src的区别：

href和src都是指向外部资源地址或者本地资源地址

不同点：

href属性:

        1>通过该属性去关联另一份外部资源文件

        2>如果被关联的资源文件，在页面渲染时需要用到该资源中的内容时，它会下载该资源，

        3>如果需要下载资源文件内容时，并行下载的方式，不会阻塞页面的渲染

src属性：

        1>通过该属性去访问到对应的外部资源，并替换掉该标签的内容

        2>src属性肯定是会下载对应路径的资源的

        3>src的下载不是并行下载，在页面渲染时如果遇到src那么会将该资源全部下载完毕并且解析后，才会继续渲染页面后续的内容（src会阻塞页面的渲染）

2.属性

通常格式：key=value（注：有时候只有key没有value，即表示逻辑值的时候）

①全局属性：全部元素都具备（例id，class，style等等）

②局部属性：只能某些元素使用

3.常用的语义化标签

标题标签（h1-h6标签）、段落标签（p标签）、i/em标签（斜体）、b/strong标签（粗体）、blockquote/q标签（引用）等等。

4.元素的分类及特点

①块元素

        1>块元素具有布局特点,一般常用页面的整体布局

        2>块元素独占(其父元素)页面的一行

        3>块元素可以嵌套任何类型的元素(除p元素以外,p元素中不能嵌套任何的块元素)

        4>块元素可以设置宽,高  默认的宽度是其父元素的宽度

        5>块元素默认高度是由内容决定的

②行内元素

        1>正常情况下,行内元素是不会换行的

        2>行内元素会在一行排不下时进行换行

        3>行内元素不能设置宽 高  行内元素的宽和高都是由其内容决定的

        4>行内元素一般不会嵌套块级元素,大多数是嵌套文本或者其他的行内元素

③行内块元素

        1.行内块元素不会独占一行,在一行排列

        2.可以设置宽高(默认是内容的宽 高)

注：元素之间可以相互进行转换，使用diaplay:block(inline/inline-block);

5.文件路径

①相对路径：与当前的文件是没有联系的，不是根据当前该文件所处的位置去访问对应的资源。

②绝对路径：从当前文件出发去寻找其他的资源，当前的位置为中心。

二、CSS

1.引入css的方法

①行内样式：直接在标签内通过style=""设置。

②内联样式：在head标签里写style标签，在其编写样式即可。

③外联样式：通过link标签引入外部的css文件。

2.选择器

①基础选择器：元素选择器、id选择器、类选择器、通配符选择器

②复合选择器：交集选择器、并集选择器

③关系选择器：子代选择器、后代选择器、兄弟选择器

④属性选择器：例：[tytle="name"]

⑤伪类选择器：
        1>结构伪类（  :first-of-type  |  :last-of-type  |  :nth-of-type()  ）

        2>动态伪类（  link  |  hover  |  active  |  visited  ）

⑥伪元素选择器（  ::first-letter  |  ::first-line  |  ::selection  |  ::before  |  ::after  ）

3.单位

①长度单位：px、em、rem、vh和vw

②比例单位：%

③颜色单位：颜色单词、RGB格式、RGBA格式、#十六进制

4.css三大特性

①层叠性：当有多个相同选择器或者同类型的选择器选中同一个元素，并为其设置同一个样式属性的不同属性值，会优先使用靠近元素的选择器所设置的样式。

注意：当选择器权重（优先级）不同时，无法通过层叠性解决样式冲突

②优先级（权重）

通配符选择器<元素选择器<类/伪类选择器<id选择器<行内样式<!important（无限大）

③继承性：子元素（后代元素）继承父元素（祖先元素）已经定义过的属性（即字体相关 、字体颜色、 列表相关的、文本相关的等）。

5.文档流（常规流）

①文档在文档流中（默认情况）

②元素脱离文档流：

        1>一旦元素脱离文档流，将不再占据文档流中的位置

        2> 脱离文档流后，元素不再有任何的区分，统一视作一致的，没有区分

        3>脱离文档流的元素可以设置宽高，不会独占一行

6.盒模型

①标准盒模型（w3c）：盒模型： 内容区  +  边框  +  内边距 + 外边距

        1>内容区：width、height

        2>边框：border-width（边框的大小）、border-style （边框的样式）、border-color （边框的颜色）【可简写成border: （三个值）;】

        3>内边距（padding）：padding-top、 padding-bottom、padding-left、 padding-right

                简写属性 padding 同时指定四个方向的padding  

                        -  4个值   上 右 下 左

                        -  3个值   上 左右 下

                        -  2个值   上下  左右

                        -  1个值    上下左右

        4>外边距 （margin）：margin-top、margin-bottom、margin-left、margin-right（同padding的用法一致）。

注：margin属性支持负数值。

②IE盒模型（怪异盒）：通过css的属性box-sizing 更改盒模型的种类。

7.默认样式的处理

①手动清除

*{
    margin：0；
    padding：0；
}

②引入专门的样式文件，进行清除（link引入）

Normalize.css 和  Reset.css

8.元素的浮动

元素可以通过设置float属性，让一个子元素向其父元素的左侧或则右侧移动

float：

        - none  默认值 ，元素不浮动，正常状态

        - left  元素向左浮动

        - right 元素向右浮动

注：元素设置浮动后会脱离文档流。

9.元素的溢出

使用ovflow：hidden；语句，如果发生溢出，将溢出的部分进行裁剪

10.高度塌陷以及外边距折叠的解决方法

<style>
    .clearfix::after,
    .clearfix::before {
        content: '';
        clear: both;
        display: table;
    }
</style>

11.定位（position）

position：

        - static  默认值，元素是没有开启定位的，静止的

        - relative  为元素开启相对定位

        - absolute  为元素开启绝对定位

        - fixed     为元素开启固定定位

        - sticky    为元元素开启粘滞定位

注：还有一个属性是z-index，只有开启了定位的元素才能使用，修改它的层级。

12.元素的背景属性

①background-color 设置背景颜色

②background-image  设置背景图片

③background-repeat  用于设置背景的重复方式

④background-position 用来设置背景图片的位置

⑤background-clip 设置背景的范围

⑥background-size 设置背景图片的大小

注：以上属性都可简写成background: ;

13.表格（table）

①如何合并单元格：

        rowspan  纵向单元格的合并

        colspan  横向单元格的合并

②表格相关的样式属性：

        border-spacing  指定表格边框之间的距离

        border-collaps 设置边框是否合并

注意：tr标签不是table的子元素，即便tbody省略的情况下！

14.表单（form）

①form标签的属性：

         - action  填写数据最终提交到服务器地址

        - methed  方法 ，提交  get  post

②表单相关的控件：

        - label 绑定控件，指导用户

        - input 决定输入控件的类型

                type属性：

                        - radio 单选框控件

                        - checkbox  复选框控件

                        - text    文本信息

                        - password  密码框

                        - button    按钮框

                        - number    数值

        - select 下拉列表控件

                - option  下拉列表项

        - textarea  富文本框（多行文本）

        - button

15.弹性盒子

①弹性容器：开启了flex属性的元素称作为弹性容器

        弹性容器的css属性：

                1>flex-direction 指定容器中元素的排列方式（更改主轴）

                        - row  默认值  弹性元素在容器中从左往右水平排列  -  主轴

                        - column  弹性元素在容器从上往下垂直排列 -  zhu'zhou

                2>flex-wrap  设置弹性元素是否在容器中自动换行

                        - nowrap  默认值 ，不会换行

                        - wrap    沿着侧轴换行

                3>flex-flow 是flex-direction和 flex-wrap的简写形式

                4>justify-content  设置弹性元素在主轴上的排列方式

                        - flex-start  沿着主轴排列 （默认值）

                        - flex-end    沿着主轴反方向排列

                        - center      主轴水平居中排列

                        - space-around  分配空白区域

                        - space-between  分配空白区域

                        - space-evenly   分配空白区域

                 5>align-items  元素在侧轴上的对齐方式，排列方式

                        - stretch 默认值  

                        - flex-start  沿着侧轴起点排列

                        - flex-end   沿着侧轴终点排列

                        - center     在侧轴上居中对齐

                    - baseline    基线对齐

                6>align-content  分配侧轴元素之间的空白（注意该属性一定是 flex-wrap: wrap;  ）

                        -  flex-start

                        -  flex-end

                        -  center

                        -  space-between

                        -  space-around

②弹性元素（项目）：弹性元素就是该弹性盒下的直接的子元素

        1>order  定义项目的排列顺序 ，值越小 越靠前，默认值都是0

        2>flex  指定盒子的伸缩

        3>align-self  用来覆盖当前元素上的align-items  ，指定单个元素在侧轴上对齐的方式

16.过渡（transition）

①transition-property ： 指定要执行过渡的属性 属性1，属性2

②transition-duration : 指定过渡持续的时间， 默认值是0  瞬间发生

③transition-timing-function ： 指定过渡效果的时许函数，运动轨迹

④transition-delay  ： 过渡开始的延迟时间，等待一段时间开始过渡效果

也可以用transition简写属性。

注意：采用简写属性时，一定要将过渡时间写在延迟时间的前面！

17.动画属性：animation

①必须设置一个关键帧，关键字设置了动画执行的每一个步骤，每一个画面

@keyframes 动画名{
    from {
        css样式属性
    }
    to {
        css样式属性
    }
    注意：除了使用from 和 to  还可以将整个动画流程看成是100%进度 
}

②使用动画

        1>animation-name  指定对当前元素生效的关键字名字

        2>animation-duration  设置动画播放的时间

        3>animation-delay  设置动画的延迟时间

        4>animation-iteration-count  设置动画播放次数  可以是 任意数值 或者 infinite 重复无限次

        5>animation-timing-function  设置动画播放时元素的时许函数（运动函数） 

        6>animation-direction  设置动画的运行方向

        7>animation-play-state  设置动画的暂停和播放

        8>animation-fill-mode  设置动画的填充模式

简写：animation: name duration timing-function delay iteration-count direction fill-mode;

三、总结

1、通过这段时间的学习将以前学的网页知识进行了巩固，通过做练习将知识进行巩固，每天应该将老师讲的知识进行梳理。

2、在使用绝对定位的时候通常忘记给它邻近的父元素（祖先元素）开一个相对定位，以至于每次设置后找不到我设置的定位元素。

3、在设置弹出框的时候要注意用z-index修改乘积，以及设置弹出的时候选择器也要写对，不然就会出现选不中的情况。

最后

以上就是端庄蜡烛为你收集整理的web页面制作基础（部分重要知识总结）的全部内容，希望文章能够帮你解决web页面制作基础（部分重要知识总结）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。