前端HTML与CSS入门&移动端布局-媲美黑马培训班2万学费的知识干货

作者 | 苏察哈尔灿
声明 | 原创作品 转载需注明出处,并附跳转链接.
寄语| 愿我们一马平川 ,我的江湖有酒 ,有诗有歌有远方,还有你.

感恩 | 如有误笔浅薄之处 ,望不吝指出 ,自当万分感谢!

总目录:

HTML部分

CSS部分

一: 初识HTML

 1. HTML的定义2.何为"超文本"3. 何为"标签"4. 何为"元素"

二: 初识浏览器

 1.前端开发常见的浏览器2.浏览器的内核3.网页与网站

三: 字符编码

 1.ASCII码2.GB23103.GBK国标码4.UNICODE万国码5:UTF-8/UTF-16

四: 从写代码到浏览器展示页面之间,到底发生了什么?

 1.何为"URL"2.URL的组成:3.常见的协议4.IP的组成5.域名与DNS

五: 常用的前端开发工具

 1.VsCode2.Sulime

六: HTML主干知识

 1.搭建HTML骨架2.常见的标签3.表单4.表格5.列表

初识HTML

(一):何为HTML:

HTML:英文Hyper Text Markup language首字母的缩写,中文我们一般叫它超文本标记语言.

HTML的超文本与HTTP(Hyper Text transfer Protocol)的超文本是一样的,所谓超文本有两层含义:第一层:超越文本的限制,第二层:超级链接,可以实现页面的跳转.

标签由一组组<>这样的尖括号组成.

标签分为单标签和双标签,单标签即一对尖括号组成

诸如 ,双标签由开始标签和闭合标签组成,诸如<a></a>

双标签内可以插入文本内容.

内容加上标签便构成了元素.

初识浏览器

一名前端开发人员必须了解的四款市场主流浏览器:

前端的代码是由浏览器负责解析渲染并显示到页面上的,没有浏览器的前端代码只是一坨字符每一个前端开发人员都有必要充分的了解浏览器.

1: 谷歌浏览器 chrome: 谷歌浏览器在浏览器的市场占有份额超过百分之50,是前端人员电脑里必备的浏览器之一,自带的检查工具(快捷键F12)可以调试页面的结构,样式和与用户的交互效果.

浏览器的内核相当于电脑的cpu,是执行程序的大脑部分.谷歌浏览器所用的内核为blink,blink内核是在苹果浏览器(safari浏览器)内核webkit上进行二次开发的内核,一经推出,迅速风靡,现在已占有绝大的市场份额

2:苹果浏览器 safari.苹果浏览器内核为webkit,大多数国产浏览器,以及风靡的谷歌浏览器内核blink都是基于webkit内核的二次开发.

后两款欧朋浏览器和火狐浏览器已经逐渐没落,作为了解即可:

字符集:

起初一群美国人试图用八个晶体管来表示各种状态,

每个晶体管都有打开和闭合两种状态,那么八个晶体管共有2的八次方即128种状态,美国人试图用这128种状态表示各种所需要的功能.

这128种状态所对应的关系即成为ASCII码.

而128种状态这种数量关系被定义为一个字节,一个字节对应8个bit,一个bit对应了一个晶体管的两种状态,即打开和闭合的其中之一状态.

用数字表示这种打开和闭合状态,即0对应闭合,1对应打开.

ASCII码并不是从1开始编写的,而是从0编到了127,共计128

伴随着互联网的普及,除了美国人以外需要使用代码来编写电脑程序,但原有的ASCII码只兼容了美国人的语言,所以外国人便开始在ASCII码的基础上做拓展,一直扩展到第255位,这部分的编码叫做扩展字符集

计算机普及到中国的时候,犯了难,中文博大精深,中文多如牛毛,原有的字符集根本表示不了中文,于是开始再做扩展,所做出来的编码被称为GB2312

后来发现GB2312还是不能兼顾所有的中文字符,依然有许多中文不能被很好的表达出来,于是再做拓展,所做出来的编码被称为GBK,又称为国标码.

计算机行业又再不断发展,各个国家之间的交流势不可挡,但是问题出来了.

每个国家都有自己的暗号,编码.但你自己的暗号我怎么知道?就好比跟美国人讲中文,他没学过中文根本听不懂你在讲什么,而学习的成本太高了,交流的成本也水涨船高.沟通成为了大问题.

岁月荏苒,一个国际组织出现了,他将各个国家的编码暗号做了整理与统一,组成一张表,这种表就被称为unicode编码,又称为万国码.多形象,万国的编码.

原来在编写ASCII码时,只用了1个字节便可对应一个英文,在unicode中汉语由于已经没有位置了,必须用两个字节才能表示一个汉字,由于这种表示的原因,unicode编码规定每个字符由两个字节表示,

但问题是

假如一篇文章中英文混杂,原本可以用一个字节就表示的英文,被强制两个字节表示,会造成极大的浪费.

为了解决诸如此类的问题,便在unicode编码的基础上,进行了再编码,通过复杂的技术解决了这些问题,这种解决方案叫做UTF-8,除了UTF-8解决方案外,还有UTF-16等方案.其中各有特点.

四: 从写代码到浏览器展示页面之间,到底发生了什么?

