‘壹’ 在html中,用于设置字体格式的标记有哪些
语法:
font:[ [ <font-style> || <font-weight> ][ <font-size> <font-family> ]
默认值:看独立属性自身
取值:
<font-style>:
指定文本字体样式
<font-variant>:
指定文本是否为小型的大写字母
<font-weight>:
指定文本字体的粗细
<font-size>:
指定文本字体尺寸
<line-height>:
指定文本字体的行高
<font-family>:
指定文本使用某个字体或字体序列
这是一段修饰文字的代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>font_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), [email protected]" />
<meta name="right" content="www.doyoe.com" />
<style>
.test p{margin:15px 0;border:1px solid #000;}
.font1 p{font:18px Simsun,arial,sans-serif;}
.font2 p{font:italic 18px Simsun,arial,sans-serif;}
.font3 p{font:italic small-caps 18px Simsun,arial,sans-serif;}
.font4 p{font:italic small-caps bold 18px Simsun,arial,sans-serif;}
.font5 p{font:italic small-caps bold 18px/2 Simsun,arial,sans-serif;}
.caption p{font:caption;}
.icon p{font:icon;}
.menu p{font:menu;}
.message-box p{font:message-box;}
.small-caption p{font:small-caption;}
.status-bar p{font:status-bar;}
</style>
</head>
<body>
<ul class="test">
<li class="font1">
<strong>只指定字体大小和字体:</strong>
<p>本段文字将显示为18px宋体。</p>
</li>
<li class="font2">
<strong>只指定字体样式、大小和字体:</strong>
<p>本段文字将显示为斜体的18px宋体。</p>
</li>
<li class="font3">
<strong>只指定字体样式、小型大写字母、大小和字体:</strong>
<p>本段文字将显示为斜体的带小型大写字母的18px宋体。大小型大写字母对比:AaBbCcDdEeFfGg</p>
</li>
<li class="font4">
<strong>只指定字体样式、小型大写字母、粗细、大小和字体:</strong>
<p>本段文字将显示为斜体的带小型大写字母的加粗18px宋体。</p>
</li>
<li class="font5">
<strong>只指定字体样式、小型大写字母、粗细、大小、行高和字体:</strong>
<p>本段文字将显示为行高为2的斜体的带小型大写字母的加粗18px宋体。</p>
</li>
<li class="caption">
<strong>指定字体为caption:</strong>
<p>本段文字将以caption的字体显示。</p>
</li>
<li class="icon">
<strong>指定字体为icon:</strong>
<p>本段文字将以icon的字体显示。</p>
</li>
<li class="menu">
<strong>指定字体为menu:</strong>
<p>本段文字将以menu的字体显示。</p>
</li>
<li class="message-box">
<strong>指定字体为message-box:</strong>
<p>本段文字将以message-box的字体显示。</p>
</li>
<li class="small-caption">
<strong>指定字体为small-caption:</strong>
<p>本段文字将以small-caption的字体显示。</p>
</li>
<li class="status-bar">
<strong>指定字体为status-bar:</strong>
<p>本段文字将以status-bar的字体显示。</p>
</li>
</ul>
</body>
</html>
复制上面这段代码编辑成.html格式文件用浏览器打开即可查看文字属性信息,如果没有编辑软件那就使用记事本编辑保存文件后缀为.html打开即可
‘贰’ 前端必看的书籍
了解更多的前段知识请看下面我精心为您整理的前端必看的书籍,希望您喜欢!
十本学习前端必看书籍
第一本,入门
《Head first HTML&CSS》
最好的入门书。看两遍就对HTML & CSS 有个大概印象了。
此时把w3cschool作为备查手册收藏起来
第二本《CSS权威指南(第三版)》
最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译有点操蛋,遇到感到难理解的地方可能还是要求助于网络资源)。有时间(无论是现在还是将来)可以反复看,并当做字典随时查。
第三本《精通CSS》
广受前辈推荐的一本书。上一本书是字典的话,这本书相当于《中学生作文大全》,汇集了一些CSS的最佳实践。
第四本《图解CSS3:核心技术与案例实践》
这本书比较新,讲解的是最新的CSS3(前三本书停留在CSS2.1时代),CSS3也是必学的,不是什么可学可不学的最新技术。
HTML CSS值得看的书就这些(之后会有一本《CSS秘密花园》,尚在翻译中,也很值得期待),剩下的就是自己写还有看技术博客了。接下来是JavaScript,HTML和CSS都是没有逻辑的标记型语言,JS才是真正的编程语言,评价前端工程师的水平就看这个了。
第五本《JavaScript DOM编程艺术》
最好的JS入门书籍,一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功),还灌输了最符合标准的编程理念。可惜有点老,最新一版是2010年的,以至于部分内容有点过期,例如本书内经常提到“某某方法浏览器不一定支持,需要小心使用”,而这些历史遗留问题当今已经不存在了,阅读过程中无视就好。
第六本《JavaScript高级程序设计》
每个前端必看的书,此书是前端工程师科技树的关键一环。看完此书后再看看之后各类进阶书籍会比较好。
俗称红宝书,也算入门书籍,虽然是大部头(七百多页),但至少通读一遍。
全部掌握了,你可以在网络社区里谈笑风生了,经过实践的锻炼后,面试个前端工程师的岗位应该都没问题了。
第七本《JavaScript语言精粹》
也是前端必看。薄薄一百来页,对JS的去粗取精。
第八本《你不知道的JavaScript》
这是一套丛书, 目前为止仅翻译了第一卷。每本都挺薄,深入介绍了JS中的重要概念。
第九本《JavaScript设计模式》
“设计模式”是软件工程的重要课题,相当于高考时候的答题套路。前人总结出来的应对各种问题的模板。也算是必看书籍。关于JavaScript设计模式的书籍目前也有好几本,也有国人写的,挑一两本看看就好。
第十本《高性能网站建设指南》(及其续篇《高性能网站进阶》)
告诉你真正的商业公司的前端是怎么优化一个网站的。当然优化的问题不是看看书就能解决的,最好时刻了解你的同行们的经验。
第一阶段:HTML和CSS的学习
HTML就不多说了,基础中的基础,这个都不会的小伙伴请参见HTML手册,认真学习W3C课程,稍有基础之后可以跟着视频学习《HTML+CSS基础课程》。
前端开发必看的14本书
1、《CSS权威指南》第三版
这本书实在太适合小白用户了,是一本为初学者清扫障碍的书籍。同行一致认为这本书是学习CSS基础的首选。CSS界权威Meyer大师的作品,翻译水平也灰常赞!
2、《CSS那些事儿》
不用于一般技术类书籍的枯燥乏味,这本书很有意思。作者是蓝色理想经典论坛标准版荣誉版主林小志,具有多年网站设计和网站重构经验,在CSS、XHTML等前台技术方面有着深厚功底。
全书以传达CSS布局思维为中心,通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用,使读者能深入了解到如何在页面中更好地运用CSS布局。阅读本书之后将会发现,原来CSS样式居然是这么好玩的东西。
3、《精通CSS:高级Web标准解决方案》第二版
前段学习必备书籍,作者Andy Budd是国际顶尖的网页设计师,着名的Web标准倡导者,网页咨询公司Clearleft的创始人之一。
本书将最有用的CSS技术汇总在一起,总结了CSS设计中的最佳实践,讨论了解决各种实际问题的技术,重点讲解了一系列的css开发技巧,是前端开发人员必备的手册。
4、《CSS禅意花园》
这是一本令人惊叹的书!必须用一个字形容的话,那就是:美!内容编排合理,文字生动有趣引人入胜,通过一个个实例引导读者阅读,强烈推荐!
作者是世界着名的网站设计师,书中的范例来自网站设计领域最着名的网站——CSS Zen Garden(CSS禅意花园)。童鞋们自己去领略吧。
第二阶段——JavaScript的学习
Javascript的书籍当然还是要看老外的,你懂得~
5、《JavaScriptDOM编程艺术》
此书绝对是入门好书,简洁优美的文笔简直是工具书中的典范啊有木有!
这本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则,然后将这些概念贯穿在书中的所有代码示例中,使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本,最后结合所讲述的内容创建了一个实际的网站。
6、《JavaScript权威指南》第6版
这本书非常适合初级、中级程序员,是学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。
第6版涵盖HTML 5和ECMAScript 5。很多章节完全重写,紧跟当今最佳Web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。
7、《JavaScript高级程序设计》第三版
《javascript权威指南》比较像一本字典,而这本《javascript高级程序设计》可以算是一本由浅入深的好读物。这两本书看完后,对javascript一定会有较为深入的了解。
作者Nicholas C. Zakas是世界顶级Web技术专家,现为雅虎公司界面呈现架构师,负责My Yahoo!和雅虎首页等大访问量站点的设计。这本书,看一遍不能算看过,至少读两三遍,每一遍都会让你有新的收获。
8、《高性能JavaScript》
本书从性能角度全面分析js,含金量非常大,很多知识都是作者通过实践总结出来的,都是经验的积累,强烈推荐!
同是Nicholas C. Zakas所写,如果看《JS高级程序设计》觉得理解不太透彻,学习较为吃力,那么我强烈建议你看看这本书,真的是极好的一本实践类书籍,言简意赅,灰常实用!
9、《JavaScript王者归来》
这本《JavaScript王者归来》不仅是一本传播知识的书,更是一本求道的书。O(∩_∩)O 有追求的程序员一定不要错过!愿神力与你同在!
它揭开了JavaScript的面纱,绕过误解和虚幻的表象,引领你探索程序王国的奥妙。这是一本探寻程序设计思想本源的“魔法典籍”,也是一本Web开发工程师们需要的案头参考书。
10、《JavaScript模式》
它绝对不是一本入门级别的书,适用于希望将自身的Javascript技巧提高到一个新层次的专业的开发人员和程序员。
《JavaScript模式》包含了实现每个讨论的模式的实践建议,并附有数个可以立即上手的范例;同时还可以学到一些反模式。短小精悍,进阶必读!
11、《JavaScript设计模式》
进阶教程,得有一定功底才能看懂。反之,如果你轻而易举就能拿下此书,说明你已非等闲之辈~
本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用,主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。
第三阶段——jQUery的学习
12、《锋利的jQuery》第二版
入门首选,简单易懂,非常实在。《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,对jQuery分析的逻辑非常值得学习。
第四阶段—学无止境!
如果以上书籍你全都搞定了,那么,恭喜你,你真的很厉害!到这种程度,相信你也不太需要别人推荐书籍了,不过我还是厚着脸皮推荐两本吧。
13、《高性能网站建设指南》
前端开发可以优化网站剩余70%~80%性能,这本书不算厚,几个小时就能看完,推荐前端开发工程师看看。在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。
14、《Web开发敏捷之道》第二版
Web开发敏捷之道》曾荣获Jolt大奖“最佳技术图书”奖。在第1版的内容架构基础上,第2版增加了对Rails 1.2中新特性和最佳实践的介绍。此书覆盖了rails1.2的方方面面,其本身也很"敏捷",翻译也非常好。
‘叁’ 浏览器缩小页面,布局就乱了,怎么办
原因:
body下一级的元素css中都有float浮动;而body的大小是随浏览器窗口大小改变的,当浏览器窗口缩小时,元素就会往下掉,这就是原因所在
下面举个例子:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>zoom_CSS参考手册_web前端开发参考手册系列</title> <meta content="Joy Du(飘零雾雨), [email protected]" /> <meta content="www.doyoe.com" /> <style> div{ float: left; width: 500px; border: 1px solid red; height: 100px; } </style> </head> <body> <div></div> <div></div> </body> </html>
当你把这段代码放在浏览器并且把浏览器窗口的缩小到1000px时就会往掉,
解决方法:
只需在浮动的父级元素中添加下面的一个固定的元素包含着就可以:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>zoom_CSS参考手册_web前端开发参考手册系列</title> <meta content="Joy Du(飘零雾雨), [email protected]" /> <meta content="www.doyoe.com" /> <style> .top{ width: 1190px; } .top div{ float: left; width: 500px; border: 1px solid red; height: 100px; } </style> </head> <body> <div> <div></div> <div></div> </div> </body> </html>
‘肆’ CSS3:文字阴影知多少
建议楼主多看看CSS手册。
语法:
text-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值:none
适用于:所有元素
继承性:有
取值:
none:无阴影
<length>①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>:设置对象的阴影的颜色。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-shadow_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test li{margin-top:10px;}
.test .mormal p{text-shadow:1px 1px rgba(0,0,0,.3);}
.test .blur p{text-shadow:1px 1px 1px rgba(0,0,0,.3);}
.test .group p{text-shadow:1px 1px 0 rgba(255,255,255,1),1px 1px 2px rgba(0,85,0,.8);}
</style>
</head>
<body>
<ul class="test">
<li class="mormal">
<strong>普通文字阴影</strong>
<p>测试普通文字阴影效果</p>
</li>
<li class="blur">
<strong>模糊文字阴影效果</strong>
<p>测试模糊文字阴影效果</p>
</li>
<li class="group">
<strong>多重模糊文字阴影效果</strong>
<p>测试多重模糊文字阴影效果</p>
</li>
</ul>
</body>
</html>
本回答由提问者推荐
‘伍’ 初学前端有什么推荐的书籍
初学者入门书籍:
中文电子书
深入浅出html pdf中文版
魅丽的网页设计
Web程序设计(第5版)完整版
HTML & XHTML 权威指南(英文+中文版)
Web编程入门经典:HTML、XHTML和CSS (第2版)
CSS商业网站布局之道(朱印宏着)
HTML与CSS入门经典(第7版)
Eric Meyer 谈CSS (卷1)
Eric Meyer 谈CSS (卷2)
无懈可击的Web设计
XHTML实例精解
XHTML技术内幕
HTML简明教程 中文PDF版
Dynamic HTML权威指南 第3版
XML基础教程 入门、DOM、AJAX与FLASH(Sas Jacobs[美]着)
网页视觉设计案例教程
英文原文电子书
Dive Into HTML5
HTML5.and.CSS3:Develop with Tomorrow's Standards Today
HTML5 Step by Step
Beginning HTML with CSS and XHTML
Beginning CSS Web Development 从入门到精通
CSS Web Development从入门到精通
HTML,XHTML,and CSS - Visual Quickstart Guide 第六版
深入浅出HTML(英文版)
Transcending.CSS(英文版)
完美HTML设计 - 使用CSS不用Table (第二版)
HTML, XHTML, and CSS Bible, 5th Edition
CSS禅意花园 (高级CSS开发)
O'Reilly CSS: The Definitive Guide 第三版(CSS权威指南)
Sams Teach Yourself HTML5 in 10 Minutes (5th Edition)
HTML5 and CSS3: Develop with Tomorrow's Standards Today
Wrox Web Standards Programmer's Reference
Spring into HTML and CSS
The Essential Guide to CSS and HTML Web Design
HTML & XHTML - The Complete Reference第四版
XHTML Moving toward XML
Mastering Integrated HTML and CSS
Build your Own WebSite - The Right Way Using HTML and CSS
Head First HTML with CSS & XHTML
The Best Practice Guide to xHTML and CSS
The CSS Anthology (第三版)
The CSS Anthology (第二版)
Sams Teach Yourself HTML 4 in 10 Minutes
Teach Yourself HTML in 10 Minutes 第四版
Ultimate HTML Reference
高级进阶电子书:
中文电子书
HTML5高级程序设计(完整版)
css3_for_web_designers
CSS精粹(第3版)
CSS Web设计高级教程 第2版
大巧不工-WEB前端设计修炼之道
博客园精华集 Web标准之道
编写高质量代码-Web前端开发修炼之道(完整版)
变幻之美——Div+CSS网页布局揭秘(案例实战篇)
Web导航设计
Web表单设计:点石成金的艺术
精通XHTML程序设计高级编程
彻底设计研究CSS
CSS时尚编程百例
英文原文电子书
Don't Make Me Think!
Apress Pro CSS and HTML Design Patterns
Professional CSS: Cascading Style Sheets for Web Design 第二版
The Book of CSS3: A Developer’s Guide to the Future of Web Design
Accessible XHTML and CSS Web Sites: Problem - Design - Solution
How to Do Everything With HTML
O'Reilly CSS Cookbook
A Book Apart CSS3 For Web Designers
Speed Up Your Site: Web Site Optimization
O'Reilly Designing Web Navigation
Beginning CSS: Cascading Style Sheets for Web Design
The Ultimate CSS Reference
Wrox CSS Instant Results
CSS Mastery: Advanced Web Standards Solutions
Creating Cool Web Sites with HTML, XHTML, and CSS
Beginning HTML with CSS and XHTML: Modern Guide and Reference
Accessible XHTML and CSS Web Sites
O'Reilly CSS The Missing Manual
Wiley Creating Web Sites Bible
Pro CSS for High Traffic Websites
HTML Manual of Style 4th
O'Reilly HTML5: Up and Running
Stunning CSS3: A project-based guide to the latest in CSS
The Definitive Guide to HTML5 Video
Canvas Pocket Reference: Scripted Graphics for HTML5
Apress.Pro.HTML5.Programming.Sep.2010
Pro CSS Techniques
W3C官方手册:
CSS完全参考手册3.0
xHTML完全参考手册 5合1 W3C官方权威手册
HTML 4.01 规范 - W3C官方HTML权威指南
HTML 4.0 参考手册 CHM
W3C HTML 3.2 规范
CSS 2 权威W3C官方参考手册 CHM
css手册2.0 3.0
‘陆’ 求推荐一些关于web前端的一些教程书籍,适合新手的
适合新手的话,最好看一些基础书籍,然后带有一些实战操作项目,可以边学边练。
这几本书比较适合你,可以看看:
《Head First HTML与CSS(第2版)》,入门真的是经典书籍,手把手教学,丰富的案例让你从 0 开始学前端。
《CSS权威指南(第三版)》,这本书作为 CSS 的经典着作,把原理讲得非常的通透,除了 w3c 标准,算最权威的一本了,毕竟权威指南。
《CSS揭秘》神书,47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了,css 进阶必备。
《javascript语言精粹》,这本书可以在入门之前了解一下基本语法,以及在学习之前可以了解下 JS 里面的精粹以及糟粕,虽然这本书很薄很薄,但是值得反复去读的一本书。
《JavaScript权威指南》:犀牛书是每个FE都绕不过的一本书,可以先大致通读几遍,也可以把其当作工具书,时时翻阅。
《JavaScript高级程序设计(第3版) 红皮书 》,适合有一定编程经验的Web应用开发人员阅读,也可作为高校及社会实用技术培训相关专业课程的教材。
除了书籍之外,视频教程也是很重要的,可以进一步地跟随老师进行知识学习和项目实训,帮助你更快更好地掌握所学内容。
‘柒’ web前端开发看什么书
如果你是真心想学习web前端、以后想朝着这个方向发展,那么你一定要来这个企鹅裙,前面前面是二9六,中间是5九一,最后面就是二九零,来这里可以这里学习经验,得到专人解答,这样你可以成长的更快!!!
我在学习javascript的时候,我基本把图书馆基本能借的javascript书都借了,主要是图灵和博文视点出版的书。例如《JavaScript核心技术》,《精通JavaScript》,《JAVASCRIPT语言精髓与编程实践》,《JavaScript设计模式 》,《JavaScript语言精粹》,《JavaScript DOM编程艺术》,《ppk谈JavaScript》,《高性能网站建设指南
》等,还有其他很多js的书,如果借不到,就直接在图书馆七楼看,例如权威指南;也有一些一般的书,这里没有提到,这些书,我并不是全部都会认真看过,因为初学阶段这样学习效率不高。权威指南我现在还没看完,但是如果要全面深入学习的话,看两本还是不够的。但我喜欢以集中在两本书以内学习作为切入点,这样能使我将精力集中在,并且发现问题。
我在上面提到的书,都是比较好的书,适合不同的阶段,例如《JavaScript语言精粹》这本书是属于很精华的读物,入门的时候看可能会比较吃力,当你对JS有一定的驾驭能力的时候,可能就会发现其中的奥妙。我当时花精力看的主要是《精通JavaScript》,《JAVASCRIPT语言精髓与编程实践》,《JavaScript核心技术》也花了不少时间,感觉收获不是很大,可能当时理解不够深刻,权威指南也是后来才看。《JavaScript核心技术》给我的帮助没想象中大,但里面说的知识我是很认真在看,可能不适合入门吧,但很多事情冥冥之中的联系谁又能说得清楚呢,早期花时间在《JavaScript核心技术》上未必就是坏事。
《精通JavaScript 》是偏实践型一类的书,作者是JQuery之父,书中有很多非常好的例子,还有jS的相关技巧,兼容浏览器的方法等。有很多例子都是作者处理问题的总结,我当时几乎把里面的每个例子都测试了一遍,受益匪浅,当然,书中也有不少瑕疵,不知道是我借的那本书印刷问题还是怎么的,有些代码运行并不兼容,也有些函数方法并不能成功运行。到后半部分的示例也比较繁琐,我只是粗略看了一番。实际到后来我看网上的评论,这本书适合进阶的人看,现在回头看,感觉确实有jQuery源码分析的感觉,而且部分内容并不适合初学者阅读。但是书中的第三部分确实是很有用的。
我接下来会写一些自己读过的书,并且觉得好的书推荐给大家,希望对大家有用:
HTML相关:
《Web标准实战》 比较简单,适合入门
《Web标准设计》
《深入浅出HTML》
CSS相关
《CSS设计彻底研究》 视频教程很好,书本我并没有详细研究,不好说建议。
《CSS网站布局实录》 CSS的书我看得比较少,这本算是看得比较全了,听说第二版不错。
javascript相关:
《精通JavaScript》 第三部分非常好
《JAVASCRIPT语言精髓与编程实践》 这本书对原型和继承做了非常精辟的解释,网上大部分关于原型的文章都是参考此书的。
《悟透javascript》 这本书第一章是介绍原型和继承的,第三章也介绍了跨域的一个解决方法,还有就是作者对程序和人生的理解哲学很有深度。
《JavaScript权威指南》 这本书就不用说了
《高性能网站建设指南 》 这类书有两本不同版本,都是关于web性能优化的
《JavaScript语言精粹》 进阶的好书
《JavaScript设计模式 》 进阶的好书
SEO;
《SEO教程:搜索引擎优化入门与进阶》 这本书有些地方我认为说得不大确切,但是总体还不错。