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

很多知识碎片一直来不及整理，本篇博客也没有说很多，哪个标签怎么使用啊，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的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. 程序员之路：以Android证道

    大道三千,何以证道? 最近有私信.邮件给我咨询一些职业生涯规划的同学,我在这里以过来人的身份给大家一些建议. 任何行业,任何职位,无论高低,无论大小,都可以分为广博.精深两个方向. 精深自然指的是在某 ...

  2. UITabBarController的一些基础设置

    利用代码添加UITabBarController - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpti ...

  3. dlib库使用

    最近的工作中用到了dlib这个库,该库是一个机器学习的开源库,使用起来很方便,直接包含头文件即可,并且不依赖于其他库(自带图像编解码库源码).不过由于是开源的,所以bug多少有一些,我在example ...

  4. 突破短板，传统桌面程序 使用webapi 扩展迎合web和移动端融合的需求

    传统桌面程序不能完全被web和移动端替代,但是需要改造.这里要说的是巧用webapi把以前用dll和com组件,ocx等方式做接口,做分布式开发的方式,改成restful 风格api的方式实现跨平台, ...

  5. Approvals for EBS 1.4 Now Available

    If you haven't been following the excellent Workflow blog, you might have missed the announcement ab ...

  6. CentOS安装epel

    Centos5安装    rpm -ivh http://dl.fedoraproject.org/pub/epel/5/i386/epel-release-5-4.noarch.rpm   rpm  ...

  7. Eclipse:Cannot complete the install because of a conflicting dependency.问题解决

    今天尝试在线更新ADT(22到23)的时候,遇到了这么个问题,从错误提示中初步看起来是存在引用的冲突: 估计大家在把22升级到23的时候都会遇上这个问题,新旧版冲突,感觉像是ADT自己的bug. 其实 ...

  8. ireport 导出工具类

    Ireport 报表导出 Poi + ireport 导出pdf, word ,excel ,html 格式 下面是报表导出工具类 Ireport 报表导出 Poi + ireport 导出pdf,  ...

  9. Silver Cow Party（最短路，好题）

    Silver Cow Party Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Su ...

  10. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理

    这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...