假设我们已经是一名成熟的软件工程师了,当写完代码之后我们应该做些什么?又会发生些什么有趣的事情呢?

当我们写完代码后,比如写了完了一个淘宝的网站,我们想要让互联网上的其他用户访问这个网站,就需要把它存放在Web服务器中,有些大公司比如BAT是有自己的Web服务器的,如果我们没有自己的服务器,就需要租赁他人的服务器,在其内开辟一个小空间,以供其他用户获取这些文件.

记住,服务器也是一台计算机.

当用户试图访问你存储在Web服务器的文件时,他必须键入一个网址,也就是url,即统一资源定位符,url由三个部分组成,比如我们熟知的http://www.baiddu.com,它的URL由协议部分,域名/IP部分以及资源路径部分组成

HTTP就是他的协议部分.HTTP全称超文本传输协议,常见的协议还有https,多出来的s即safe,安全的意思.如其所意,https协议比http在网络传输中更加安全.

其他常见的协议还有FTP,file,分别是网络文件传输协议,本地文件传输协议.

当我们想要在网络上给WEB服务器发送自己的Html,css文件时会用到FTP协议,当我们打开本地文件夹时,会用到file协议.

baidu.com即使百度的域名,但实际上我们并不是访问域名所对应的网站的,它比我们想的要复杂一些,在域名和Web服务器之间还有一层,它就好比80年代的接话员,打电话是不能直接接到联系的对象的,需要接话员转接,电话才能打通.

这一层也是由服务器组成的:DNS服务器.

我们每台计算机在互联网中都有唯一的标识,好比身份证一样,独一无二.诸如127.0.0.1这样的格式,当我们试图访问另一台计算机时,必须键入那台计算机的IP地址,这也不难理解.你不知道比人家在哪里,怎么访问?

但这样的数字组合过于抽象,难以记忆,于是聪明的程序员建立一套系统来形象的记忆这些IP地址,那就是域名管理系统,DNS.

每一个域名对应一个IP地址,一一映射,当你输入了百度的域名,DNS会帮助你转接到域名对应的IP地址那里从而实现访问.

而URL最后的部分,资源路径的部分,就是存储在Web服务器中你说需要文件的路径.

总结一下,当我们写完代码,然后存储到Web服务器之中.其他的用户需要到这个服务器中提取文件.他们在浏览器中输入了完整的网址,即URL,浏览器帮助链接DNS服务器,DNS服务器转接到Web服务器.最后用户的浏览器终于拿到了你所写的代码.于是浏览器的内核开始运转,解析,渲染,最终把一个完整的页面呈现在用户眼前.

常见的开发工具

简单介绍两款前端人员必备的开发工具

(一):VsCode:英文visual studio code.为微软公司开发,前端开发的主流工具之一,
1:安装汉化插件:打开VsCoDE,在软件左侧,最下边的那个按钮,是拓展商店.打开拓展商店,搜索chinese,安装该插件可以汉化该软件

2:open in broswer插件,同样的在拓展商店搜索OpenInBroswer 可以安装该插件,其功能是在代码区右键弹出的菜单框中出现OpenInBroswer选项,点击后会启动浏览器运行代码,在浏览器中预览执行的效果,也可以通过浏览器自带的调试工具测试代码

3:在保存文件时候自动格式化:自己写的代码总是歪歪扭扭,难看的不行.实现这个功能便可以在Ctrl+S保存时自动格式化.具体流程如下:

第一步:打开设置,在顶端的搜索框中搜索"settings.json"
第二步:添加如下代码"editor.fomatOnType":true,"editor.fomatOnSave":true
如果出现爆红,请检查原有最后一行代码的末尾是否添加了逗号.

4:CSS文件的格式化,添加了3中的代码中只能在Html文件中实现自动格式化,如果想在CSS文件中有格式化功能请安装插件"beautify",安装后在CSS页面右键点击,在弹出的菜单框中即可选择格式化功能.

(二):Sublime:该软件不自带语法提示的功能,也是需要插件才能实现.在任务栏中单击"首选项",选中PcakageControl 选项.随即在弹出的搜索框中继续搜索"install package" 软件可能会卡顿一会,稍等片刻后会再弹出一个搜索框,在其中搜索"Emmet"回车,安装成功重启电脑便可使用.shift+! 一键生成HTML骨架.

HTML骨干知识

(一) :HTML的骨架:

<!DOCUTYPE html>
<html><head></head><body></body>
</html>

其中第一行标签的意思是指定了HTML的版本.html作为一种标记语言,不断发展.现在已更新到H5的版本

所有的HTML结构都应该包含在<html></html>双标签中,html语言被包在html标签中,一点毛病都没有.

head标签中放一些较为重要的内容,比如引入外部css文件,指定标题等等 展示如下:

<link rel="stylesheet" href="index.html">
<link rel="shortcut icon" href="favico.ico">
<meta name="viewport" content="width=device-width , initial-scale=1.0, user-scalable=no , minimum-scale=1.0 , maximum-scale=1.0:">
<meta name="description" content="">
<meta name="keyword" content="">
<base target="_blank">

body标签中置放都是最核心的内容,有关结构的标签.下边为大家介绍HTML中常见的标签:

(二):HTML常用标签

(1):文本类标签:

