html+css升华一篇就够了

作者: yanmingfei | 来源:发表于2020-01-15 10:01 被阅读0次

项目实战第一天

了解历史

如果只是要写程序，那的确是不需要这么麻烦，上来直接看一个语法，动手写上至少300行代码，做上3个应用程序，这门语言你也就差不多会用了，接下来不过就是练习和记忆。而且经过这么多年对于学习本身的研究，如果想要精通一样东西，研究促使它诞生的问题会更加准确的明白它的缺点和优点，以及理解它为什么会是这个逻辑，怎么改善等等。而研究历史的时候，有时候也会发现，因为当年某些限制条件无法实现的更好的解决方案，现在正是实施的时候。

了解W3C

W3C，这个由蒂莫西·约翰·“蒂姆”·伯纳·李爵士（Tim Berners-Lee）建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型（标准），以激发 web 世界的全部潜能。

W3C 在 1994 年被创建的目的是，为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作，并得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持。

正是由于w3c的介入才使得web在全世界飞速发展。

了解超文本标记语言HTML

HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版，这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始，最初是被设计成为“HTML的一个超集”。第一个正式规范为了和当时的各种HTML标准区分开来，使用了2.0作为其版本号。HTML+的发展继续下去，但是它从未成为标准。

HTML3.0规范是由当时刚成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的，但是实现这个标准的工作在当时过于复杂，在草案于1995年9月过期时，标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出，而下一个被提出的版本是开发代号为Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定浏览器，例如Netscape和Mosaic的元素和属性。HTML对数学公式的支持最后成为另外一个标准MathML。

HTML 4.0同样也加入了很多特定浏览器的元素和属性，但是同时也开始“清理”这个标准，把一些元素和属性标记为过时，建议不再使用它们。HTML的未来和CSS结合会更好。

HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。

XHTML1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。

XHTML 1.1，于2001年5月31日发布，W3C推荐标准。

XHTML 2.0，W3C工作草案。未实施（不接受）

XHTML 5，从XHTML 1.x的更新版，基于HTML 5草案。

HTML4.01 是常见的版本。

了解CSS

作用是排版，使用css是为了将html排版（按照设计稿）。

1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。

CSS2 作为一项 W3C 推荐，CSS2 发布于 1999 年 1 月 11 日。CSS2 添加了对媒介（打印机和听觉设备）和可下载字体的支持。

提出了div+css结构和样式分离的说法 CSS2规范在很大程度上扩展了CSS1中所完成的工作。它包括数十种新的属性（和伪元素），以及现有属性的很多附加值。 CSS2合并和精炼了用来定位的属性系列，让设计者可以更多地控制页面布局，DHTML作者可以创建动态动作效果。它比传统的排版元素，诸如短行、孤立行以及分页，提供了更多的控制。这表示样式表的发展已经考虑到了文档的HTML显示和打印两个方面。 CSS2还引入了一些属性，可以对表格元素外观提供附加的控制。作为W3C对提高网页可访性所做工作的一部分，新的样式表规范包括了很多专门针对非可视化网页显示的属性。这些新的属性提供了对语音传送和声音的控制。 遗憾的是其中的大多数样式规则在当时的浏览器中没有得到广泛的支持 ，在后来的CSS2.1中一部分被修改了，还有一部分被删掉了（像text-shadow属性在CSS2中被引入，CSS2.1中被删除，却在CSS3中又再次被引入）。

CSS3 CSS3 计划将 CSS 划分为更小的模块。 https://baike.baidu.com/item/CSS3

野史

当时在90年代初期，已经有很多草案，都是由程序员提出的，各种天书级别的语法。

1557279777575.png

1557279784587.png

最终的胜利，依旧还是使用者(设计师)的胜利，因为他们获得了更加简单的语言实现。CSS没有引入上述协议当中的变量部分，它简单的计算方式，但是它也没有难于精通，大部分的CSS只是在于你怎么控制文档流。

重点掌握

什么是HTML5

