前端个人总结HTML+CSS篇
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端个人总结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个月了
文章写的不好，轻喷，有啥好建议的大家多提，毕竟小白一枚，入门都没有，多多指教~
以上是关于前端个人总结HTML+CSS篇的主要内容，如果未能解决你的问题，请参考以下文章
2021前端面试经常被问到Javascript+HTML5+CSS+框架问题（89篇资料总结）