<p>在此标签中插入一段文字,每一段文字用一个p标签间隔开</p><!-- hr标签英文为horizontal,意思为水平线.它是一个单标签,可以创建出一道水平分割线 -->
<hr /><!-- br标签英文为break,他可以使文本强制换行 -->
<br /> <!-- x可以是1-6的任一数字,标题标签,在其中包含的文字有字体粗体效果,以及字号增大的效果-->
<hx></hx><!-- 文本格式化标签 -->
<!-- 两组文本字体加粗标签,使用方法一样,但更推荐后者 -->
<b></b>    <strong></strong><!-- 两组文本字体倾斜标签,使用方法一样,但更推荐后者 -->
<i></i>    <em></em><!-- 两组删除线标签,使用方法一样,但更推荐后者 -->
<s></s>    <del></del><!-- 两组下划线标签,使用方法一样,但更推荐后者 -->
<u></u>    <ins></ins><!-- 预文本格式化标签:可以保留原有文本的样式,使用较少 -->
<pre></pre>

(二):图像类标签:

<img src="这里填图片的路径"><!-- 图像标签有几个常见的属性如下: -->
<img src="" alt="alt属性可以指定当图片加载失败后,显示指定的内容"><img src="" title="title属性可以指定当光标悬停在图片上时显示的提示文本"><img src="" width="" height="宽高属性可以限制图片的宽高"><img src="" border="border属性可以为图片指定一个实线边框" ><!-- filter 滤镜属性可以为图片设置一个模糊的程度,也就是一种马赛克 -->
<img src="" style="filter:blur(px)" >

(三): 链接标签:

链接标签的写法为:<a></a>,是一组双标签

1:外链接:
比如百度的链接:<a href=“http://www.baidu.com”></a>

外连接必须写完整的URL,如果不写协议部分,简写成这种格式<a href=“www.baidu.com”></a>,则会导致从本地寻找,其结果就是找不到地址.

2:内连接:
内连接在href属性中填写的是路径.

根目录是指当前正在编写的文件所在的文件夹目录,

相对路径是指从当前正在编写的文件根目录出发,目标文件的路径.

绝对路径是从磁盘角度出发的一个完整的文件地址,比如C:\ProgramFiles\Google\Chrome. 这个从C盘角度出发的完整路径,就是我的谷歌浏览器在我的电脑上的绝对路径

3:空链接

<!-- 空连接的两种写法 -->
<a href="#"></a>
<a href="javascript:;"></a>

4:锚点链接

锚点链接可以实现点击便跳转到指定位置的作用。比如本篇博客，当你点击目录中的“HTML主干知识时” 就会跳转到相对应的文本位置。

格式如下：

<a href="#test">点击，并开始跳转的地方</a>
<h3 id="test">需要跳转的目的地</h3>

5：target属性

<!-- 浏览器默认链接打开新页面的方式为在本页打开，如果想在新标签页打开就需要修改target--><a href="" target="_blank"><base target="_blank">

(四):input
input标签展示如下:

<input type="" required="required" autocomplete="none" placeholder="" multiple="multiple" autofocus="autofocus" maxlength="" name="" value="" >

input的属性有很多
input必须写的属性type:意思为类型的意思

其值可以为 text文本框,password密码框

button按钮框,radio单选框,checkbox复选框

submit提交数据,reset重置数据,image提交数据框并以图片形式出现,需要加在type=“image"后加上src=”"属性

file 上传文件 ,为其添加multiple=“multiple” 属性可以实现在文件选项中多选上传

然后H5CS新增的一些属性,分别有

placeholder="" 占位符属性,可以在例如text文本框中插入一段文字

required=“required” 可以指定字段必须填写

autocomplete=“on/off” 可以关闭自动补全功能,防止隐私外泄

autofocus=“autofocus” 可以实现在文本框以及多行文本框的自动聚焦功能

以下标签与input标签有千丝万缕的关系,也一并介绍给大家

第一种:label标签

<!-- label标签可以将文字和按钮连接起来,实现点击文字自动点击按钮的效果 -->
<!-- 有两种写法:第一种将所有内容包含在label标签中 -->
<label >男:<input type="radio" name="sex" value="nan" >
<label> <!-- 第二种写法:label标签采用for属性,input标签采用id属性 -->
<label for="connect">女:</label>
<input type="radio" name="sex" value="nan" id="connect">

第二种:文本域标签:

<!-- outline的属性是取消文本域框选中时的轮廓cols是指定一行多少个字rows是指定有的多少行resize:该属性是取消文本域的可拖拽性-->
<textarea outline="none" resize="none" cols="" rows=""><\textarea>

扩展:

单行文本限制字数:

