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. Map工具系列-08-map控件查看器

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  2. ThinkPhp 3.2 数据的连贯操作

    ThinkPHP模型基础类提供的连贯操作方法(也有些框架称之为链式操作),可以有效的提高数据存取的代码清晰度和开发效率,并且支持所有的CURD操作. 使用也比较简单, 假如我们现在要查询一个User表 ...

  3. Rss 订阅：php动态生成xml格式的rss文件

    Rss 简介: 简易信息聚合(也 叫聚合内容)是一种描述和同步网站内容的格式.使用RSS订阅能更快地获取信息,网站提供RSS输出,有利于让用户获取网站内容的最新更新.网络用户可以在客户端借助于支持RS ...

  4. npm 发布到远程资源库

    一.npm 发布到远程资源库 1.创建package.json Package.json 属性说明 name - 包名. version - 包的版本号. description - 包的描述. ho ...

  5. Android ExpandableGridView的实现

    近期在做项目的时候碰到了这样一个布局 在android中有种实现折叠list方式是ExpandableListView  但是官方没有ExpandableGridView 那么怎么样用Expandab ...

  6. hdu 4481 Time travel(高斯求期望)(转)

    (转)http://blog.csdn.net/u013081425/article/details/39240021 http://acm.hdu.edu.cn/showproblem.php?pi ...

  7. Yii2 手动安装yii2-imagine插件

    由于网络的原因使用composer安装Yii框架,实在太过痛苦,所以这里干脆就手动安装yii-imagine的扩展. 首先下载yii2-image和Imagine扩展库,点击链接就可以从百度云下载上传 ...

  8. C#小方法PadLeft 和 PadRight

    1.在 C# 中可以对字符串使用 PadLeft 和 PadRight 进行轻松地补位. PadLeft(int totalWidth, char paddingChar) //在字符串左边用 pad ...

  9. iOS6新特征：UICollectionView介绍

    http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITab ...

  10. Sicily 1444: Prime Path（BFS）

    题意为给出两个四位素数A.B,每次只能对A的某一位数字进行修改,使它成为另一个四位的素数,问最少经过多少操作,能使A变到B.可以直接进行BFS搜索 #include<bits/stdc++.h& ...