前端学习-HTML(5)+CSS(3)篇01

2018-05-18 LYH学编程
前端Logo.jpg

大家好,我是lyh165,每天喜欢用17小时去工作和学习。
之前从事于后者(世界上有两种手机一种是其他手机,另一种是iPhone手机)dont ask my why.
现如今献血于(人生苦短,我用Python)期待于与吴恩达较于高下。
后于(UI设计、产品经理、技术总监、CTO、 我还有一个bug没改:然后die)

我打算用每周更新专栏五到六篇文章。不能做到每天一文是因为工作、学习、总结和概念以及编译成文章需要大量的时间。而且我是个疯子、疯子、疯子。花了17个小时都满足不了你们要求的疯子。就体谅一下吧。
一天24小时都不够用来学习的。你又什么资格去叹气!

大家可以扫码关注我的微信公众号.jpg

今天重点是  HTML5+CSS3好吗、 HTML5+CSS3好吗、 HTML5+CSS3好吗

今天发布的专题是前端HTML+CSS

对于前端学习,我只能推荐一个大众化的网站,大家猜到了吗?
没错,就是W3C
里面的HTML+CSS、HTML5+CSS3都有详细的讲解。如果想了解详细标签、选择器使用请查看文档即可,我们程序员是用到时去查。边学边进步。

好了,进入今天的主题。

前言

话说开头,我不想去说HTML是什么,其实它是什么我不太清楚。 好像之前有人叫它超文本标记语言。 卧槽,记这些历史性的东西,我觉得已经在这个社会毫无意义的。 我们现在的生活节奏快,我们需要快的节奏,快的吸收能力。 简称通俗易懂。所以,废话不多说。直接来点实际性的东西。 如果你觉得我说的不对,或者有必要去了解它的历史,请自行百度。 对不起,我的脑细胞不够用,装不了这么多的知识。


1、HTML
主要承载着页面的各种标签,通过不断地加盐加醋(像是MD5的加盐加密),
加盐加醋 就是加CSS渲染更好看的页面 加JS用来处理更多的交互信息。

那么开始标签入门啦。
标签也有人叫元素、盒子。我统一简称标签。
HTML包含各种各样的标签。下面是大多数使用到标签,说到标签。分为防止下面学习混淆。我多说几句。
标签分为3类:块标签、行内标签、行内块标签。(也有人叫它块元素、行内元素、行内块元素)

块标签独占一行
行内标签(多个可以并在一行,行内标签只有固定宽高,不能设置宽高)
行内块标签(块和行内标签的组合体  :  不会独占一行,可以并在一行,可以设置宽高)

标签包含

块标签  :div、p、ul、ol、li、dl、dt、dd、h1~h6、form;
行内标签  :a、span、em、strong、img、var
行内块标签:都可以以设置行内块标签。
行内块标签(内联块):
1、可以将一个  块  标签变成一个行内标签,
2、也可以将一个  行内  标签变成一个快标签。
3、通过CSS的display属性进行修改。
(例如div一个块标签转换成行内标签的写法是):<divstyle></div>
image.png
附上代码
<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>Document</title>
   <styletype="text/css">
   /*css的设置样式1
   一般存放在首页,增加读写速度,加快渲染。提高性能
   */

   h3{
       margin:0;
       padding:0;
   }
   .div1{
       background-color: yellow;
       width:400px;
       height:100px;
       text-align: center;
       line-height:100px;
       margin:0;
       padding:0;
   }
   a{
       background-color: cyan;
       text-decoration: none;
       margin:0;
       padding:0;
   }
   
</style>
</head>
<bodystyle="background-color: rgb(199,237,204);">
   <!-- style css内部设置样式 笨重,不能重用。不推荐方式 只推荐强制式修改  -->
   <h3>块标签、行内标签</h3>
   <!-- 块标签 -->
   <divclass="div1"style="background-color: yellow;width: 400px;height: 100px;text-align: center;line-height: 100px">我是div,块标签(会独占一行,可以设置宽高)</div>
   <br>
   <!-- 行内标签 -->
   <ahref="#"style="background-color: cyan;text-decoration: none;"backgron>我是a标签,行内标签(不会独占一行,不可以设置宽高)</a>
   <ahref="#"style="background-color: cyan;text-decoration: none;"backgron>我是a2标签</a>
   <ahref="#"style="background-color: cyan;text-decoration: none;"backgron>我是a3标签</a>
   <!-- 内联块标签 -->
   <h3>内联块标签</h3>
   <imgsrc="lyh165.JPG"style="width: 100px;height: 100px;">
   <imgsrc="lyh1651.JPG"style="width: 100px;height: 100px;"alt="我是img标签,属于内联块标签,不会独占一行,但是可以设置宽高">
   <br>
   <hr>
   <h3>标签的转换</h3>
   <!-- 块标签 转行内标签 -->
   <divstyle="display: inline;background-color: yellow;width: 400px;height: 100px;text-align: center;line-height: 100px">我是一个div块标签,却要转成一个行内标签了</div>
   <divstyle="display: inline;background-color: yellow;width: 400px;height: 100px;text-align: center;line-height: 100px">我是一个div块标签,却要转成一个行内标签了2</div>
   <ahref="#"style="display: block;width: 550px;height: 100px;text-align: center;line-height: 100px; background-color: cyan;text-decoration: none;margin-bottom: 5px"backgron>我是a标签,行内标签(不会独占一行,不可以设置宽高),但是我要转成块标签了</a>
   <ahref="#"style="display: block;width: 550px;height: 100px;text-align: center;line-height: 100px; background-color: cyan;text-decoration: none;"backgron>我是a标签,行内标签(不会独占一行,不可以设置宽高),但是我要转成块标签了2</a>
   <hr>
   <h3>块、标签并在一起使用,</h3>
   <!-- 块标签 转行内标签 -->
   <divstyle="display: inline-block;background-color:yellow;margin-right: 30px">我是div标签,居然堕落为跟a标签并为一行</div>
   <ahref="#">我是a标签,居然可以跟div标签并行</a>
