关于Html与css的一些解释
一、简单介绍
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的一些解释的更多相关文章
- CSS层叠样式表的解释
css: 在标签上设置style属性css注释: /*z注释内容*/css样式的编写位置: 1.在标签的的style属性里 2.在head里面,style标签中写样式 ...
- 前端知识杂烩(HTML[5]?+CSS篇)
1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...
- CSS的margin塌陷(collapse)
<!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head&g ...
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
- (转)CSS的Sprites技术
Css Sprites 技术逐渐流行,各大网站上都可以看到它的身影. 但从本质上,Css Sprites 只是 Css 技术的一个使用小窍门,初学者也能快速上手. Css Sprites 简单解释: ...
- 【转载】CSS 盒子模型
转处:http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html 说在Web世界里(特别是页面布局),Box Model无处不在.下面 ...
- CSS与JavaScript文件的位置
1.CSS 尽量放置在head标签中. 原因: 避免浏览器重新渲染: 避免阻塞JS文件的执行. 注:CSS选择器的解释顺序是 从右向左 的,所以尽量减少选择器的层级. 2.JS 尽量放置在</b ...
- 【转】CSS(10)盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- js和css内联外联注意事项
简单说:这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!! 问题:起因是网上看到一个css的表格样 ...
随机推荐
- 从 Android 静音看正确的查bug的姿势?
0.写在前面 没抢到小马哥的红包,无心回家了,回公司写篇文章安慰下自己TT..话说年关难过,bug多多,时间久了难免头昏脑热,不辨朝暮,难识乾坤...艾玛,扯远了,话说谁没踩过坑,可视大家都是如何从坑 ...
- js数组转json
function arrayToJson(o) { var r = []; if (typeof o == "string") return "\"" ...
- vmware安装ubuntu12.04嵌套安装xen server(实现嵌套虚拟化)
环境准备 软件:vmware workstation 9.0 ubuntu-12.04.2-server-amd64(官方下载) 硬件:确认CPU支持虚拟化VM-T vmware设置 vmwar ...
- 第三天 vi编辑器使用和软件安装
[复习] 判断题: 查看某文件权限为rwxr-xr-- ,则其所属组权限为只读. 对一个目录有w权限,表示可以修改目录下文件内容. 3..tar.gz格式的压缩包可以使用tar -xjf解压缩 4.m ...
- Java中static的理解
static表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static ...
- “胡”说IC——菜鸟工程师完美进阶
“胡”说IC——菜鸟工程师完美进阶(数十位行业精英故事分享,顶级猎头十多年来经验总结,对将入或初入IC电子业“菜鸟”职业发展.规划的解惑和点拨.) 胡运旺 编著 ISBN 978-7-121-22 ...
- Linux初学 - SSH
SSH:SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠 ...
- 学习bootstrap遇到的问题--001 关于bootstrap中类.disabled不禁用默认行为
自学bootstrap遇到的疑惑篇: 按钮状态--禁用 在Bootstrap框架中,要禁用按钮有两种实现方式: 方法1:在标签中添加disabled属性 方法2:在元素标签中添加类名"dis ...
- web前端攻击详解
前端攻击成因 在web网页的脚本中,有些部分的显示内容会依据外界输入值而发生变化,而如果这些声称html的程序中存在问题,就会滋生名为跨站脚本的安全隐患 XSS跨站脚本攻击: 英文全称cross-si ...
- WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Scr ...