前端个人总结(1)HTML+CSS篇

从大一下学期接触,一直到今年,和html+css算是相识多年,老盆友了,最近一些认识的盆友,同学说是想学习前端,自己也开始慢慢停下脚步,不再拼命地去学很多框架的东西,回归到基础,慢慢把基础打牢

很多知识碎片一直来不及整理,本篇博客也没有说很多,哪个标签怎么使用啊,css样式的属性,属性值那些也没有提

第一次写博客,写的很零散,没有很强的条理性

html+css

html+css的发展,追溯到上古时代浏览器大战,一直到现在html5的盛行,html+css它俩从哪儿来,怎么来的,谁推出的,什么出现的,能用来干嘛,怎么使用,五个W+一个H学习方式;

html+css+javascript是,我们一般称为结构,样式,行为,在我们进行页面的排版的时候,通常会思考结构与样式的分离,这样我们对整个页面的结构,以及排版都会有一个清晰地概念,不会在维护和修改的时候,不知道从哪儿下手去修改

代码注释浏览器不会解析,通常会跳过,注释不仅仅给自己看,有时候下一位童鞋接手项目的时候,还有我们回头看自己写的代码的时候,

<!DOCTYPE html>

当我们新建一个html页面的时候,doctype已经声明了这是一个html文档,告诉浏览器我们的文档是啥,同时,文档这两个字,引出了整个页面的许多概念,比如说脱离文档流是啥,脱离了文档流又会怎么样

html--------结构

这是一个最基本的页面结构,html页面解析时,是从上至下开始解析,一个一个节点去渲染,绘制,展示

而页面的主要内容,通常会放在body标签中,html元素标签,都是语义化,body翻译过来我们便知道它在html中的作用了

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

  html的标签元素,用于展示整个页面的内容,包括文字,图片,视频等等,个人觉得html更像是一个容器,可以承载很多东西,每一个标签,则是承载每一个部分的内容,想要给用户或者网站的访问者展示和表达的细节,比如说title则是告诉用户页面的标题

<title>页面标题</title>

标签元素的分类中,有闭合标签和空标签,而他们的区别也有很多,闭合标签假如没有闭合的话,浏览器会正常解析,但是会出问题,啥问题大家可以去写个小demo看一下

  闭合标签

<div>我是一个div</div>

  空标签

<img src=""    /><br />

在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素和内联块状元素。

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

每一个标签,都会有很多属性,就像我们每个人都有相同的属性,也有不一样的属性,每个属性的作用都不一样

标签元素属性的写法

  <标签名 属性 = "属性值">  内容  </标签名>

在我们编写html代码的时候,会有很多值得注意的问题:

  1.元素在不同的浏览器,总有些变化,比如说input按钮大小,在谷歌浏览器和火狐不一样

  2.还有元素怎么用,啥行内元素,块元素,盒模型(古老的IE有着自己的盒模型),关键是还有这些标签什么用,怎么用,都要去思考,为啥用div不用table,怎么样尽量用最合适的元素进行页面的布局排版,减少不

必要的dom节点

  3.注释html代码的方式  <!--注释文字 -->

css---------样式

在我们进行页面结构完善的时候,开始对页面的元素添加样式,样式,包括对页面元素的颜色,大小,文字的颜色大小等等进行调整优化

说到颜色的时候,css的颜色的使用,又值得我们去探讨一番

对页面的样式的调整可以通过:

  1. link标签引入外部样式:

<link rel="stylesheet" type="text/css" href="theme.css" />

  2. 通过style标签

<style>

body {
    background:#333;
}

</style>

  3. 标签元素的style属性

<div style="font-size:18px;"> 

</div>

当我们需要对样式进行注释的时候

  /*

  注释内容

  */