</body>
</html>

嗯、我想想还有哪些初学者比较难的。
来个相对路径和一个绝对路径吧。通常是用于设置图片的路径

例如我创建一个项目叫project,
(下面结构包含image文件夹[包含lyh.jpg],index.html,lyh165.jpg)
树结构是
project
 index.html
 lyh165.jpg
 image(dir)
   - lyh.jpg
好了,看一下代码
<img src
="images/lyh.jpg"alt="产品图片"/>
那么是一个绝对路径。突然有一天,我把lyh.jpg移动到跟image文件夹同级
也就是
树结构是
project
 index.html
 lyh165.jpg
 lyh.jpg
 image(dir)
我们怎么去找呢
我们需要回到上一级目录。此时就涉及到一个相当路径。
(相对路径,顾名思义,相对于当前的路径去寻找文件)
(绝对路径,顾名思义,是一个绝对,绝对的值。死的路径)
我们通过./访问当前路径,则代码是
<img src
="./lyh.jpg"alt="产品图片"/>
../是放回上一级。

上面是我觉得比较难理解的。或者是初学者比较困扰的。
其他的标签我想一一介绍可惜后面还有CSS比较大的内容。
其他的标签,大家自行看看W3C都基本会用了啦。
或者大家还想详细了解的话,请疯狂微我(call我),我会查看消息。根据你的内容编写成文。
哦,还有讲一下HTML的基本结构

<!DOCTYPE html> 
文档的声明 ,声明这个文档是一个html文档,如果没有这个声明的话
那么这个文档将会以怪异解析 ,会导致样式不兼容,会以最低版本浏览器去解析
<htmllang="en">用来标记改文本是显示的什么语言
<head>
   <metacharset="UTF-8">用什么编码格(国际统一使用UTF-8,中国是GB2312、GBK)
   <title>Document</title>打开一个网页的时候 注意上面显示的是什么了吗
</head>
<!-- 1、标签建议全部小写 -->
<BODY>
   <!--2、属性用引号引起来 -->
   <divclass="aa"id=div></div>
   <!-- 3、标签应该闭合 成对标签应该成对出现,单个标签在结尾加 " /" -->
   <br>
   <br/>
   <!-- 4、image标签加上alt属性 -->
   <imgsrc="images/001.jpg"alt="风景图"/>
</body>
</html>

2、CSS 听说是包装。来美化HTML标签的。

正所谓,人靠衣装佛靠金装。一个人的包装是非常重要的。
你看现在的女生为什么会购买那么多的奢侈品、化妆品。是为了包装自己。爱美之心,人皆有之。
男生也喜欢打扮自己,为了追上自己心中的女神。
当然包装也不一定能带来美化,比如一个很素颜很漂亮的女生。让一个男生给她化妆,你能猜想出来是什么样。
犀利哥不包装之前多酷多帅,后来回归平淡生活。之前的霸帅气,也随之而去了。
包装一定要经过慎重思考哦。

CSS主要讲解的是
1、 标签坍陷(元素坍陷),
2、标签溢出(元素溢出),
3、浮动(用来打破文档流的),
4、定位(用来控制标签在哪里显示)
1、 标签坍陷(元素坍陷)

在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,
导致内部的盒子margin-top设置失败,解决方法如下:
1、外部盒子设置一个边框
2、外部盒子设置overflow:hidden
3、使用伪元素类:
.clearfix:before{
   content:'';
   display:table;
}
image.png

最终实现效果

image.png

2、标签溢出(元素溢出)

当子标签的尺寸超过父标签的尺寸时,
需要设置父标签显示溢出的子标签的方式,设置的方法是通过overflow属性来设置。
overflow的设置项:
1、visible 默认值。内容不会被修剪,会呈现在标签框之外。
2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父标签继承 overflow 属性的值。
标签溢出.png

