Web 前端之HTML和CSS

HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签来描述网页.HTML文档描述网页,包含HTML标签和纯文本,也被称为网页

CSS是指层叠样式表(cascading Style Sheets),样式定义如何显示HTML元素,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中.

以上为官方说法.通俗来说,HTML负责的是显示内容,CSS负责的是样式.他俩在一起就像是我买了房子以后需要装修一样.

HTML中的小细节

HTML的入门简单,基础知识浅显易懂.

首先,HTML中常用字符集有GBK,GB2312和UTF-8.

<meta name=＂keywords＂>用于显示网页的关键字

行级元素inline:不能设置宽和高,它的宽和高是内容撑开的.eg.<a><span>

块级元素 block:可以设置宽和高.默认情况下,它的宽和高由父元素决定.eg.<p><div><h1-h6><table><o><ul>

严格来说,image既不属于行级元素,又不属于块级元素,但通常人们都将他归类为行级元素,属于一个过渡元素.这是后话.

看过了基础的知识,对大部分的标签也混了个眼熟,类似我上面提过的<a></a>,<p></p>,<ul></ul>这些,又或者是<body></body>,<head><head>这种,我们看到这些的时候都会发现他们是有实际含义的.但如果说标签都是有意义的,<div></div>便是一个特例.<div></div>其实就是用来布局,没有任何实际意义,如果非说它的含义,那就是它就是一个块.在我看来,HTML中的格局主要是用<div>来做,以前的HTML布局大部分是用<table></table>来写,先分大table,大table里套小table.很明显这种方式麻烦的多.相比来说,没有什么实际意义的块状<div></div>显然更讨人喜欢.

多年前盛行一种说法叫网页设计三剑客,分别是DreamWeaver,Firework和Flash.DreamWeaver的操作便捷无需大量的代码,firework是类似于Photoshop的图像处理软件,flash一种特性,电脑要是想看视频就必须装它,有一种类似流氓软件的性质.现在开始逐渐退出历史舞台了,苹果默认不支持flash,而且谷歌等主流浏览器也开始逐渐不支持flash.取而代之的是HTML5.所有的视频不需要安装任何播放器或者插件就可以播放.

CSS中的小细节

CSS主要负责样式,个人认为其中最为重要的应属盒模型.CSS知识繁杂,难在对各个属性的理解和web标准化的掌握上,即使你知道某个属性,在用的时候未必就能想到,靠的是熟能生巧和其他知识技术的结合,很多语句都是靠实践刻在脑子里的.而且很多麻烦出现的原因是因为不同浏览器的兼容性.

在w3c标准下的盒模型的宽度和高度指的是内容的宽度和高度,如果加内padding,会变大.

父子关系中,给子元素设置margin-top,父元素也会一起掉下来,解决办法是给父元素设置溢出隐藏,overflow:hidden

兄弟关系中,设置margin时,两个元素的外边距为较大的一个,不叠加.

display:none不显示而非隐藏.不显示不占空间,而隐藏占.

display: block/inline/inline-block  但IE6不支持且中间有间隙

在所有的浏览器中,body都有8个像素外边距

选择器

ID选择器# 后代选择器(空格) 子代选择器>  分组选择器,  类选择器.

伪类选择器 :hover  :link  visited  active  多类选择器(无空格)

权重值

标签选择器1

类选择器10

Id选择器100

内联样式1000

!important无条件提升权重,不建议使用

hover在IE6中只支持给a标签加,但在标准浏览器中可以给其他标签加

css样式可以分离为.css的文件通过<link>标签引用

小技巧

text-align: center;//文字水平居中

line-height = height;//文字垂直居中

CSS中的float属性是用来控制元素的浮动的.

float造成的影响,对于其父元素来说,元素浮动后,它脱离当前正常的文档流,所以他也无法撑开其父元素,造成父元素的塌陷.塌陷问题的解决办法:限定行高,或者overflow:hidden,但IE6不支;对其非浮动的兄弟元素来说,如果兄弟元素为块级元素,在现代浏览器和IE8+下,该元素会忽视浮动元素而占据它的位置,并且元素会处在浮动元素的下层,并且无法通过z-index属性改变他们的层叠位置,但它的内部文字和其他行内元素都会环绕浮动元素.但在ie6,7下则分别有不同的表现,IE67中,该兄弟元素会紧跟在浮动元素的右侧,并且在ie6两者中留有3px的间隙,这就是著名的IE 3px bug;对其浮动的兄弟元素的影响,当一个元素在浮动的过程中碰到同方向的浮动元素时,他会紧跟在后面.反方向时,两元素应在同一水平上互不受影响,但元素过多时遵循先到先得原则.float: none不浮动  clear: left\right\both清除浮动

Web 前端之HTML和CSS的更多相关文章

  1. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  2. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  3. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

  4. 好程序员web前端开发测验之css部分

    好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...

  5. Web前端技术研究：Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  6. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  7. web前端教程：用 CSS 实现三角形与平行四边形

    最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊,分页的样式.来张截图: 你在首页的底部也可以看到这样一个分页栏:是不是看上去还不错?下面就来看看这是如何实现的吧~ 第一种方法:利用bord ...

  8. web前端学习之HTML CSS/javascript之一

    前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...

  9. Web前端新人笔记之CSS字体

    本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但 ...

随机推荐

  1. destoon : 后台无法登录问题解决

    经常有朋友在destoon搬家的时候 , 数据还原之后 , 会出现后台无法登录的情况 . 具体表现为后台帐号密码输入后点击确定 , 页面刷新 .并没有跳转到相应后台页面 . 但是如果帐号密码输入错误 ...

  2. JS循环语句作业讲解（折纸、兔子生兔子、买东西组合）

    1.一张纸的厚度是0.0001米,将纸对折,对折多少次厚度超过珠峰高度8848米: varn = 0;varg = 0.0001;while(){ g= g *2; n++ (g>8848bre ...

  3. jQuery文本框中的事件应用

    jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. phpmyadmin #1045 - Access denied for user 'root'@'localhost' (using password: NO)

    phpmyadmin访问遇到1045问题 #1045 - Access denied for user 'root'@'localhost' (using password: NO) 解决办法 找到p ...

  5. SpringMVC拦截器的使用

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  6. c# Json 自定义类作为字典键时，序列化和反序列化的处理方法

    一般情况下,Newtonsoft.Json.dll 对 Dictionary<int,object>.Dictionary<string,object>等序列化与反序列化都是成 ...

  7. Oracle的表锁死以及解锁

    Oracle的表锁死以及解锁 oracle 查看锁死的表,锁死的进程. select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_na ...

  8. Hive metastore三种配置方式

    http://blog.csdn.net/reesun/article/details/8556078 Hive的meta数据支持以下三种存储方式,其中两种属于本地存储,一种为远端存储.远端存储比较适 ...

  9. HTML 内容居中方式总结

    在HTML网页排版经常会用到关于对其方式的情况,水平居中和垂直居中.特别是水平居中,并不是一个简单的text-align就可以解决所有的情况. 开始之前普及一点HTML知识,目标很明显,不同的页面结构 ...

  10. JAVA动态加载JAR

    // 生成JAR包D:\TestClass.jar package hand.java.loadjar; public class TestClass { private String sayHell ...