<style>p {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
</style><p>强制一行换行</p>

多行文本限制字数,以省略号显示(有较大兼容性问题 ,此代码对webkit内核浏览器有较好兼容性):

<style>textarea {overflow:hidden;-webkit-line-clamp:3;text-overflow:ellipsis;display:-weblit-box;-webkit-box-orient:vertical;}
</style><textarea>强制只显示三行</textarea>

第三种:下拉框标签

option标签里的value属性是必须写的,在上传数据时,只能上传value中的数据值而select中name属性也是必须写的,否则无法上传属性
<select name="" ><option value="" selected="selected"></option><option value=""></option>
</select>

(四):列表

 无序列表,默认样式前面有小黑点
<ul><li></li>
</ul>
<!-- 有序列表 -->
<ol><li><li>
</ol>自定义列表 常使用的场景有网站页面内的底端
<dl><dh></dh><dt></dt>
</dl>

(五):表单域

在表单域中的元素的数据可以被上传提交.action属性指定了数据的上传地址
method属性制定了数据的提交方式,GET方法比POST方法上传数据的安全性差"<form method="GET/POST" action="" name=""></form>

(六):表格:

 width/height属性可以为表格指定宽高align属性可以为表格指定水平对齐方法,默认left对齐,值有center,left,rightborder属性可以为表格指定一个边框cellspacing是指定表格各个单元格之间的间隙长度cellpadding指定表格单元格的内边距border-collapse可以将重叠的边框合并 <!-----------------------------------------------------------------------------> <table width="" height="" border="" align="" cellspacing="" cellpadding="" sytle="border-collapse:none"><!-- 表格标题说明标签 --><caption></caption><!-- 表格头部 --><thead></thead><!-- 表格主体 --><tbody><!-- 单元行 --><tr><!-- 头部单元格 --><th></th><!-- 单元格 --><td><td></tr></tbody><!-- 表格注脚 --><tfoot><tfoot>
</table>

CSS部分

CSS目录:

一:何为CSS

 1::从书写位置定义2:从内容定义3:css的三个特性

二:选择器

 1:基础选择器2:复合选择器3:css3新增选择器

三:布局

 1:三种显示模式,显示模式的转换,元素的显示与隐藏,css3盒子模型2:pc端布局之标准流3:pc端布局之浮动4:pc端布局之定位5:移动端布局之流式布局6:移动端布局之flex布局7:移动端布局之rem布局8:移动端布局之响应式布局

四:样式

 1:字体类样式2:文本类样式3:边框类样式4:边距类样式5:背景类样式6:移动端样式

五:css3新特性

何为CSS

CSS,也被称为层叠样式表.

css对已写好的html结构进行美化,完善外观.

从css文件存放的位置上来说,css分为三种:行内样式表.外部样式表和内部样式表

<!DOCTYPE html>
<html lang="en"><head><style>写在html文件中的head标签中的style标签的样式被称为内部样式表</style></head><body></body>
</html>

<!DOCTYPE html>
<html ><head></head><body><p style="color:#333">写在body标签中的元素标签内的样式被称为行内样式表</p></body>
</html>

<!DOCTYPE html>
<html lang="en"><head><!-- 存储在外部,需要通过link标签引入的样式表被称为外部样式表 --><link rel="stylesheet" href="css/index.css"></head><body></body>
</html>

从css的内容上来说,css就是选择器+样式+布局在后面会详细介绍选择器,样式和布局.

css的三个特性分别是:继承性,层叠性,优先级

  1. 继承性,父亲的某些属性可以被孩子继承.不可以继承的属性有：
    width,height、padding、margin 、border、display、text-decoration、background、 float、clear、overflow等
    以继承的属性有：font、text-indent、text-align、line-height等

  2. 层叠性:css样式以键值对的形式出现,即属性和值出现,当相同的属性被赋予了不同的值,最后写的属性的值会将老的值覆盖,这种特性叫做层叠性.

  3. 优先级:代码的执行顺序除了"从上到下,依次执行"之外,还有另外一套系统控制了代码执行的优先级,即权重.不同写法的权重并不相同.

选择器 权重
通配符选择器/继承的权重 0,0,0,1
标签选择器,伪元素选择器权重 0,0,0,1
id选择器权重 0,1,0,0
行内样式表权重 1,0,0,0
!important 权重为无穷大
权重的计算方式为累加,谁的数值大谁执行,规则为永远不进位.如十个0,0,0,1的标签选择器的权重也没有一个权重为0,0,1,0的属性选择器权重大

选择器
基础选择器 通配符选择器,标签选择器,类选择器,ID选择器
复合选择器 后代选择器,并集选择器,子代选择器,伪类选择器,兄弟选择器,交集选择器
C3新增选择器 结构伪类选择器,伪元素选择器,属性选择器

下面通过代码的方式演示:

基础选择器

<!-- 基础选择器之通配符选择器 -->
<!-- 为所有标签更改样式,如下,为所有标签清除内外边距 -->
<style>*{margin:0;padding:0;}
</style>

<!-- 基础选择器之标签选择器 -->
<!-- 为指定标签更改样式,如下,为所有div标签设置文字颜色 -->
<style>div {color: #333;}
</style>

<!-- 基础选择器之类选选择器 -->
<!-- 为一个类更改样式,如下,为text类设置文字大小 -->
<style>.text{font-size: 20px;}
</style>
<body><p class="text">示例文本</p>
</body>

<!-- 基础选择器之ID选择器 -->
<!-- 为一个指定ID的标签更改样式,如下,为ID为test的标签设置背景颜色 -->
<!-- ID选择器只能调用一次 -->
<style>#test{background-color: #eee;}
</style>
<body><div id="test"></div>
</body>

复合选择器

<!-- 复合选择器之后代选择器 -->
<!-- 为子盒子设置宽高属性 -->
<!-- 后代选择器由两个标签选择器组成,每个标签选择器之间保留一个空格 -->
<style>div img {width: 200px;height: 200px;}
</style>
<body><div><img src="data:images/xxx.png"><img></div>
</body>

<!-- 复合选择器之子代选择器 -->
<!-- 为子盒子设置宽高属性 -->
<!-- 子代选择器也由两个标签选择器组成,每个标签选择器之间加入一个 > -->
<!-- 子代选择器只能选中儿子辈的,而不能选择孙子辈的,所以只能选中no1图片 -->
<style>div>img {width: 200px;height: 200px;}
</style>
<body><div><img src="data:images/no1.png"><img><a><img src="data:images/no2.png"><img>    </a></div>
</body>

<!-- 复合选择器之并集选择器 -->
<!-- 为两个盒子同时设置宽高属性 -->
<!-- 并集选择器一般由两个类选择器组成,中间保留一个逗号 -->
<style>.brother1,.brother2 {width: 200px;height: 200px;}
</style>
<body><div class="brother1"></div><div class="brother2"></div>
</body>
<!-- 复合选择器之伪类选择器 -->
<!-- 伪类选择器有   :linked 链接未点击时的样式 :visited 链接点击过后的样式:hover 鼠标经过悬停时的样式:avtive 鼠标点击还未松开时的样式 -->
<!-- 并不是只有链接才能使用伪类选择器,其他的标签也可用,这里知识拿链接举例 如果这几个链接同时出现,必须符合LVHA的顺序-->
<style>a:linked {color:#333;}a:viseted {color: #skyblue;}a:hover {text-decoration: none;}a:active {font-size: 12px;}
</style>
<body><a href="#"></a>
</body>

<!-- 复合选择器之交集选择器 -->
<!-- 适用于相同类名,不同标签的情况.将div中的文字更改为红色 -->
<style>div.box {color: red;}
</style>
<body><div class="box">实例文本div</div><p class="box">实例文本p</div>
</body>

<!-- 复合选择器之相邻兄弟选择器 -->
<!-- 相邻兄弟选择器只适用于兄弟之间,相邻的被选中.如下代码只会修改第一个P的文字颜色而不会修改第二个p的文字颜色 -->
<style>div+p {color: red;}
</style>
<body><div>实例文本div</div><p >实例文本p1</p><p >实例文本p2</p>
</body>

<!-- 复合选择器之属性选择器 -->
<!-- 属性选择器可以根据标签内的属性选中标签.其中 ^ 代表属性值以什么开头;*=代表属性值包含什么;$= 代表属性值以什么结尾.可以不写属性值 -->
<style>/* 选中所有含有class属性的div标签 */div[class] {background-color: #eee;}/* 选中class属性,并且属性值为box_1 的div标签 */div[class="box_1"] {color: skyblue;}/* 选中class属性,并且属性值以01 开头的div标签 */div[class ^= "01"] {color: red;}/* 选中class属性,并且属性值中包含 box 的div标签 */div[class *= "box"] {color: blue;}/* 选中class属性,并且属性值以4结尾 的div标签 */div[class $= "4"] {color: purple;}
</style>
<body><div class="box_1">实例文本div</div><div class="box_2">实例文本div</div><div class="01_box_3">实例文本div</div><div class="box_4">实例文本div</div>
</body>

<!-- 复合选择器之伪元素选择器 -->
<!--  伪元素选择器是将原有标签打开,在原有标签的前边或者后边插入一个行内元素 -->
<!-- 注意事项:1: 必须写content属性 2:单标签不能使用 3: 插入的为行内元素  -->
<style>div::before {content: '前面';}div::after {content:'后面';}
</style>
<body><div>实例文本div</div>
</body>

<!-- 复合选择器之结构伪类选择器 --><!--  -child和-of-type的语法相同,但使用场景不同.前者适用于相同的结构,比如ul中只有
li的情况,后者适用与不同的结构,比如div中嵌套了多种类型标签的情况.代码展示如下 --><style>/* 为ul中的第一个li修改样式 */ul li:first-chird{color: red;}/* 为ul中的最后一个li修改样式 */ul li:last-child {color: purple;}/* 为ul中的指定个数的li修改样式.括号内可以跟具体的数字,代表为第几个修改样式.也可以写表达式如(n) 其中n为从0自增的表达式,表示为从0开始至最后一个li修改样式也可以填写(n +2 )表示为从第二个开始至最后一个li修改样式.也可以填写(-n + 3) 表示为从第一个到第三个的li修改样式.也可以写(even) 表示为所有偶数个的li修改样式;(odd) 为所有奇数个li修改样式  */ul li:nth-child(2){color: blue;}div p:first-of-type{}div p:last-of-type{}div p:nth-of-type{}
</style>
<body><ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul><div><span></span><p></p><p></p><span></span></div>
</body>

布局

一:PC端布局:

布局类型 特点
标准流 块元素的特点:1:独占一行 2:可设宽高 2:子盒子与父盒子同宽 3:可容纳块/行内/行内块元素; 特例:有关文本的块元素内不能容纳块元素,如P标签内不能容纳div;
行内元素的特点:1:一行多个 2:不可设宽高 3:宽高由内容撑开 4:可容纳行内元素 特例: a标签内可容纳块/行内块元素
行内块元素的特点:1:一行多个 2:既可设宽高,宽高也可由内容撑开 3:行内块一行排列时有空白间隙 4:可容纳行内块/行内元素
浮动 什么是浮动:即 float:left/right;
浮动的特点: 1:转为类行内块,可设宽高; 2:脱标,触碰边缘则停止(脱离标准流的控制,触碰到标准流或者另外浮动元素的边缘停止) 3:顶端对齐,一行显示 4:一行空间不够另起一行(解决办法:可以增大父盒子的宽,或者减小盒子的外边距) 5:text-align:center对浮动盒子无效(即使闭合了浮动,也无法通过此法使其居中) 6: 浮动元素不压文字和图片(可用此特性做文字环绕效果) 7:压后不压前(浮动的元素会压住后边的标准流,前面的标准流不受影响)
清除浮动的两种方法: 伪元素法:.clearfix::after{content:'' ; display:block; height:0; visibility:hidden; clear:both; } .clearfix{*zoom=1;} 双伪元素法:.clearfix::before,.clearfix::after{content:''; display:table;} .clearfix::after{clear:both;} .clearfix{*zoom=1}
定位 什么是定位: 定位=定位模式+边偏移
定位模式 1:静态定位:position:static; 与标准流相似,用处不大 ;
定位模式 2:相对定位:position:relative; 特点1:相对定位以自己为参照系进行边偏移 2:相对定位保留原先位置 ;
定位模式 3:绝对定位:position:absolute; 特点1:祖系若有定位以祖系为参照系进行边偏移,若祖系无定位,则以body为参照系移动 2:绝对定位不保留原先位置,完全脱标 3:子绝父相:子盒子为绝对定位,父盒子经常使用相对定位 ;
定位模式 4:固定定位:position:fixed; 特点1:固定定位以视觉视口为参照系进行边偏移 2:固定定位定位不保留原先位置,完全脱标 ;
定位模式 5:粘性定位:position:sticky; 特点1:粘性定位以视觉视口为参照系进行边偏移 2:粘性定位定位保留原先位置 3:粘性定位兼容性很差,使用时要注意浏览器的兼容性;
定位显示优先级 对定位的盒子设置 z-index:;可以指定重叠盒子显示的优先级.默认数字为0

显示模式的转换

 display:flex / box / block / inlline-block / inline ;

元素的显示与隐藏

     1. display : block / hidden ;-----  block : 显示元素 ----- -----  hidden : 隐藏元素,不保留原位置. ----- 2.overflow : hidden / visible / auto / scroll;------ hidden : 溢出部分隐藏 ----- ------ visible : 溢出部分显示 ----- ------ auto : 溢出时以滚动条方式显示 , 不溢出时无滚动条 ----- ------ auto : 溢出时以滚动条方式显示 , 不溢出时也有滚动条 ----- 3. visibility : hidden / visible;------ visible : 显示元素  ----- ------ hidden : 隐藏元素并保留位置  -----

二:移动端布局:

移动端布局与PC端布局的不同
移动端的屏幕尺寸是做移动端网页最关键的问题之一,当PC端的布局移植到移动端时,会产生缩放,而缩放的效果往往是不如人意的,为了解决这个问题,让用户即使在手机,平板电脑上也能看到舒适的网页,针对移动端有一些特定技术需要学习,下面让我一一道来吧

1): 流式布局

流式布局也叫百分比布局,盒子宽度不再使用px做单位,而是采用%,这样做的好处是能在不同的屏幕尺寸下实现相同比例的布局效果.但流式布局不能解决盒子高的问题,高依然需要写成px.

往往单一的流式布局很难完成比较良好的移动端页面效果,流式布局经常与其他移动端布局技术搭配使用.由于比较简单,不再过多叙述.

1): flex布局

flex布局中对嵌套结构的盒子中的父盒子称为父项 , 对子盒子称为子项

父项属性:

  • display:flex

    父盒子设置为flex,其子盒子无论是块元素还是行内元素全部可以直接设置宽高
并一排显示;未设置flex属性值,不能使用flex布局中的其他属性

  • flex-direction:row / row-reserve / column / column-reserve

    设置主轴,默认值为row.  row:从左到右按照X轴排列, row-reserve:从右到左按行排列 column 从上到下按照Y轴排列 column-reserve,从下到上按照Y轴排列

  • flex-wrap: nowrap / wrap;

     nowrap:不换行 ; wrap:换行 ; 该属性可以设置在主轴排列是否换行.flex布局中所有元素一行排列,若不设置换行,即使一行的盒子总宽度已经溢出了布局宽度,也只会不断压缩.

  • flex-flow: flex-direction flex-wrap ;

      flex-direction属性和flex-wrap属性的合写形式,可以同时指定主轴和是否换行;

  • justify-content: flex-start / flex-end / center /space-around / space-between / stratch;

    flex-start:若X轴为主轴,即在X轴上从左到右排列,紧贴屏幕左侧.
若Y轴为主轴,则在Y轴上从上到下依次排列,并紧贴屏幕上方; flex-end:在X轴上从左到右排列,紧贴屏幕右侧.
若Y轴为主轴,则在Y轴上从上到下依次排列,并紧贴屏幕下方. spacing-around:所有盒子平均分配剩余空间. space-between: 最左和最右的盒子贴边,其余盒子平均分配剩余空间. stratch:将盒子拉伸,为默认值,给盒子设置了高就不会生效.center:居中排列

  • align-items: flex-start / flex-end / center /space-around / space-between;

    用法与justify-content大致相同.不同的是该属性是指定侧轴盒子的排列方式.
并且是侧轴为一行时的情况,也就是 flex-wrap:nowrap时的情况;

  • align-conten: flex-start / flex-end /center / space-around / space-between;

      用法与align-items大致相同.不同的是该属性是指定侧轴为多行时的情况,也就是 flex-wrap:wrap时的排列盒子的方式;

子项属性:

  • order:0;

      order的属性值默认为0,可以修改这一数值.数值越高的数字排列顺序越靠前.

  • align-self: : flex-start / flex-end /center / space-around / space-between;

      用法与align-items大致相同.不同的是该属性是指定侧轴上的某一个盒子的排列方式;

  • flex:1;

      该属性值可以为数字,也可以为百分比.表示某个盒子所占空间的份数,或者百分比宽度

REM布局

(一):em与rem

1. 与px不同,rem与em都是字体的相对单位;2. rem是相对于HTML中font-size的字体单位,一份HTML标签内的字体大小等于1rem;em是相对于父盒子中font-size的字体单位,一份父盒子标签内的字体大小等于1em

(二):媒体查询:

1. 媒体查询是连接媒体(屏幕,打印机等)与布局效果的桥梁;2. 语法格式为: @media 媒体类型 连接词  (查询条件) {控制语句;
}媒体类型: all / screen / print  连接词: not / only / and查询条件 :max-width: / min-width:3. 在link标签内使用媒体查询引入不同的css文件:<link rel="stylesheet"  href="xxx.css"  media="screen and (min-length:320px)">

(三):常见的移动端屏幕尺寸与媒体查询:

常见的移动端屏幕尺寸有:320px / 360px / 375px / 384px / 400px / 414px / 424px 480px / 540px / 720px / 750px

<style>
@no: 15;   @media screen and (min-width:320px) {html {font-size: (320px / @no);}
}@media screen and (min-width:360px) {html {font-size: (360px / @no);}
}@media screen and (min-width:375px) {html {font-size: (375px / @no);}
}@media screen and (min-width:384px) {html {font-size: (384px / @no);}
}@media screen and (min-width:400px) {html {font-size: (400px / @no);}
}@media screen and (min-width:414px) {html {font-size: (414px / @no);}
}@media screen and (min-width:424px) {html {font-size: (424px / @no);}
}@media screen and (min-width:480px) {html {font-size: (480px / @no);}
}@media screen and (min-width:540px) {html {font-size: (540px / @no);}
}@media screen and (min-width:720px) {html {font-size: (720px / @no);}
}@media screen and (min-width:750px) {html {font-size: (750px / @no);}
}
</style>

(四):rem两种布局方案:

1. flexible.js + remcss插件flexible.js 是阿里团队开源的一个库.将其引入后,会把当前屏幕尺寸分为十份,以一份的的大小设置为html标签内的font-size.即1rem.需要注意,如果只需要做移动端布局,当大于750px时就不需要再动态指定了,可以通过媒体查询写死大于750px屏幕尺寸的布局.该文件可以动态的适配布局cssrem插件是VScode的一个插件,可以自动将px单位转成rem单位.需要在扩展文件中设置根字体大小2. 媒体查询 + easyless插件easyless插件也是vscode的插件,less有自己的一套语法,向下兼容css,可以编译生成css文件.less的优势在于可以弥补css中计算的薄弱项目(css也能计算,使用calc函数),可以直观的计算出当前屏幕尺寸下1rem的大小,以及每个盒子的宽高.

响应式布局

(一):BootStrap框架

 什么是Bootstrap ? Bootstrap框架最核心的两部分分别是栅格系统和组件库.栅格系统是一套明确了规则快速开发布局模板,使用栅格系统可以快速高效的开发出在不同屏幕尺寸下的不同布局效果 . 组件库内是已经写好的html结构和css样式, 你可以在官网上预览它的视觉效果 , 如果满意的话就按照它提示的方法复制粘贴到自己的代码中 , 如果你依然不满意 , 还可以在此基础上做个性化的调整.

使用方法:

  1. 进入 Bootstrap中文网 : https://www.bootcss.com/
  2. 按提示依次点击,下载Bootstrap文件并解压


4.


5. 在html文件中引入BootStrap的css文件

 在href中填写正确的文件路径<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

(二) : 栅格系统的使用

1 ) 栅格系统内置了四个档次的屏幕尺寸

  • 小于768px为超小屏幕 , 用 xs 表示 (Extra Small的缩写)
  • 处于(768px - 992px]为小屏 , 用 sm 表示(Small的缩写)
  • 处于(992px - 1200]为中等屏幕 , 用 md 表示 (Middile的缩写)

2 ) 布局容器.

 使用Bootstrap栅格系统开发, 必须将所有的元素放进内置的大容器中 , 这个容器的类名应为.container这个最大的container容器 , 由一列列组成 , 每一列的盒子类名应为 .row .在row中放入若干col* , 并为每一个列设置所占空间大小
