div、span、p标签
这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.
元素的类型:
块级元素: 默认情况下独占一行的元素, 如: div p h1~h6 br hr
行内元素: 默认情况下, 多个行内元素可以处在同一行。如：span，input，font。。。
CSS概述
CSS：层叠样式表，可以用来美化html页面， 通过CSS设置样式， 可以实现展示数据的html代码和设置样式的CSS代码的分离，增强了网页的显示能力！
在html页面中引入css样式的方式
通过标签上的style属性引入css样式
大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式
这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展.
通过style标签引入css样式
在head标签内部, 可以提供一个style标签, 在style标签内部可以选中元素进行修饰!
这种方式是将所有的css代码放在一个style标签内部统一进行管理, 初步的实现了html代码和css代码的分离.
通过链接引入外部的css文件
通过head标签下的link标签可以引入外部的css文件
这种方式是将所有的css代码放在一个独立的文件中进行统一管理, 真正的实现了html代码和css代码的分离.
选择器
所谓的选择器可以 帮助我们在html中选中想要修饰的标签进行修饰的技术
基本选择器
标签名(元素名)选择器
通过标签的名称选中指定名称的标签进行样式的修饰
格式: 元素名{}, 如: span{}
<span></span>
<span></span>
类(class)选择器
通过标签上的class属性, 可以为标签设置所属的类, 所有class值相同的标签则为一类, 可以通过标签名选择器选中这一类的标签进行修饰.
格式: .类名{ css属性 }, 如: .c1{}
<div class=”c1”></div>
<p class=”c1”></p>
<span class=”c1”></span>
ID选择器
通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签
格式: #id值{ css属性 }, 如: #d1{}
<div id=”d1”></div>
扩展选择器
后代选择器
在父选择器选中的元素内部, 再选中指定的后代元素进行修饰
格式: 父选择器 后代选择器{ }
如: 选中div下所有的后代span à #d1 span{}
子元素选择器
在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰
格式: 父选择器>子元素选择器{ }
如: 选中div下所有的子元素span à #d1>span{}
分组选择器
可以将多个选择器选中的元素统一来设置样式
选择器1,选择器2,选择器3,…选择器n{}
属性选择器
可以通过属性条件选中元素进行修饰
格式: 选择器[属性条件..]{}
如: 选中所有的普通文本输入框 à input[type=’text’]{}
<input type=”text” name=”xx”/>
<input type=”submit” name=”xx”/>
相邻兄弟选择器
如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.
格式: 大哥+小弟{ }
伪元素选择器
伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态
状态分为如下几种:
:link 表示元素未被点击时的状态
:hover 表示光标(鼠标)悬停时的状态(掌握!)
:active 表示元素被点击时的状态
:visited 表示元素被点击之后的状态
外边距/边框/内边距
margin – 外边距
margin-top:30px
margin-left: 30px
margin-bottom: 30px
margin:10px 20px 30px 40px/* 上 右 下 左 */
margin:10px 20px 30px/* 上 左右 下*/
margin:10px 20px/* 上下 左右 */
margin:10px/* 上下左右 */
注意: 垂直外边距合并的现象:
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
border – 边框
border: 1px solid red
border-width:10px
border-style:solid
border-color:blue
border-top-width:10px
border-right-width:5px
border-bottom-width:15px
border-left-width:5px
border-width:10px
border-style:solid double dotted dashed
padding – 内边距
padding:10px 20px 30px 40px/* 上 右 下 左 */
padding:10px 20px 30px/* 上 左右 下*/
padding:10px 20px/* 上下 左右 */
padding:20px/* 上下左右 */
常用的css属性
元素类型的补充
块级元素:
默认情况下, 块级元素可以独占一行
块级元素可以设置宽和高
如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)
如果设置, 就是设置的宽和高.
给块级元素设置的外边距/边框/内边距都会起作用
行内元素:
默认情况下, 多个行内元素可以处在同一行
不可以设置宽和高, 其中宽和高由内容决定
给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!
display属性 -- 设置元素的显示方式
block: 块级元素的默认值
inline: 行内元素的默认值
inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)
none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间
visibility: hidden 这种方式也可以隐藏一个元素, 但是这种隐藏只是元素不显示了, 在原位置仍然占用空间
text-align 设置元素中文本水平对齐方式
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
list列表属性
list-style-type: none/disc/square/circle...
字体属性
font-size
font-weight
font-family
color
line-height
text-decoration
背景属性
background-color
背景色设置
background-image
背景图片设置
background-repeat
设置或检索对象的背景图像是否及如何铺排
background-position
设置或检索对象的背景图像位置
其他
width 设置宽度
height 设置高度
框架标签
frameset – 定义一个框架集合
frame – 定义框架集中的一个窗口
easymall页面练习
略
css导图:
今天小编要跟大家分享的文章是关于零基础的Web前端初学者如何学习Web前端知识。web前端开发要学的知识内容涉及的会很宽泛，虽然说主要是HTML、CSS和JavaScript这些基础知识点，但学前端开发除了要学这些基础知识外，学员还要在这之上进行延伸和深入的去学，而且互联网时代不断发展，掌握了这些新技术、新技能，在职场的竞争力必然会翻倍提升。那么零基础的学员该如何学习web前端知识呢?下面来和小编一起看一看吧！一、零基础学web前端开发要怎么去学?
首先要学习的就是基础知识：HTML、CSS和JavaScript。HTML是内容，CSS是表现，JavaScript是行为。前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发的领域有很多自学成“才”的同行。HTML是最基础的，现在流行的是HTML5设计，能更好的为移动端服务，要先学会网页布局。CSS是用来美化HTML页面的为页面提供布局和格式。最后再学JavaScript。
二、web前端基础知识要怎么合理安排学习?
1熟练掌握HTML基本知识，包括每个标签的用法等。这个是前端开发的信息结构。
2、熟练掌握DIV+CSS基本知识，这个东西基本就是前端的基础了，它可以将你写的东西直观的展示出效果给你看，这个就是前端开发的显示效果。
3、学习JavaScript编程，深入学习，包括jquery等框架。js东西会比较多。Js就是前端的行为和数据交换。
4、学习一门简单的后台编程语言，比如asp或者php，对自身会有一定的帮助。
三、如何学习最新的HTML5+CSS3技术
上述简单阐述了前端开发要怎么学，主要是从学习的基本点来描述的，另外说下最新的HTML5+CSS3了，这些与时俱进的东西一定要看。在学习HTML/CSS的时候，一定要边学边练习，通过这些练习来巩固、理解自己的知识。其次学习JavaScript首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!
四、如何学习最新的JavaScript技术
就前端开发要怎么学的问题，在这里也提醒大家明白一点，如果你只想当一个普通的前端程序员，你只需要记住大部分JavaScript函数，做一些练习就可以了。但如果你想深入了解JavaScript，你需要了解JavaScript的原理，机制。需要知道他们的本源，需要深刻了解Javascript基于对象的本质。
还需要深刻了解浏览器宿主下的Javascript的行为、特性。一个优秀的前端工程师更需要深入了解、以及学会处理Javascript的这些缺陷。
五、如何学习提高其它方面的知识点
当然除了以上这些基础的知识点，软件之外，并不能足够解决前端开发要怎么学的问题，作为一名优秀的前端开发工程师要时刻保持一种学无止境的态度!
首先，优秀的web前端开发工程师要在知识体系上既要有广度和深度。做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
以上就是小编今天为大家分享的关于零基础的Web前端初学者如何学习Web前端知识的文章，希望本篇文章能够对正准备学习web前端工作的小伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们学习成功，工作顺利，成为一名优秀的web前端工程师。