HTML5是HTML语言发展到现在的第5个版本，所以5是一个版本号；HTML最主要作用就是负责网页的结构；

HTML5的具体含义

html5主要包括几个部分：

html5=html5（标签）+css3（样式）+JavaScript（行为）+api（应用程序说明书）；

web前端标准

web前端标准指的是结构，样式，行为但是不区分版本号。负责颁布web前端标准的组织叫做w3c组织。

三项技术的作用

html是超文本标记语言，负责网页的结构；

css是层叠样式表，负责网页的样式；

js是脚本语言，负责网页的功能和特效；

什么是网站和网页

网站是由多个网页联系在一起构建出来的一个整体；

网页是由文字，图片，超链接等内容组成的一个HTML文档；

HTML

HTML简介

HTML指的是超文本标记语言（Hyper Text Markup Language）,作用是负责网页的结构，控制网页中的信息；专门写给浏览器看的一种标记语言；

什么是标签语义化？

就是用合理、正确的标签来展示内容

标签语义化的作用

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

HTML标签语法

HTML语言需要写在标签符号:<>里面，HTML标签成对出现，尾标签加上关闭符号:/区分首尾；

13331500-38c733f01b5d75b8-1557280908130.png

标签属性

标签属性的基本格式专业的称之为键值对：k=”v” ; 作用是设置标签的相关信息

13331500-b3f24a16f98a86cf.png

网页文档的基本结构

网页文档基本结构由4对标签组成：html，head，body，title。分别表示网页的整体，头部，主体，标题；

文档DTD

文档DTD指的是文档类型声明，作用是设置网页到底以哪一个html的版本去编译和渲染。html5文档DTD：<!doctype html>

字符编码

字符编码是用来设置不同语言的编译，utf-8是国际码可以编译全世界所有的语言；

html5字符编码设置：<meta charset="utf-8">

常见标签

h1-h6

img 属性src width height border title alt

ul li ol

dl dt dd (项目列表标签)

div

span

link和src的区别(重点记忆)

href (Hypertext Reference)是文件与文件之间的引用关系，重在引用关系。a标签和link标签

src (source) 是文件与文件之间的嵌入关系，就是将图片嵌入到文档中。

相对路径

./当前文件夹下直接查找

../上级文件夹下查找文件

images/从当前文件夹下找到images文件夹，继续查找

边距

盒子模型内容（宽高和高度）+内边距+外边距+边框

margin padding

外边距内边距

理解：比如买的电视机电视机就是内容，纸箱子就相当于边框，箱子与电视之间的填充物称之为内边距，纸箱与其它物体之间的距离称之外外边距。

外边距属性

margin，表示标签以外的距离；

内边距属性

padding 表示标签和内容之间的距离；

简写方式

1、可以单独指定某个方向的边距，例如：margin-top

2、内外边距有1-4个值的写法：

1个值：四个方向的距离；

2个值：上下和左右的距离；

3个值：上和左右和下的距离

4个值：上右下左

清空默认边距

所有的元素在不同浏览器下默认都会有边距，而且边距不统一，无法书写样式，解决办法清空默认边距

css选择器

*通配符表示选中所有标签最低

ID选择器一个网页只能有一个ID。1吨

class选择器类名选择器。1斤

tagName标签选择器。1克

后代选择器。就是空格如div p 表示选中里面的元素

并集选择器。就是逗号 div,p 表示div和p同时被选择中

交集选择器。两种选择器之间没有空格。如div.abc 表示选中标签为div且类名为abc的元素

+其后相邻唯一一个

~其后相邻所有。

表示第一级子级 div>p

CSS3选择器（在做响应式项目或者手机端项目可以使用）

样式

样式层叠性和继承性

层叠性就是后写的样式会把前面写的覆盖掉。

继承，父级的样式，子级会被继承（文本和字体控制基本上都可以继承）

css书写方式

行内式（不建议使用）

内嵌式写在style标签内部

外链式书写在单独的css文件中。通过在html网页中使用link标签引用过来。

背景

背景属性基本结构