功能 类名
设置列空间大小 col-屏幕类型-份数(总共12份)
列偏移 col-屏幕类型-offset-偏移份数 ; 由于每一列是左浮动的,所以只能向右列偏移
列排序 col-屏幕类型-push-向右移动的份数 ; col-屏幕类型-pull-向左移动的份数
仅显示 visible-屏幕类型; 仅在该屏幕类型下显示该列,其他时候隐藏
仅隐藏 hidden-屏幕类型 ; 仅在该屏幕类型下隐藏该列,其他时候显示

代码演示:

注意事项: 1.栅格系统每一行被分成12份, 每一列所占份数的总和必须小于等于122. container容器和所有col*列容器都内置了左右15px的内边距可以自己写样式手动取消他们, 也可以通过添加row容器抵消这一影响3. col*列容器底层是使用左浮动排列的,中间无缝隙,若您的row容器已经被列容器填满, 就不能再添加列容器的外边距.否则使列容器掉下来栅格系统骨架:<div class="container"><row> <div class="col-lg-6"></div><div class="col-lg-6"></div></row><row></row><row></row>...
</div>列偏移:<div class="container"><row> <div class="col-lg-6 col-lg-offset-3"></div></row><row></row><row></row>...
</div>列排序:<div class="container"><row> <div class="col-lg-6 col-lg-push-6">1盒子</div><div class="col-lg-6 col-lg-pull-6">2盒子</div></row><row></row><row></row>...
</div>仅显示与仅隐藏:<div class="container"><row> <div class="col-lg-6 hidden-sm">1盒子</div><div class="col-lg-6 visible-lg">2盒子</div></row><row></row><row></row>...
</div>