对页面进行样式的调整时候,需要考虑的东西:

  1.不同浏览器的兼容的结解决方案,还有各个元素的属性,用哪个属性会更好一点,属性的使用该注意什么,比如说background和background-color使用的区别,哪种方案比较合适

  2.为什么尽量不写行内的样式,为啥样式是用link而不用import,style标签怎么使用

  3.在学习css的时候,就开始有了id,类,还有父级,子级等等,还有它们的用法,以及选择器的语义化

  4.伪类怎么用,伪类的执行顺序,伪类是啥,用了伪类的意义又是啥,可以拿来干嘛?

  5.css优化法则,怎么进行最好的优化,样式表文件怎么统筹

  6.各个浏览器的内核不一样,要做各种兼容,各种hack(兼容的解决),当然还有我们最喜欢的IE,简直不要太开心,特别是低版本的IE,哇咔咔

  7.每一行css为什么要这样写,写的意义是啥,有啥作用,如果不要呢,会怎么样,css怎么优化就最好,权重问题差点忘了,还有好多~

写的有点乱,抽时间再慢慢完善,学习html+css,可以去菜鸟教程看看,敲敲里面的小demo,整理成文件夹,多练习多总结总会有收获和体会的

http://www.runoob.com/html/html-tutorial.html

简单的总结了下html+css,不知不觉已经11月份了,抽时间写完html+css ---》 js  -----》html5+css3  -----》前端工程化,模块化,以及各类框架----》个人总结

基本今年基本就要过去了,时间过得很快,从7月份毕业到现在已经将近4个月了

  

文章写的不好,轻喷,有啥好建议的大家多提,毕竟小白一枚,入门都没有,多多指教~

时间: 2024-10-08 04:12:02

前端个人总结(1)HTML+CSS篇的相关文章

(转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇【转】

Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 答案:<!DOCTYPE> 声明位于文档中的最前

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 S

前端之旅HTML与CSS篇之IE6常见BUG

1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin时造成margin双倍(双边距)解决方法:display:inline 3.以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字的上面与下面,怎么分?IE6就会与其它的不同,所以,尽量避免.1)字体大小为奇数之边框高度少1px解决方法:

前端试题本(HTML+CSS篇)

CS1. 下面关于IE.FF下面CSS的解释区别描述正确的有?(不定项)CS2请选出结构正确的选项CS3.下面哪些是HTML5 新增的表单元素?CS4在使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值?CS5请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:CS6.如下代码,在空白处填写代码,是其点击时,前景色为白色,背景色为黑色.CS7浏览器会加载样式为"display:none"的图片?CS8.浮动的元素相对于容器的哪里?

前端之旅HTML与CSS篇之清除浮动塌陷

以下内容为转载. 方法1:给浮动的元素的上级添加高度如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动.只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素.所以就是清除浮动带来的影响了.所以只需要给li的上级ul或者div设置一个height:40px:(只要是浮动元素的上级元素就可以.),那么第二个div就好挤下来,在第一个盒子下面显示出来.方法2:clear:both;但是在实际开发过程当中中,高度height很少出现.为什么?因为能被内容撑高!那也就

【转】BAT及各大互联网公司2014前端笔试面试题:JavaScript篇

原文转自:http://blog.jobbole.com/78738/ 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题–Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.Jav

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 Hello,移动WEB Linux权限管理之特殊权限 Android高级特效-索引 原文出处: Ico_Coco 的博客(@CHoK__Coco_mAm)   欢迎分享原创到伯乐头条 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习

面试题2:BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit,Google与Opera Software共同开发) 2.每个HTML文件里开头都有个很重要的东西,Doctype,知道这

前端知识点总结(CSS篇)

圣杯布局 CSS合并方法 盒子模型 CSS定位 CSS动画原理 CSS3动画(简单动画的实现,如旋转等) CSS不同选择器的权重(CSS层叠的规则) flexbox布局 块级元素和行内元素的异同 CSS在性能优化方面的实践(比方说选择器的效率等) CSS打包压缩的方法 使用CSS预处理的优缺点(比方说Sass和Compass等) { box-sizing: border-box; }这条CSS规则是干嘛的,有什么优点 CSS浮动的原理及清除浮动的方法及优缺点 CSS垂直居中的方法 base64的