background:背景色背景图片平铺方式水平位置垂直位置固定方式；

例如：background:#ccc url(pic.jpg) no-repeat left top fixed;

说明：

平铺方式有：no-repeat 不平铺；repeat-x 横向平铺；repeat-y 纵向平铺；

图片定位有两种书写方式：一种是特殊值形式，

例如：水平位置的值有：

left center right

垂直位置的值有：

top center bottom

；还有一种是给具体的坐标值：例如：

100px 200px;

注意：

坐标值接受负值；应用背景图片标签的左上角是坐标为0 0 的原点；

固定方式如果设置为fixed，则背景图片固定在网页某个位置；

背景属性简写方式

background-image

background-color

background-repeat

background-position

关于图片渐变相关的，一定先指定背景图，再指定背景颜色（渐变颜色），还要注意中间需要有逗号隔开。

background:url("http://www.wolfcode.cn/themes/simplebootx/Public/self/img/index/header_logo.png") no-repeat,linear-gradient(90deg,red 0%,green 100%);

水平居中

块级元素水平居中

通过指定margin:auto就可以居中，一般也是用外边距auto来实现版芯居中

行内元素和行内块元素水平居中

给当前需要居中的行内或者行内块元素的父级指写text-align:center;就可以居中

浮动流

float表示浮动对齐属性；它的值只有两个：left right（没有center）；它最终实现的效果就是让盒子水平排列。

网页布局中最稳定的方式是垂直排列，也就是块级元素的垂直排列。而盒子水平排列一般都是在某个盒子内部进行拆分排列的。

网页布局的原则：对于一个容器内部的所有同级盒子只能接受一种排列方式，要么是自然垂直排列，要么是水平排列（浮动），不能混用。

简单理解：同级标签之间水平排列和垂直排列只能用一种。

浮动塌陷

浮动的元素会导致父级没有高度或者高度为0.

导致的原因：父级没有指定高度，子元素又浮动

1557282571323.png

解决办法：

1.给父级添加overflow:hidden;

1557282646980.png

2.给父级内部添加一个元素，高度为0，且溢出隐藏，字体大小为0，并且要清除浮动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叩丁狼教育</title>
    <style>
        .father{width: 1200px; background: gold; margin: auto;}
        .child{width: 360px; height: 200px; background: pink; float: left;}
        .mid{margin: 0 60px;}
        .clear{ height: 0; font-size: 0; overflow: hidden; clear:both;}
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
        <div class="child mid"></div>
        <div class="child"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

[图片上传失败...(image-9cc99b-1579052471682)]

3.使用伪元素清除浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叩丁狼教育</title>
    <style>
        .father{width: 1200px; background: gold; margin: auto;}
        .child{width: 360px; height: 200px; background: pink; float: left;}
        .mid{margin: 0 60px;}
        .clearfix:after{ content:"";height: 0;display: block; font-size: 0; overflow: hidden; clear:both;}
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child"></div>
        <div class="child mid"></div>
        <div class="child"></div>
    </div>
</body>
</html>

1557282886027.png

总结：

第一种overflow：hidden会导致父容器如果有投影会剪切掉。第二三种就不会有这种问题，不过第二种兼容性更好，就是会造成标签滥用，第三种最好，不过有兼容问题。根据不同的效果使用不同的方式即可。

外边距塌陷

垂直外边距塌陷问题

1.嵌套结构之间，父元素有上外边距，子元素有上外边距，会产生重叠，以最大的值进行显示。并且，嵌套之间并没有产生分离。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叩丁狼教育</title>
    <style>
        .father{width: 100px;height: 200px; background: pink; margin: 30px 0;}
        .child{width:80px;height: 100px; background: gold; margin: 40px 0;  }
    </style>
</head>
<body>
    <div class="father">
        <div class="child"></div>
    </div>
</body>
</html>

1557283430885.png

2.垂直结构之间

都给定了上下边距，最终导致以最大边距显示，这种是可以避免的。

<div class="brother1"></div>
<div class="brother2"></div>