最终实现效果

image.png

3、浮动(用来打破文档流的)

文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,
块元素占一行,行内元素在一行之内从左到右排列,
先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
---
1、浮动标签有左浮动(float:left)和右浮动(float:right)两种
2、浮动的标签会向左或向右浮动,碰到父标签边界、浮动标签、未浮动的标签才停下来
3、相邻浮动的块标签可以并在一行,超出父级宽度就换行
4、浮动让行内标签或块标签自动转化为行内块标签
5、浮动标签后面没有浮动的标签会占据浮动标签的位置,没有浮动的标签内的文字会避开浮动的标签,形成文字饶图的效果
6、父标签内整体浮动的标签无法撑开父标签,需要清除浮动
7、浮动标签之间没有垂直margin的合并

没有浮动的情况

image.png

最终结果

浮动最终结果.png
浮动代码
<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>浮动</title>
   <styletype="text/css">
       .box01,.box02,.box03{
           width:200px;
           height:200px;
           font:30px/200px'Microsoft Yahei';
           background-color:gold;
           text-align: center;
           margin:20px;
       }
   /*浮动 、打破文档流
   */

       .box01{
           float:left;
       }
       .box02{
           float:right;
       }
       .box03{
           float:left;
       }
   
</style>
</head>
<body>
   <divclass="box01">1</div>
   <divclass="box01">1</div>
   <divclass="box01">1</div>
   <divclass="box01">1</div>
   <divclass="box01">1</div>
   <divclass="box01">1</div>
   <ahref=""class="box01">这是一个a元素</a>
   <divclass="box02">2</div>
   <divclass="box03">3</div>
</body>
</html>

4、定位(用来控制标签在哪里显示)

relative 生成相对定位元素,元素所占据的文档流的位置不变,元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,
相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,
如果找不到,则相对于body元素进行定位。
fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,
可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
position: xxx;

相对定位(固定在之前的位置进行偏移)

相对定位代码
<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>相对定位</title>
   <styletype="text/css">
       .con{
           width:400px;
           height:400px;
           border:1pxsolid#000;
           margin:100pxauto0;
       }
       .condiv{
           width:200px;
           height:100px;
           margin:20px;
           background-color: gold;
           text-align: center;
           line-height:100px;
           font-size:40px;
       }
       body.box1{
           position: relative;
           left:50px;
           top:50px;
           background-color: green;
       }
   
</style>
</head>
<body>
<!-- 定位
   相对定位 position relative (之前的位置还是占用的)-->

   <divclass="con">
       <divclass="box1">1</div>
       <divclass="box2">2</div>
       <divclass="box3">3</div>
   </div>
</body>
</html>
相对定位.png
绝对定位


绝对定位代码
<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>绝对定位</title>
   <styletype="text/css">
       .con{
           width:400px;
           height:400px;
           border:1pxsolid#000;
           margin:100pxauto0;
           /*一般父级 设置为相对 不偏移*/
           position: relative;
       }
       .condiv{
           width:200px;
           height:100px;
           margin:20px;
           background-color: gold;
           text-align: center;
           line-height:100px;
           font-size:40px;
       }
       body.box1{
           position: absolute;
           left:50px;
           top:50px;
           background-color: green;
       }
   
</style>
</head>
<body>
<!-- 定位
   绝对定位 position: absolute
   (脱离自己的位置,去上一级寻找位置,如果上一级不没有,那么继续往上找,直到body为止,之前自己的位置不要了)
   -->

   <divclass="con">
       <divclass="box1">1</div>
       <divclass="box2">2</div>
       <divclass="box3">3</div>
   </div>
</body>
</html>
绝对定位.png
固定定位(是根据浏览器的页面是寻找位置的)


固定定位
<!DOCTYPE html>
<htmllang="en">
<head>
   <metacharset="UTF-8">
   <title>固定定位</title>
   <styletype="text/css">
       .con{
           width:400px;
           height:400px;
           border:1pxsolid#000;
           margin:100pxauto0;
       }
       .condiv{
           width:200px;
           height:100px;
           margin:20px;
           background-color: gold;
           text-align: center;
           line-height:100px;
           font-size:40px;
       }
       body.box1{
           background-color: green;
       }
       .box4{
           background-color: pink;
           position: absolute;
           left:100px;
           top:100px;
       }
   
</style>
</head>
<body>
<!-- 定位
   固定定位 是根据浏览器的页面是寻找位置的
   使用相对定位 就变成了行内块元素了
   -->

   <divclass="con">
       <divclass="box1">1</div>
       <divclass="box2">2</div>
       <divclass="box3">3</div>
   </div>
       <divclass="box4">第四个盒子</div>
</body>
</html>
--
固定定位.png


本站所有内容仅供本人订阅使用!RSS + Sitemap