样式

(一): 文字类

(二) : 文本类 :

(三) :边框类

(四):边距类:

(五) : 背景类:

(六): 转换类:

(七) : 动画与过渡类

(八) :光标类

(九) :手机端初始化相关

(十):其他:

前端HTML与CSS入门-一份媲美黑马培训班2万学费的知识干货相关推荐

  1. 【前端学习】CSS入门

    前端学习:CSS入门 文章目录 前端学习:CSS入门 前言 1.class01 1.我的第一个CSS 2.导入方式 3.基本选择器 (1)ID选择器 (2)标签选择器 (3)类选择器 4.层次选择器 ...

  2. python与html5_python前端HTML和CSS入门

    前端阶段课程介绍 1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery 00-知识点预习 1.HTML基本结构 2.HTML的常用标签 3.HTML布局 ...

  3. web前端基础与CSS入门

    web前端基础 1.嵌套列表 注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...

  4. 前端「HTML+CSS」零基础入门学习笔记

    HTML+CSS入门笔记目录 一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...

  5. （转）web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  6. html 布局兼容性,HTML+CSS入门 浏览器兼容性问题及解决方案

    本篇教程介绍了HTML+CSS入门 浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象: ...

  7. vue 导入公共css_HTML+CSS入门 vue引入通用CSS

    本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...

  8. css 高度塌陷_HTML+CSS入门 HTML高度塌陷以及定位详解

    本篇教程介绍了HTML+CSS入门 HTML高度塌陷以及定位详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲 ...

  9. html纵向的跑马灯效果,HTML+CSS入门 如何实现跑马灯/走马灯效果

    本篇教程介绍了HTML+CSS入门 如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...