.brother1{ width: 100px;height: 100px; background: pink; margin: 40px 0;}
.brother2{ width: 100px;height: 100px; background: pink; margin: 60px 0;}

1557283944263.png

第一种情况，解决办法

1.给父元素添加overflow:hidden；让父元素重新去识别内容。

1557284900069.png

2.给父元素添加clearfix清除浮动这种办法不过要注意,清除浮动重在清除前面的浮动

.brother1{ width: 100px;height: 100px; background: pink; margin: 40px 0;}
.brother2{ width: 100px;height: 100px; background: pink; margin: 60px 0;}
.clearfix:after,.clearfix:before{ content:"";height: 0;display: block; font-size: 0; overflow: hidden; clear:both;}

<div class="father clearfix">
    <div class="child clearfix"></div>
</div>

第二种情况，解决办法是

1.要么给上面的元素一下下边距，要么给下面的元素上边距。但不能同时给定。

2.两个同级元素中间添加一个元素且添加类名clearfix(尽量不要用，用上面的就可以)

.brother2{ width: 100px;height: 100px; background: pink; margin: 60px 0;}
.clearfix:after,.clearfix:before{ content:"";height: 0;display: block; font-size: 0; overflow: hidden; clear:both;}

<div class="brother1"></div>
<div class="clearfix"></div>
<div class="brother2"></div>

1557285205892.png

栏式布局

圣杯布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叩丁狼教育</title>
    <style>
        *{margin: 0; padding: 0; list-style: none; border: none;}
        .box{ padding:0 300px; min-width: 600px; height: 400px; background: gold;}
        .center{ width: 100%; height: 100%; background: pink;  float: left;}
        .left{background: blue; width: 300px;height: 100%;  float: left;margin-left: -100%; position: relative; left: -300px;}
        .right{background: green; width: 300px;height: 100%;float: right;margin-left:-100%;position: relative; left: 300px; }
    </style>
</head>
<body>
    <!--圣杯布局-->
    <div class="box">
        <div class="center">欢迎大家来到叩丁狼学习代码</div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
</body>
</html>

1557286554954.png

双飞翼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叩丁狼教育</title>
    <style>
        *{margin: 0; padding: 0; list-style: none; border: none;}
        .box{  min-width: 600px; height: 400px; background: gold;}
        .center{ width: 100%; height: 100%; background: pink;  float: left;}
        .main{margin: 0 300px;}
        .left{background: blue; width: 300px;height: 100%;  float: left;margin-left: -100%;}
        .right{background: green; width: 300px;height: 100%;float: left;margin-left: -300px;}

    </style>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="main">
                欢迎大家来到叩丁狼学习代码
            </div>
        </div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
</body>
</html>

定位流实现栏式布局（兼容性最优）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叩丁狼教育</title>
    <style>
        *{margin: 0; padding: 0; list-style: none; border: none;}
        .box{  min-width: 600px; height: 400px; background: gold; position: relative;}
        .center{ height: 100%; background: pink; position: absolute;top: 0; left: 300px; right: 300px;}
        .left{background: blue; width: 300px;height: 100%;  float: left;}
        .right{background: green; width: 300px;height: 100%;float: right;}

    </style>
</head>
<body>
    <div class="box">
        <div class="center">
                欢迎大家来到叩丁狼学习代码
        </div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
</body>
</html>

实现原理：

中间定位流，父级相对，且中间元素不能加宽度，因为宽度是总宽减掉左侧和右侧后剩余的宽度。通过left:300px; right:300px;就可以实现这种效果。

左右两边直接浮动即可。

margin负值

容器盒子不指定宽度，可能通过margin给左右添加负值，使其宽度增大。常用方法也是做栏式布局。

1.容器给了宽度再添加margin负值表示，向哪个方向偏移
2.容器不给宽度再添加margin负值表示，向哪个方向增值

1557478583892.png

