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

很多知识碎片一直来不及整理,本篇博客也没有说很多,哪个标签怎么使用啊,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. ubuntu 修改默认root及密码

    安装完Ubuntu后忽然意识到没有设 置root密码,不知道密码自然就无法进入根用户下.到网上搜了一下,原来是这麽回事.Ubuntu的默认root密码是随机的,即每次开机都有一个新的 root密码.我 ...

  2. 【Xamarin报错】AndroidManifest.xml : warning XA0101: @(Content) build action is not supported

    部署xamarin.forms android时报错: Android\Properties\AndroidManifest.xml : warning XA0101: @(Content) buil ...

  3. IOS内存管理学习笔记

    内存管理作为iOS中非常重要的部分,每一个iOS开发者都应该深入了解iOS内存管理,最近在学习iOS中整理出了一些知识点,先从MRC开始说起. 1.当一个对象在创建之后它的引用计数器为1,当调用这个对 ...

  4. oracle 语句创建表空间、用户、授权

    /*分为四步 */ /*第1步:创建临时表空间 */ create temporary tablespace yuhang_temp tempfile 'D:\oracledata\yuhang_te ...

  5. 实现3D旋转效果的方法

    Android中有一种旋转效果,是将一个图片进行360度的旋转. Matrix的作用是对平面上的View进行缩放.平移.旋转,每一种操作都配了setXXX.preXXX.postXXX三个函数. Ca ...

  6. Android 2.1 和 Android 4.4 工程目录超详细对比及详解

    在搭建Android开发环境及简单地建立一个HelloWorld项目后,本篇将通过HelloWorld项目来介绍Android项目的目录结构.本文的主要主题如下: 1.1.HelloWorld项目的目 ...

  7. Java知多少(111)数据库之修改记录

    修改数据表记录也有3种方案. 一.使用Statement对象 实现修改数据表记录的SQL语句的语法是:    update表名 set 字段名1 = 字段值1,字段名2 = 字段值2,……where特 ...

  8. [SLAM] Studying Guidance

    Books from Zhihu: 幽默一把 看完Gonzalez:嗯,好像很好玩的样子,我也来搞一搞.看完Price:什么鬼,怎么这么多公式,公式看不懂肿么破.看完Szeliski:原来用一千页的书 ...

  9. [ML] Naive Bayes for email classification

    20 Newsgroups (Original) Author: Jeffrey H 1. Introduction This is only a test report for naive baye ...

  10. 2016 SDCC会后总结

    很荣幸作为前端专题讲师参加2016年SDCC,与周爱民老师同台,听业界牛人的分享真是受益匪浅.对我来说是第一次在如此规模的专题论坛上演讲,全程紧张的要命,提前准备好的内容有很多因为紧张没有讲出来.此次 ...