最新文章

  1. 看得“深”、看得“清” —— 深度学习在图像超清化的应用
  2. 人类虐待机器人却遭反杀，这段人造视频在网上爆红，网友：心疼机器人
  3. java.net.inetaddress_java.net.InetAddress类的应用
  4. 芯片数据手册datasheet哪里找？
  5. Oracle与MySQL性能比较
  6. python扫盲系列--（4）
  7. java 多线程池_Java项目中，线程池中线程数量太大会有什么影响？
  8. 不懂这11个隐藏技巧，别说你会用微信
  9. html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式...
  10. png、jpg、gif那些事情
  11. Axure电商后台业务管理系统原型模板+app电商原型交互+移动端电商通用PRD文档+全局交互用例说明+Axure高保真电商社交prd文档
  12. 二叉排序树[2005年华中科技大学计算机保研机试真题]
  13. 捕获 PHP 致命错误 Fatal Errors
  14. PHP指定字段的多维数组排序方法
  15. System x 服务器制作ServerGuide U盘安装Windows Server 2003 操作系统
  16. SAP ERP的版本演变基础知识
  17. 四旋翼电池、电机、螺旋桨选型与搭配
  18. MySQL：explain结果中Extra：Impossible WHERE noticed after reading const tables
  19. 30行代码实现蚂蚁森林自动偷能量
  20. PyTorch搭建ANN实现时间序列预测（风速预测）

热门文章

  1. 万能的越狱视频下载器：从iOS应用中提取视频
  2. 如何提高机器人专业课讲师的收入
  3. 企业私有云Owncloud（1）--介绍
  4. 腾讯云自动巡检python脚本
  5. 使用CSS将图像进行模糊处理
  6. android屏幕大小字体大小,文字大小和不同的Android屏幕尺寸
  7. 在React Native和Node.js中验证iOS订阅收据
  8. 【张尧学与一等奖】乐见政府退出科学分歧 欣闻校长不避同行争议
  9. 终端设备在网络中的作用
  10. Nat. Light | 深度学习在全息和相干成像中的应用