/*栅格化思想*/  中间的间距20
总共是四层。
第一层是版芯
第二层超出版芯（列表的父级） margin:0 -10px  -10是中间的间距/2
第三层(列表) width 1/个数*100%; 并且 指定padding:0 10px 10 是中间的间距/2
第四层(列表的内容)  这是我们关注的.
这种方法兼容IE8及以上浏览器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>10</title>
  <style>
      /*
          注意，这里面的东西不是我一开始就会的，而是去看别的框架设计才去弄懂。
              它是一种思想
              思想这种东西，不是一看就会的。需要沉下心研究。
              栅格化思想
      */
      .wrapper{width: 1140px;height: 400px; margin: auto;
          border: 1px solid #000;}
      .row{ margin:  0 -10px;height: 300px;}
      .item{width: 25%;float: left;height: 100px;padding: 0 10px; box-sizing: border-box;}
  </style>
</head>
<body>
<!--一行排四个，而且只有四个-->
<div class="wrapper "> 第一层
  <div class="row ">第二层
      <div class="item"> 第三层
          1 第四层
      </div>
      <div class="item"> 第三层
          2第四层
      </div>
      <div class="item">第三层
          3第四层
      </div>
      <div class="item">第三层
          4第四层
      </div>
  </div>
</div>
</body>
</html>

流派

标准流，要么横向排列，要么纵向排列，最稳定。

	行内	行内块	块级
水平居中	父元素指定text-align:center;	父元素指定text-align:center;	margin:auto;
垂直居中	父元素指定高度且指定行高	父元素指定高度且指定行高，自身且添加vertical:middle;	如果父容器高度指定，使用margin即可如果父容器高度不定，则通过绝对定位（position:absolute; left:50%; top:50%; margin-top:-height/2; margin-left:-width/2;）（position:absolute; left:0; top:0 right:0;bottom:0; margin:auto);
垂直边距	不生效如果想距离顶部有距离可以使用相对定位加top值即可	生效	生效

行内元素在垂直方向上（内外）边距不生效

1557287094250.png

1557287160282.png

行内块和块级元素都会生效

1557287233348.png

1557287255078.png

浮动流

1.浮动的元素会删除原来标准流中占的位置。进入浮动流占位。

2.浮动的元素不存在隔离性质。都是行内块。

3.如果都是在同级之间有元素浮动了会影响正常的标准流元素。

定位流

相对定位

相对定位是一种占位脱离；属性:position:relative;坐标值设置属性：left，top，bottom，right；

绝对定位

绝对定位号称彻底脱离；它是绝对不会在标准流中占任何位置。也不会影响标准流中的任何元素。属性：position：absolute；（子绝父相）

定位元素的图层顺序调节属性

属性名称z-index，作用是控制定位元素的上下显示关系，注意它只是表示一种图层顺序所以不带px单位。

固定定位

属性名称：position：fixed；作用：表示固定在屏幕上定位；

定位流总结：

left top bottom right 及z-index这些属性，必须结合定位流使用，其它两大流派，对这些属性不生效。

相对定位是相对于网页进行定位；绝对定位是相对于最近定位的元素进行定位，否则相对窗口进行定位；

网页布局总结

一、只要脱离标准流的元素，它的显示模式就会自动转换成行内块。块级元素只有在标准流中存在。（除了相对定位）

二、如果一个元素从标准流中脱离了，就相当于这个元素从标准流中删除了一样，它不会占位。

三、任何的一种流派指的都是同级元素之间的排列。

前面说过一个原则，同级标签之间水平排列或垂直排列只能用一个。也就是说同级标签中，浮动流或者标准流只能选其一

四、网页布局中最稳定的是标准流，其次是浮动流，最后是定位流（定位流使用起来比较麻烦，需要设置父级相对和坐标）。所以我们在网站制作中，优先考虑标准流，其次浮动流，最后是定位流。

box-sizing:border-box;

表示收缩盒子。默认我们书写 width padding border会增大盒子，不过如果期望百分比布局时候既不超出100%,又希望有padding，那么可以通过box-sizing:border-box；来实现。

兼容IE8及以上浏览器和主流浏览器

width padding border 会影响元素本身的宽度和高度。