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. 【bzoj1941】 Sdoi2010—Hide and Seek

    http://www.lydsy.com/JudgeOnline/problem.php?id=1941 (题目链接) 题意 给出n个二维平面上的点,求一点使到最远点的距离-最近点的距离最小. Sol ...

  2. Scrum Meeting 20161207

    本周Sprint Master 史少帅 会议概要 工作总结: · 陈双: 等待BHB的下载录音文件的接口,再在服务器端存储录音材料 · 王永超: 打分功能单独测试正确,但合并到项目时出现错误,待解决 ...

  3. linux安装nexus

    一.下载nexus 最新地址在:https://www.sonatype.com/download-oss-sonatype 我下载的是:nexus-2.14.1-01-bundle.tar.gz,是 ...

  4. C#微信公众平台接入示例代码

    http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 这是微信公众平台提供的接入指南.官网只提供了php的示例代码 ...

  5. Request.Form接收不到post数据.

    Request.Form接收不到post数据. https://q.cnblogs.com/q/62635/ Content-Type 有没有设置为 application/x-www-form-ur ...

  6. Xms Xmx PermSize MaxPermSize 区别

    Eclipse崩溃,错误提示: MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) s ...

  7. controller_name classify constantize model_name

    控制器 class CourseSurveysController < ResourcesBaseController end controller_name # "course_su ...

  8. iptables原理

    1.iptables防火墙简介 Iptables也叫netfilter是Linux下自带的一款免费且优秀的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入.流出.流经服务器的数据包进 ...

  9. windows XP上实现python2.7.5和python3.4.3共存

    windows XP上实现python2.7.5和python3.4.3共存过程记录: 1. 首先安装python2.7.5和python3.4.3,两个版本安装顺序不分前后; 2. 检查系统环境变量 ...

  10. CentOS系统IPTables防火墙中FTP规则设置

    时间 2016-04-21 10:32:15  虫虫开源 原文  http://www.sijitao.net/2403.html 主题 iptablesFTP防火墙 在设置ftp通过iptables ...