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

很多知识碎片一直来不及整理，本篇博客也没有说很多，哪个标签怎么使用啊，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. Linux探秘之I/O效率

    一.文章来由 最近看了<UNIX环境高级编程>,对以前比较模糊的一些知识结构又做了进一步的加强,特别是前两章讲到不带缓冲的文件I/O和带缓冲的标准I/O,对read.write.fread ...

  2. easyui 键盘控制tree 上下

    $.extend($.fn.tree.methods, { highlight: function(jq, target){ return jq.each(function(){ $(this).fi ...

  3. ASP.NET 网站支持多语言

    ASP.NET网站支持多语言 (本地资源文件和全局资源文件的调用及需注意的地方总结)   一.   本地资源文件(App_LocalResources): ①.     本地资源的生成及调用 1.本地 ...

  4. Tmux 常用命令与快捷键

    命令与别名 attach-session [-dr] [-t target-session] 别名 attach,连接会话. detach-client [-P] [-a] [-s target-se ...

  5. 自己动手搭建 CAS(Central Authentication Service) 环境，为了单点登录（Single Sign On , 简称 SSO ）

    介绍 刚刚搭建 CAS 成功了,现在记录下来,怕以后忘记,同时也给需要帮助的人.CAS 搭建需要服务端和客户端,服务端是 Java 写的,如果自己搭建则需要安装与配置 Java 环境.客户端可以是多种 ...

  6. thinkphp -- 解决连接mssql后台管理菜单显示中文乱码问题（备忘）

    一开始使用的是mysql,数据库的编码是UTF-8 后来换数据库,mysql换成mssql2005,数据库编码为GBK,管理菜单出现乱码,如下所示(左图正常,右图乱码) 解决方法如下: 第一,查看数据 ...

  7. DDD：四色原型中Role的 “六” 种实现方式

    背景 一个实体在不同的上下文中具备不同的职责,如:产品在“生产完成上下文”中具备的一些职责,在“质检相关上下文”中具备另外一些职责.四色原型.DIC和“UML事物模式”在不同的维度阐述了这一情况,在代 ...

  8. Linux的一些命令

    程序 # rpm -qa                # 查看所有安装的软件包 系统 # uname -a               # 查看内核/操作系统/CPU信息 # head -n 1 / ...

  9. window xp Apache与Tomcat集群配置--转载

    转载地址:http://www.cnblogs.com/obullxl/archive/2011/06/09/apache-tomcat-cluster-config.html 一. 环境说明 Win ...

  10. Network - 对比net-tools与iproute2

    net-tools VS iproute2 net-tools与iproute2大比较