自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

html基础教程

html基础教程

  • 博客(108)
  • 收藏
  • 关注

原创 web标准化、XHTML与CSS层叠样式表的关系

Web标准把网页分成三个独立组成部分:  * 结构:HTML,XHTML,XML  * 表现:CSS1,CSS2  * 行为:ECMAScript, DOM  Web标准至今汉有对外观审美做任何指导方针和戒律,对站点的外观和感觉没有做任何限制,它们只不过使浏览器能够正确地表现设计师创建的站点,帮助客户根据公司的市场需求和用户分析来制定目标。  Web标准可以做到:  * 在...

2020-03-03 21:29:46 3221

原创 CSS网页制作时实现自动换行的小技巧

 大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法!  对于div  1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;...

2020-03-03 21:28:47 1166

原创 web前端零基础入门学习教程之如何走向高阶---css的学习心得

入门阶段:此时的你,什么都不懂先从最简单的 HTML 网页入手;选择 Dreamweaver 作为你的网页制作工具;选择 Photoshop 作为你的网页制作工具;粗略地阅读 Dreamweaver 及 Photoshop 教程,了解这两个软件到底能做些什么;制作你的第一个实验性的网站初级阶段:此时的你,已经掌握了 Dreamweaver 和 Photoshop 的基本操作:策划和...

2020-03-03 21:27:53 950

原创 使用css在不同页面上使用同样的导航代码

查了相关的资料,在这个过程中发现,使用flash实现这样的效果需要通过后台,这个因为我不太了解,暂且不表,说说最近在学的css如何用css实现在不同页面上使用相同的导航代码原理:通过为每个页面的body定义一个id根据css的继承特性("好像有这个说法吧,不好意思记得不是很清楚")利用#body #nav a的形式实现在不同页面中与页面相对应的链接的颜色与其它链接的颜色不同新...

2020-03-03 21:27:07 1110

原创 web前端零基础入门学习教程之CSS的常用技巧放送

一.使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。二.明确定义单位,除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和...

2020-03-03 21:26:23 3449

