一、简单介绍

1、html，是hyper text markup language的缩写，中文为“超文本标记语言”。

2、html不是编程语言而是一种标记语言。

二、标签与元素

1、html标签：如<div>(两个尖括号加上一个元素名，<div>是开始标签,</div>是结束标签)。

2、html元素：<div>元素内容</div>（开始与结束标签加上内容）。

3、一般的html标签都有开始和结束标签，但是有些是空标签，即没有结束标签和元素内容。如<br/><img/><link/>等等。

4、所有标签与属性最好用小写。

三、html属性

1、id、class、style、name等等，属性一般都有值。值也可能有好几种。

四、html标签详解

1、<html></html>html标签，告诉浏览器这里是html文档的开始（永远呆在最外层）。

2、<head></head>在head里你可以插入脚本（script）、样式文件（css）还有各种meta信息

3、<title></title>网页的标题，永远放在head中。

4、<meta>定义网页的编码字符以及对网页的描述。如<meta charset=”utf-8” Content-type=” text/html” >

5、<link/>空标签，用于链接到外部的css样式文件。如：<link rel=”stylesheet” type=”text/css” href=”style.css”/>.

6、<script></script>

7、<body></body> 定义文档的主体，所有的html内容都放到<body>里

8、<h1></h1>标题标签，有<h1>到<h6>,字体大小依次减小。具体看示范

9、<p></p>段落标签，放置文字段落用的。

10、<img>图像标签，用法如：<img src=”image.png”/>

11、<a></a>链接标签，用于链接到其他网址，如<a href=”http://www.baidu.com”>百度</a>。alt与title属性除了用于提示还和搜索引擎抓取信息有关。

12、<ul></ul>无序列表，用法：<ul><li></li><ul>，默认有padding和margin

<ol></ol>有序列表，用法同上

13、<table></table>表格标签，以前用来布局，现在基本用来写表格

14、<form></form>表单标签，用来数据交互

<input/>(type有text、submit、radio、checkbox、password)、<textarea>、<label>、<button>

15、<iframe></iframe>框架标签，用法：<iframe src=http://www.baidu.com width=”200” height=”200”></iframe>，相当于放入另一个网页整体。

16、<div></div>定义文档区块,是块级元素

<span></span>用于对文档中的行内元素进行组合

17、块级元素与内联元素的区别：

块级元素始终一个元素一行，不管他的宽度为多少，都不可能有其他元素与他在同一行（除了使用浮动，定位，浮动和定位都脱离了文档流，所以不能同等对待。）

内联元素也称行内元素，就是他可以与多个内联元素共处一行，但不能与块级元素共处一行。内联元素不能定义宽和高，只有转变为display：inline-block；才能定义宽和高，并且可以与其他内联元素共处一行。内联元素padding-left，padding-right有效但是padding-top和padding-bottom无效。Margin似乎也一样，不懂的可以试试。

18、居中的方式：

（1）在一个元素外面加一个div，并给这个div加上text-align属性，属性值为center.

　原理：text-align:center;是让div内部的元素居中显示，并且由div的宽度决定。默认情况下div的宽度是占满整个网页的。故相div内部的元素相对于整个网页居中

（2）margin:auto;这个用法很常见，但是又特定要求，就是一定要给你想要居中的元素一个宽度值（百分比也好固定宽度也好）

原理：浏览器解析时会自动给有宽度的元素左右两边赋予相等的外边距，所以div成居中显示。

（3）初学者最初用的方法就是加margin或者padding，使他看起来像居中的样子，但是这样在不同分辨率上的电脑显示绝对不一样，所以这种方法最好别用。

　居中的方式还有很多种，包括竖直居中也有很多种，这里不一一细说。请童鞋们自行探索，度娘谷哥才是最好的老师。

19、定位：

定位通常分3种，绝对定位，相对定位，固定定位，其实可以从字面来理解这些词的含义；

绝对定位，就是很霸道的那种，不受原来位置的约束，你给他的TRBL（top,right，bottom,left）设置成多少他就在浏览器的什么位置显示，比较官方的术语就是，绝对定位的元素脱离了文档流（跟浮动一样），不受原来的文档约束，不占原来的位置。默认情况下绝对定位是相对于body这个元素进行定位的，但是如果离他最近的一个祖先元素有设置position为absolute或者relative。那么他就相对于这个祖先元素进行定位。

相对定位：就是相对的意思，相对于谁呢？默认情况下相对于他自己。即设置了TRBL后，他原来的位置就分别在他现在这个位置的TRBL多少值。譬如left：100px;

那么他原来的位置就在他现在的位置左边100px处。当然还有其他说法，童鞋们自己领悟。相对定位不脱离文档流，他原来的位置还占着。

固定定位;脱离了文档流，但是他与绝对定位稍有不同，他是相对于浏览器视窗（你看的见的地方）进行定位的，而绝对定位则是默认相对于body的，即整张网页。

20、浮动：浮动是脱离文档流的，所以他不会占有原来的地方，默认的z-index值大于       其他未设置浮动的元素，所以有时候会遮挡住其他元素，float：left默认情况下会向网页左上角靠拢，只要前面没有元素挡住他。大家可以把他想象成空气，而其他未设置为浮动的元素则想象成方块石头，石头挡得住空气，而空气挡不住石头。童鞋们自己试试，从而领悟出其他元素与浮动元素在网页中的关系。另外，浮动最好别乱用，能不用浮动就不要用浮动。

好了暂时就写这些。本人水平有限，难免有错误之处，若发现请及时告诉我。

关于Html与css的一些解释的更多相关文章

  1. CSS层叠样式表的解释

    css:    在标签上设置style属性css注释:     /*z注释内容*/css样式的编写位置:    1.在标签的的style属性里    2.在head里面,style标签中写样式     ...

  2. 前端知识杂烩（HTML[5]?+CSS篇）

    1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...

  3. CSS的margin塌陷（collapse）

    <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...

  4. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  5. （转）CSS的Sprites技术

    Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...

  6. 【转载】CSS 盒子模型

    转处:http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html 说在Web世界里(特别是页面布局),Box Model无处不在.下面 ...

  7. CSS与JavaScript文件的位置

    1.CSS 尽量放置在head标签中. 原因: 避免浏览器重新渲染: 避免阻塞JS文件的执行. 注:CSS选择器的解释顺序是 从右向左 的,所以尽量减少选择器的层级. 2.JS 尽量放置在</b ...

  8. 【转】CSS（10）盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  9. js和css内联外联注意事项

    简单说:这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!! 问题:起因是网上看到一个css的表格样 ...

随机推荐

  1. FB引擎系列-之CloudSand

    CloudSand,欲打破之前的集中版本制作的模式, http://code.taobao.org/p/cloudsand包含服务器端代码(php)和客户端代码(unity)   EasyDown的时 ...

  2. [异常解决] 初玩SAE遇到的小问题——注册&创建项目+MyEclipse装插件直接部署+一个简单的JSP部署实现

    ① 新浪SAE快速上手教程:http://jingyan.baidu.com/season/43090 上面一个链接是针对PHP的相关介绍,如果用java还有点不一样,具体请看新浪SAE官网:http ...

  3. 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展

    在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...

  4. 我的ef连接mysql之旅

      摘要: install-package ef6,mysql.data:增加provider invariantName="MySql.Data.MySqlClient" typ ...

  5. excel表格中如何将内容粘贴到筛选后的可见单元格[转]

    默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到 ...

  6. 每天一个linux命令（43）：killall命令

    Linux系统中的killall命令用于杀死指定名字的进程(kill processes by name).我们可以使用kill命令杀死指定进程PID的进程,如果要找到我们需要杀死的进程,我们还需要在 ...

  7. String详解

    在开发中,我们都会频繁的使用String类,掌握String的实现和常用方法是必不可少的,当然,我们还需要了解它的内部实现. 一. String的实现 在Java中,采用了一个char数组实现Stri ...

  8. 在android中用跑马灯的效果显示textview

    大家好,在我们通常的android project中,通常需要用到textview这一个布局文件,并且对于这一个显示布局所需要的文本文字内容. 下面我们就来介绍一种方法来实现在android中用跑马灯 ...

  9. iOS越狱开发（一）

    做越狱开发也有一些时间了,有很多东西想总结一下,希望给他人一些借鉴,也是自己对过去开发经历的一些总结.个人不推荐使用盗版,这里主要以技术介绍为主. 这个系列里面主要介绍怎样进行越狱开发,涉及到以下几个 ...

  10. 【.net】从比较两个字节数组谈起

    上午,有位初学者朋友问:如何比较两个字节数组中各字节是否相等? 不许笑,我一向反对嘲笑初学者,初学者不认真学习时你可以批评,但不能讥嘲.你不妨想想,你自己开始学习编程的时候又是什么个光景? 好,于是, ...