原创 CSS网页制作技巧之控制网页背景

 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的。  想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会。不过,我想在网上“成家”的朋友一般分为在网吧里“开业”(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的...

2020-03-02 20:27:27 1064

原创 web前端基础入门学习教程使用不同的CSS写法-CSS进阶

CSS的写法可以用以下的几种方法实现:(1)使用Embed(嵌入样式单)排版样式:即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的。使用<style>...</style>标签。例如:<style type="text/css"><!--h2 { font-family: "宋体"; fon...

2020-03-02 20:26:25 845

原创 html+css基础入门学习教程常用CSS样式

按钮样式*/.ButtonCss {}{ font-family: "Tahoma", "宋体"; font-size:9pt; color: #003399; border: 1px #003399 solid; color:006699; BORDER-BOTTOM: #93bee2 1px solid; BORDER-LEFT: #93be...

2020-03-02 20:25:33 860

原创 web前端基础入门学习教程网页中META标签的使用

Meta标签放在每个网页的<head>...</head>中,我们大家比较熟悉的如:<meta name="GENERATOR" content="Microsoft FrontPage 3.0">说明编辑工具;<meta name="KEYWORDS" content="...">说明关键词;<meta name="DESCRIPTION"...

2020-03-02 20:24:44 963

原创 web前端基础入门学习网页中制作线条的技巧

线条是网页中使用得比较多的一种 HTML 对象,在 HTML 语言中提供了一个 <HR> 的标签,也就是水平直线。但由于这个标签的局限性使我们在制作网页时遇到了一些麻烦,比如:线条的颜色以及怎样制作纵向的线条。在这里,笔者就在网页中制作线条的这两个方面的技巧介绍一点自己的心得。 为了顾及各种浏览器之间的兼容性,网页制作者在制作网页的时候常常需要考虑标签的各种属性在每一种浏览器中是...

2020-03-02 20:23:34 3102 1

原创 写作和发布 Web 文章的一些技巧

Jakob Nielsen是 Sun Microsystems 的杰出科学家,他已写了好几本关于可用性的书,是指导人们在 Web 上如何阅读和查看信息方面的行家。他认为任何为 Web 写的文章在几个重要方面应与为印刷媒体而写的同一主题的文章有所不同。首先,Web 文章应该约为印刷文章长度的一半。在他的研究中,Nielsen 发现人们在 Web 上阅读时的注意力集中时间远比阅读报刊文章短。  We...

2020-03-02 20:22:11 652

原创 Web 与排版学上的字体问题

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。事关大小字体的大小总是一个困扰人的问题,用绝对...

2020-03-01 19:53:25 3697 1

原创 零基础学习网页制作需要注意的问题集锦

一.外观1 不要先决定网页的外观,然后强迫自已去适应它,应该从你的访客对像,你要传 达的讯息以及你的制网目标推导出一个最适合的网页架构。2 每页排版不要太疏或用太大的字,尽量避免看你的网页时需要作很大的卷动,要 知道在一页的上部分是显眼而宝贵的地方,不要只放着几个粗大的字或图片。3 最好不要用 800x600 以上的分辨率设计网页。常用的分辨率是 640x480 及 800x600 。...

2020-03-01 19:52:17 3765

原创 web前端基础开发学习,关于前端开发学习经验总结

做前端也有几年时间了,不敢说能把他看地多透,但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例,总结总结。就制作而言,我将一张页面分为四层:框架、布局、模块、列表和数据块。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。一、框架页面的框架基本上都是:“头”、“...

2020-03-01 19:49:20 1114

原创 HTML入门学习教程:简单网页制作

HTML入门学习教程:简单网页制作用一分钟制作自己的第一个网页:下面我们来试着做一个简单的网页,希望您能跟着我们操作,这只会花费您一分钟时间。现在您也许不知道那些尖括号“<>”和里面的字母究竟是些什么东西,不要担心,我们会在后面的教程中向您介绍。首先请运行记事本,或在任意位置新建一个文本文档,在记事本内输入如下内容: 1 ...

2020-03-01 19:41:58 9127 1

原创 CSS网页布局开发小技巧24则

在CSS网页布局开发中,会有很多小技巧,新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在webjx.com的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,  一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。  二、同一个的class选择符可...

2020-02-29 21:20:50 729

原创 学习CSS的背景图像属性background

CSS的背景属性“background”提供了众多属性值,如颜色、图像、定位等,为网页背景图像的定义提供了极大的便利。看看background提供的属性值:background :background-color|background-image|background-repeat|background-attachment|background-position...

2020-02-29 21:20:04 3151

原创 css教程:可读性可维护性良好的CSS文件

大多数文章中,我们并未特别注意CSS文件的可维护与可读性的问题,当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。所以,结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法,以此作为指南,以一种较好的CSS样式组织习惯来进行WEB前端开发。一、CSS样...

2020-02-29 21:18:37 639

原创 css教程:可读性可维护性良好的CSS文件

大多数文章中,我们并未特别注意CSS文件的可维护与可读性的问题,当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。所以,结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法,以此作为指南,以一种较好的CSS样式组织习惯来进行WEB前端开发。一、C...

2020-02-29 21:17:40 2923

原创 css技巧:经典CSS使用技巧几则

MacJi “偷懒”翻译了部分,下午冒着被 BOSS 开除的危险将其补完(原文链接)。使用 line-height 垂直居中line-height:24px;使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。清除容器浮动#main { overflow:hidden;}期前也提到过这样...

2020-02-29 21:16:54 612

原创 CSS初学:如何修改Zblog中的CSS

在学习应用css之前我们要先了解一下什么是css。CSS是Cascading Style Sheets(层叠样式表)的简称.* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).* 在标准网页设计中CSS负责网页内容(XHTML)的表现.* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.* 可以通...

2020-02-28 21:48:31 1986

原创 提高CSS的网页渲染效率11个注意点

CSS学习越深入,我们需要关注的细节之处就越多,今天我们通过11个注意点来提高CSS的网页渲染效率。  1、十六进制的颜色值对位数与大小写  编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。  * 不赞成 - color:#f3a; ...

2020-02-28 21:46:31 563

原创 cookie和dom操作调用样式表实现网页换肤

Html代码部分:1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.<link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" />2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)<ul id="skin">...

2020-02-28 21:45:54 648

原创 css对边框的属性控制和链接的伪类选择器

边框(border): css控制的边框属性包括border-width, border-color, border-style.Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个“will soon be dead” 的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图:如上图所示,对...

2020-02-28 21:45:04 2901

原创 CSS网页布局网页制作技巧总结

CSS网页布局开发中,会有很多小技巧,这之类相关的文章有许多介绍,这里再扩展一下您所想要得到的知识,相信您会有很多收获!  一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。  二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为...

2020-02-27 21:24:05 1081

原创 五种方法让CSS实现居中显示

使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。方法一这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。<div id="wrapper"><div id="cell"><div class=...

2020-02-27 21:22:35 1744

原创 CSS样式表高效使用技巧充分利用样式表的强大性

为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信 息量,我们对网页中每一个栏目的增删,都会是一个很复杂的...

2020-02-27 21:21:14 3396 1

原创 XHTML+CSS教程:灵活运用HTML标记

div+css网页布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。  什么时候应该用DIV?  虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:<divid="header"&g...

2020-02-27 21:20:45 2187 1

原创 css代码优化的12个技巧

编写好的CSS代码,有助提升页面的渲染速度。本质上,引擎需要解析的CSS规则越少,性能越好。MDN上将CSS选择符归类成四个主要类别,如下所示,性能依次降低1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在...

2020-02-26 21:07:20 938

原创 CSS制作网页中的虚线

这里议决边框属性的虚线边框border控制虚线。以下配置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思。  一、四边为虚线边框  border:1px dashed #000; 黑色虚线边框  实例:  CSS代码: .hackhome{border:1px dashed #000; height:50px;...

2020-02-26 21:06:21 3159

原创 愚人节巧用CSS开个极客式玩笑以chrome为例

愚人节到了,如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这些CSS吧。 免责声明:恶搞带来的所有后果,请恶搞者自行负责。本站不承担任何责任。注:本文以chrome为例1. 网页上下颠倒代码如下:body {-webkit-transform: rotate(180deg);}2. 网页旋转代码如下:body {-webkit-an...

2020-02-26 21:05:20 1022

原创 CSS去掉A标签(链接)虚线框的方法

当一个链接得到焦点时,默认会有个虚线框。如图:在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写:代码如下:a:focus {outline:none;-moz-outline:none;}顺便提一下,如果你用过 Safari 和 Chrome 可能会发现,当输入框得到焦点时边框会出现...

2020-02-26 21:04:11 1491

原创 css样式的动态添加及显示和隐藏等零碎用法

(其中红色字体是动态添加样式的语句),这是一个动态生成无序列表的函数,用来显示搜索到的wifi信号,其中有3个参数,wifi的名称、加密方式、信号强度。代码如下:// create a network list itemfunction newListItem(network, averageSignalStrength) {/*** A Wi-Fi list item h...

2020-02-26 21:03:28 1323

原创 17个有趣实用的CSS3悬停效果教程

HTML 5和CSS 3拓展了网页设计的可能性,它们引入了很多新属性来让你的网站变得丰富而饱满。在这篇文章中,我分享了18个CSS3悬停效果的教程,来让你的网站变得饱满并且传达更好的用户体验。本文介绍了CSS 3的动画属性,使用这个属性可以不用费多大力气就创建出一个悬停效果。我们希望你会觉得我们收集的CSS 3悬停效果教程合集是有用的,另外如果你知道任何CSS 3悬停效果教程的话,请在文章下方给我...

2020-02-26 21:02:18 1119

原创 网页切图的CSS和布局经验与要点

很多初学者在刚学完CSS基础要去实际操作进行网页切图的时候,总感觉无从下手。在这里我为大家简单总结一下,一些网页切图的经验与要点。第一点:一般我们网站LOGO部分通常使用H1+a链接的方式,在CSS上采用以图换字技术,指定对象的宽与高,把A元素设为块状元素。这样有利于后期的网站优化。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学...

2020-02-26 21:01:25 1060

原创 巧用CSS3制作时尚的网页加载动画效果

在现代网页设计中,预加载是一种很常见的情形。作为用户,我们希望网页快速并且流畅 — 我们不喜欢等待。当内容被加载时,预加载能提供视觉反馈,并管理用户期望,降低用户放弃浏览网站的几率。源文件代码:MissYuan_源文件.rar用CSS3创建预加载动画的准备条件在我们深入CSS3,创建预加载动画集之前,我们先讨论一些CSS3中非常重要的属性。伪元素(Pseudo Elements):...

2020-02-26 21:00:39 2298 1

原创 10款Web程序员必备的CSS工具

对于web开发来说,CSS是最有效的美化页面、设置页面布局的技术。但问题是,CSS是一种标记性语言,语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或能够大量优化的地方。如果你经常使用静态编程语言(比如,Java,C语言)等,你会发现实用的IDE工具会给编程带来巨大的效率,像Eclipse这样的能够实时自动分析代码问题的集成开发环境就是一个典型的例...

2020-02-26 20:59:42 1271

原创 CSS中Font的一些基本知识点归纳总结

1、什么是字体  字体是文字的外在形式,就是文字的风格,是文字的外衣。比如行书、楷书、草书,都是一种字体。同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库。对于web页面来说,字体就是计算机上存储的一套文字显示方式。通过对文字进行一些特殊处理(比如末端加强)来提高不同环境中文字的可读性。  比如同样大小的文字,在不同字体下的可读性是不同的。一般来讲,一款字库的诞生,要...

2020-02-26 20:58:42 3377

原创 使用css3绘制出各种几何图形

1、圆形示例:         思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下:html:复制代码代码如下:<div class="size example1"></div>css:复制代码代码如下:.size{width:200px;height: 200p...

2020-02-25 18:58:57 2671

原创 30个优秀的CSS导航菜单和按钮教程

在web设计中,CSS是最重要的组成部分。为了让大家更好的了解如何通过CSS来设计,下面就分享30个优秀的CSS导航菜单和按钮。通过这些教程,你可以更好的从中学习。enjoy!01.Advanced CSS Menu : Webdesignerwall新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢...

2020-02-25 18:58:07 2935

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除