首页 › 电脑 › 如何快速的学习html5？

ahgwork 发表于 2023-10-3 19:53:20

如何快速的学习html5？

如何快速的学习html5？

wanggang761029 发表于 2023-10-3 19:53:58

你说的是快速吗？你确定是可以快速学习HTML5吗？
如果你确定，那我告诉你最快速的学习方法就是先视频快速入门，加书籍查漏补缺。
当初学者想快速上手学习HTML5，通过视频课程确实是一个不错的选择。视频课程学习的好处是：

[*]直观演示和实践： 视频课程通常会通过演示和实践的方式来教授知识。你可以看到作者在实际操作中是如何使用HTML5的，这会让学习更直观，更容易理解。
[*]动态展示： 视频可以展示动画和效果，这有助于你直观地了解HTML5在网页中的实际应用。你可以看到一些酷炫的效果和交互，这会激发你的兴趣并提高学习动力。
[*]灵活自主： 视频课程让你可以根据自己的节奏学习。你可以暂停、回放视频，方便理解和消化内容。这种灵活性让学习过程更自主，更符合个人学习习惯。
[*]交互性： 一些视频平台提供在线讨论区，你可以与其他学习者和教师交流，解答疑惑，拓展你的思维。这种交互性有助于加深学习理解和融入学习社区。
https://www.bilibili.com/video/BV1bt411g7sW2023年前端全套学习资料（视频+配套资料+源码）但是视频课程也有不足的地方，就是不够全面，视频通常都是把最核心最核心的东西给你讲到，让你能够比较精准的去学习，但是深度不够。
比如：有些视频可能只是简单介绍HTML5的基本用法，对于一些高级特性和复杂场景可能涉及不深。所以在学习完视频后，还需要通过其他途径进一步学习和拓展知识。
另外就是视频 知识点碎片化，不如书籍系统性。因此，建议在学习过程中及时整理笔记，帮助你形成完整的知识体系。
所以这个时候就是书籍上场了。
我个人认为，阅读是前端开发者中最具效益的个人成长方式之一。尽管书籍价格不高，但它们的内容和深度却可以帮助我们深入了解前端开发的各种技术和概念，这些知识也是我们在工作中不断迭代、改进和创新的基础。
因此，我强烈建议前端开发者在职业发展过程中注重阅读。如果你希望在前端开发领域获得更深入的发展，我建议你挑选一些有深度、有价值的书籍，并在实践中不断运用和总结，这将会帮助你不断提高自己的技术水平和能力。
以下这份包含103本前端经典书籍的书单（其中32本是豆瓣评分8分+），是我花费一个月时间整理的：

http://pica.zhimg.com/v2-083fd76dd37d0c94e8251e005471b764_r.jpg?source=1940ef5c
免费领取103本前端开发电子书（含代码）书籍的好处自不必说，只是对于初学者还是稍微慎重些。不要一开始就选择看书，他的优势也恰恰编程劣质。

[*]系统性和深度： 优质的HTML5书籍通常会以系统的方式介绍HTML5的各个方面，从基础知识到高级特性都有涉及。这让你可以全面地了解HTML5的各个知识点，建立起扎实的基础。
[*]深入案例： 一些书籍会提供丰富的实例和案例，让你在学习的过程中实践所学知识，加深对HTML5应用的理解和掌握。
【HTML教程】：


[*]HTML5入门教程（含新特性），从入门到精通
[*]HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）
[*]HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）
[*]HTML图文教程（通按钮/文件域/label/下拉表单）
[*]HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
[*]HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）
总结一下就是：建议你初学者可以选择一些优质的视频课程入门HTML5，因为这会让你快速上手并增强学习兴趣。但不要仅仅依赖视频课程，你也可以结合阅读书籍和参与实践项目，以加深对HTML5的理解和应用能力。
往期干货

【前端行业发展】：


[*]Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？
[*]找前端工作会不会很难？
[*]现在web前端的工资怎样？
[*]前端开发就业情况如何？
【前端工作内容】：


[*]前端工程师主要工作内容是什么？
[*]前端开发是做什么的？工作职责有哪些？
【前端学习路线】：


[*]0基础入门学前端，2023年前端学习路线总结，前端开发需要学什么？
【前端自学网站】：


[*]【建议收藏】91个前端开发必备学习国内外免费网站和个人博客
[*]13 个有趣且实用的 CSS 框架 / 组件
[*]有哪些好的前端社区？
【前端书籍推荐（32本）】：


[*]【建议收藏】2023前端书籍，前端开发入门与前端学习路线
【前端面试题】：


[*]【建议收藏】4500字前端面试题及答案汇总，前端八股文
[*]关于前端Vue框架的面试题，面试官可能会问到哪些？
[*]【一定要收藏】32000字的前端面试题总结！！！
[*]（建议收藏）Vue面试热点问题
【前端简历模板】：


[*]web前端简历个人技能该怎么写?
[*]前端简历中项目描述怎么写能够更加的优雅？
[*]一个优秀的前端工程师简历应该是怎样的？
[*]前端简历怎么写？前端尽力模板，4个动作帮你搞定心仪Offer
[*]面试前端工程师简历应该怎么写才容易通过？
[*]自学 web 前端人怎么找工作？
[*]自学前端简历怎么写啊？
【JavaScript教程】：


[*]JavaScript 是什么？
[*]JavaScript基础入门教程（引入方式/注释/变量/常量/数据类型/类型转换）
[*]JavaScript基础入门教程（引入方式/注释/变量/数据类型/类型转换）
[*]JavaScript基础入门教程（for循环/数组）
[*]JavaScript基础入门教程（函数/返回值/作用域）
[*]JavaScript基础入门教程（对象/内置对象）
[*]JavaScript进阶教程（作用域/函数/解构赋值）
[*]JavaScript进阶教程（构造函数/内置函数/继承/封装）
[*]JavaScript进阶教程（深浅拷贝/异常/this/防抖节流）
[*]JavaScript函数（函数创建和使用、参数传递）
[*]JavaScript函数（函数返回值）
[*]JavaScript数函（作用域和局部变量）
[*]JavaScript函数（模态框插件的封装）
【VUE教程】：


[*]Vue基础入门教程(vue-cli+vue指令)
[*]Vue基础入门教程(vue指令大全)
[*]Vue基础入门教程(vue组件化开发)
[*]最全的Vuex学习教程(Vuex基础、模块化、案例)
【Koa2教程】：


[*]Koa2框架是什么？Koa框架教程快速入门Koa中间件
[*]Koa2框架路由应用，Koa2前景、Koa2中间件
[*]Koa2异常处理
如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。最后，希望喜欢学习的你们，坚持下去，做一个有知识的前端人，加油~
今天先分享到这里，写了好久的回答，大家收藏的时候，也记得点个赞哈！

Cfz 发表于 2023-10-3 19:54:10

HTML5是当下IT行业内热门的技术之一，这也引发了一股HTML5学习热潮。我们该如何学好HTML5，好的学习方法固然重要，但是正确的学习路线也是必不可少的。所以今天整理了一部分路线知识。这对于刚刚着手学习HTML5的新手会有一定的帮助。
Route1：理论基础知识阶段一定要学好。
理论基础知识主要包括一些专业术语和常用标签的掌握。掌握专业术语主要是为以后的深入学习奠定基础，精确掌握这些专业属于也使我们在以后的工作学习中再遇见这样的术语不至于很迷茫;而熟悉常用标签是为了提高以后工作学习的效率，以后不管是在学习中还是工作作项目时遇到一些常用标签直接可以明了标签的具体含义。
Route2：熟练掌握HTML5核心知识点。
这些核心知识点在以后的互联网前端开发工作中一定会用到，也是企业面试题经常考到的。以后工作全靠以下这些核心知识点支撑了：
web页面制作基础
UI网站设计
编程基础技术
后端开发技术
移动互联网应用
特效开发高级实战
企业级应用开发
Route3：积极参与项目实战
学习期间的每一个实战项目都很重要，它是我们以后找工作的关键。在学习HTML5的时候，一般企业级的项目实战都会安排在后一个阶段。这一阶段所有的知识已经学完，已经进入找工作的阶段。一些学员开始浮躁，并不重视学校安排的企业级项目实战。其实这是错误的，因为这一阶段正是积累项目经验的好时机，如果把握好这一阶段的学习，在以后不管是面试还是工作都会事半功倍的。
学习路线主要就是以上三点。除了掌握以上的学习路线以外我们还应掌握一定的学习方法：
首先，多看、多练。HTML5涉及的代码比较多，并不是看老师演示一两遍就可以的，所以自己一定要利用课余的时间多敲代码。
其次，学习过程中一定要有自己的想法。对所学内容有一定了解之后，做任何项目时都要有自己的想法，如果只懂得执行过程，没有自己的想法，即使人家把代码直接给你，你又能了解多少呢?
以上HTML5学习路线以及学习方法希望对准备学习HTML5的新手有所帮助。更多学习交流V：teach2004

mtdwo 发表于 2023-10-3 19:54:40

前端三板斧(html、css、javascript)这个是必须要会的，但光学会这几个还不够，还需要知道以下这些：
1、 从团队项目的角度出发，还需要了解版本管理方面的知识；
2、从效率上来说，我们需要学习一些提高工作效率的框架与工具；
3、 从用户体验的角度出发，我们还得站在用户的立场，了解用户的使用习惯及UI界面的美化；
4、 从性能的角度出发，我们还得学习各种优化技巧；
5、 从自身的角度出发，我们还得懂得如何使用接口，如何查看文档；
我把我的学习过程写在下面，整理了很多的自学资料，有些是花钱买得，网站上没有共享资源，我觉得受益匪浅的都留下来了，有需要的小伙伴可以私信我自取哟~
我把我的学习过程写在下面，整理了很多的自学资料，有些是花钱买得，网站上没有共享资源，我觉得受益匪浅的都留下来了，有需要的小伙伴可以私信我自取哟~

浏览器前缀、CSS3选择器、CSS3文本属性
浏览器前缀


浏览器前缀是针对老式浏览器的一种写法，在CSS3尚未标准化时，这些浏览器已经开始使用浏览器前缀。为此，CSS3提供了针对浏览器的前缀，当某些CSS3样式语法变动时，可以使用这些前缀，使浏览器在非标准前提下正常运行。
根据浏览器内核的不同，浏览器前缀的设置也有不同，常见的浏览器前缀如表12.1所示。
表12.1 常见浏览器前缀
内核前缀Trident内核：主要代表为IE浏览器-ms-Gecko内核：主要代表为Firefox浏览器-moz-Presto内核：主要代表为Opera浏览器-o-Webkit内核：主要代表为Chrome和Safari浏览器-webkit-先来通过一个CSS3样式了解如何添加浏览器前缀，border-radius样式可设置为圆角边框样式。具体示例如下。

http://picx.zhimg.com/v2-ad89ddad13f5a9f12c749ffa01fdc92a_r.jpg?source=1940ef5c
当然在现代浏览器中，一般浏览器前缀都可以被省略掉，直接使用CSS3标准写法即可。具体示例如下。

http://picx.zhimg.com/v2-8ba6b03ca7c4e1ce3c06fe811fbc2931_r.jpg?source=1940ef5c
CSS3选择器

在前面，介绍过CSS的选择器，如id选择器、class选择器、tag选择器等。CSS3在CSS2.1的基础上增加了很多实用的选择器，使操作HTML元素的方式更加灵活简单。
属性选择器
属性选择器是通过属性来选择元素的一种方式，在下述代码中type和value都是input元素的属性。

http://picx.zhimg.com/v2-3c83dbfc7c6191235199f106f15ab1ce_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-d6ccbcfc210d5242ffdcde3598c917a0_720w.jpg?source=1940ef5c
属性选择器的写法是通过中括号的方式进行选择的，也可以在中括号内把属性和属性值写完整。

http://picx.zhimg.com/v2-032e27b9da76c43fbbfe2ab2c9427bea_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-e7540a1b50b54db73ebba743499dbfca_720w.jpg?source=1940ef5c
除了具体的属性选择器外，CSS3还提供了三种模糊匹配的属性选择器，下面将分别讲解三种模糊匹配的属性选择器。
（1）匹配的是起始位置包含value值形式的元素。

http://pica.zhimg.com/v2-7926dbdeddb32c13a798aca04db965d6_r.jpg?source=1940ef5c

http://pica.zhimg.com/50/v2-44b24759f7097540183a893271dafa55_720w.jpg?source=1940ef5c
（2）匹配的是结束位置包含value值形式的元素。下面将例12-3第7行代码更改如下。
input{ background : red; color : white; }
（3）匹配的是任意位置包含value值形式的元素。下面将例12-3第7行代码更改如下。
input{ background : red; color : white; }
结构伪类选择器
结构伪类选择器是针对HTML层次“结构”的伪类选择器。如想要某一个父元素下面的第n个子元素，则可以通过以下几种结构伪类选择器实现。
（1） 第一类结构伪类选择器*-child方式。其分类如表12.2所示。
表12.2 *-child伪类选择器分类
选择器含义E：first-child选择器选择父元素的第一个子元素E：last-child选择器选择父元素的最后一个子元素E：nth-child(n)选择器选择父元素下的第n个子元素E:only-child选择器选择父元素中唯一的子元素（该父元素只有一个子元素时才可以选择）。表12.2中，E:nth-child(n)选择器，可以设置一组元素中指定子项的样式，其参数可以设置为数字行，也可以设置为odd奇数行和even偶数行，另外还可以将参数设置为n值（从零累加的值）。注意，E:nth-child(n)选择器的参数是从1开始，而不是0。
（2） 第二类结构伪类选择器*-of-type方式。其分类如表12.3所示。
表12.3 *-of-type伪类选择器分类
选择器含义E:first-of-type选择器选择同元素类型的第一个同级兄弟元素E:last-of-type选择器选择同元素类型的最后一个同级兄弟元素E:nth-of-type (n)选择器选择同元素类型的第n个同级兄弟元素E:only-of-type选择器选择同元素类型中唯一的同级兄弟元素表12.3中E：first-of-type、E:last-of-type、E:nth-of-type(n)、E:only-of-type与第一类*-child效果相同。*-of-type选择器与*-child选择器不同的是*-of-type表示选择同元素类型同级兄弟元素，而*-child表示选择父元素的子元素。
状态伪类选择器
状态伪类选择器是一种针对HTML当前操作状态而进行选择的选择器，如标签是否获取焦点、标签是否被选中等。其分类及用途如表12.4所示。
表12.4 *-child伪类选择器分类
选择器含义用途:focus选择器用于指定“表单元素”获得光标焦点时使用的样式主要在单行文本框text、多行文本框textarea等表单元素获得焦点并输入文本时使用:checked选择器用于指定“表单元素”被选中的时候使用的样式主要在单选按钮radio和复选框checkbox中使用。::selection选择器用于改变被选择的网页文本的显示效果主要在段落标签中使用:first-letter选择器用于对一段文本的第一个字符进行样式设置主要在段落标签中使用:first-line选择器用于对一段文本的第一段字符进行样式设置主要在段落标签中使用:enabled选择器用于设置“表单元素”中可用元素的样式设置主要在单行文本框text、多行文本框textarea等表单元素中使用:disabled选择器用于对“表单元素”中不可用元素的样式设置主要在单行文本框text、多行文本框textarea等表单元素中使用:read-write选择器用于对“表单元素”中可读写的元素添加样式设置主要在单行文本框text、多行文本框textarea等表单元素中使用:read-only选择器用于对“表单元素”中只读的元素添加样式设置主要在单行文本框text、多行文本框textarea等表单元素中使用表12.4中的::selection选择器用来改变被选择的网页文本的显示效果。在默认情况下，浏览器中用鼠标选择的网页文本都是以“深蓝的背景，白色的字体”显示的。通过::selection选择器可以改变被选择的网页文本。注意，::selection选择器前面为双引号。
其他选择器
CSS选择器除属性选择器、结构伪类选择器、状态伪类选择器外，还提供其他三个选择器，如表12.5所示。
表12.5 三个其他选择器
选择器含义~选择器选择元素后的所有兄弟元素+选择器选择元素后最近的兄弟元素>选择器只选择子元素，对于深层嵌套的子元素不会选择
CSS3文本属性

CSS3中增加了丰富的文本修饰效果，使网页看起来更加美观舒服。下面将学习常见的CSS3文本属性。
text-shadow属性
一般情况下，CSS2都是使用Photoshop等工具来实现文字的阴影效果，而在CSS3中，这种效果可通过设置text-shadow属性来实现，简单好用。
text-shadow属性可设置的样式值有x-offset、 y-offset、blur、color这四个值，其值含义及用法如表12.6所示。
表12.6 text-shadow属性取值及用法
属性值含义单位用法x-offset阴影的水平偏移距离px、em或百分比等值为正，阴影向右偏移值为负，阴影向左偏移y-offset阴影的垂直偏移距离px、em或百分比等值为正，阴影向下偏移值为负，阴影向上偏移blur阴影的模糊程度px、em或百分比等值不能为负，值为0，无阴影模糊效果值越大，阴影越模糊值越小，阴影越清晰color阴影的颜色三种颜色表示方法text-shadow属性同时还支持多阴影的设置。通过多阴影可以设计出很多炫酷的效果。

http://picx.zhimg.com/v2-32da7e27fbcac9b1ea1882f06dd6ec08_r.jpg?source=1940ef5c

http://picx.zhimg.com/50/v2-07aaf5049093388fa09cd5a56847562f_720w.jpg?source=1940ef5c
text-stroke属性
text-stroke属性用于设置文字的描边。可设置的样式值有w和color这两个值。w表示描边的宽度，color表示描边的颜色。

http://picx.zhimg.com/v2-264cc75869502aa54a75fc2ea290251b_r.jpg?source=1940ef5c

http://pica.zhimg.com/50/v2-b76db85bbcbca963623c982bae43da8a_720w.jpg?source=1940ef5c
direction属性
direction属性用于设置文字的排列方向。可设置的样式值有rtl和ltr两个值。rtl表示文字从右向左排列，ltr表示文字从左向右排列。需要配合表示排版方式的CSS语法unicode-bidi:bidi-override属性和属性值实现。

http://picx.zhimg.com/v2-b6531fdd3e4785c803d83e83a0876930_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-278b205d1b8bb0c92e1b181c9530901d_720w.jpg?source=1940ef5c
@font-face属性
@font-face属性表示字体图标，主要实现网页中图标的展现效果。字体图标可以提高网页的性能以及方便地控制图标大小和颜色变化。字体图标的效果如图所示。。

http://pic1.zhimg.com/50/v2-9d564b7402477bf628461edee97498d8_720w.jpg?source=1940ef5c
图中导航中的小图标就是用字体图标实现的，可以通过代码来改变图标的颜色和大小。如图所示。

http://pic1.zhimg.com/50/v2-949c54c5233c582a33690ea416c2b064_720w.jpg?source=1940ef5c
@font-face属性主要可设置 font-family和src两个值。font-family属性用来设置字体名称，src属性用来设置字体文件路径。

http://pica.zhimg.com/v2-7a416cd048ae4e179fd7ed866245502c_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-045454ff6706321af70a2c879e08bf1e_720w.jpg?source=1940ef5c
首先写出一个载入字体的HTML标签，然后把标签的font-family样式设置成@font-face属性当中的字体名称。在元素中添加对应图标的文字，最终HTML标签中的文字在浏览器中会显示成对应图标的效果。字体图标是由文字转换的，即可以设置文字相关的属性，如文字大小和文字颜色。
另外，可以设计一套字体图标，如通过IcoMoon软件来进行文字与图标的转化。通过第三方库来获取大量的字体图标。目前比较流行的库是Font-Awesome，它提供了上千种对应的字体图标，能够非常方便快捷地进行设置操作。
CSS3背景属性、CSS3颜色属性、CSS3边框属性
CSS3背景属性

在CSS2.1中，学习了很多关于背景的属性，如background-image、background-position等。在CSS3中，为了满足更多需求，新增了多个新的背景属性，它们提供了对背景更强大的控制。
background-size属性
background-size属性用于设置背景图片大小。在CSS3诞生之前，背景图片的大小是由图片的实际大小决定。在CSS3中，可以使用background-size属性来设置背景图片的大小，这使得在不同的环境中重复使用背景图片成为可能。background-size取值及设置图片方式如表12.7所示。
表12.7 background-size取值及设置背景图片方式
属性取值设置背景图片方式number可分别设置背景图片的宽高的大小cover（覆盖方式）将背景图片以等比缩放来填充整个容器元素content(包含方式)将背景图片等比例缩放至某一边紧贴容器边缘为止图12.7中列出了background-size取值及设置背景图片的方式。

http://pic1.zhimg.com/v2-4b33f72bf4c3c5a2ade865decf6bb804_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-4495214cadabfacaacadfd6ae6291bab_720w.jpg?source=1940ef5c
background-origin属性
在CSS3中，可使用background-origin属性设置元素背景图片平铺的最开始位置。background-origin属性的取值及平铺方式如表12.8所示。
表12.8 background-origin取值及平铺方式
属性取值平铺方式padding-box（默认值）背景图片从内边距开始平铺border-box背景图片从边框开始平铺content-box背景图片从内容区域开始平铺表12.8中列出了background-origin属性取值及平铺方式。
background-clip属性
在CSS3中，可以使用background-clip属性来设置元素背景图片平铺后剪切的位置。background-clip属性取值及剪切方式如表12.9所示。
表12.9 background-clip取值及剪切方式
属性取值剪切方式border-box（默认值）平铺的背景图片从边框开始剪切padding-box平铺的背景图片从内边距开始剪切content-box平铺的背景图片从内容区域开始剪切表12.9列出了background-clip属性取值及剪切方式。

http://picx.zhimg.com/v2-b8cc30e6eb7a279e6b5740cf2242015d_r.jpg?source=1940ef5c

http://picx.zhimg.com/50/v2-0c27e24da52114454f4244b4e735d8a6_720w.jpg?source=1940ef5c
CSS3颜色属性

在网页中经常可以看到各种的渐变效果，包括渐变背景、渐变导航、渐变按钮等。在网页中添加渐变效果，可使网页在视觉中更加美观大方，同时提升用户体验。下面将讲解CSS3提供的颜色渐变属性。
linear-gradient属性
linear-gradient属性表示线性渐变，是指在一条直线上进行渐变，在网页中大多数渐变效果都是线性渐变。linear-gradient属性需要通过background-image属性进行设置，可设置渐变方向、起始颜色、结束颜色这三个值。其具体设置方式如下。
l 起始颜色会渐变到结束颜色，也可以通过设置多个颜色值进行线性渐变。
l 渐变方向在第一个参数设置。可选择to left、to right、to top、to bottom等值。也可以设置方向的一个组合使用，如to left top方向值。渐变方向还可以设置一个旋转的角度。正值为顺时针旋转，负值为逆时针旋转。
l 线性渐变的颜色位置，可通过百分比划分渐变的区域大小。

http://pic1.zhimg.com/v2-004c548ddbdbbecc1e322b43173eb5e7_r.jpg?source=1940ef5c

http://picx.zhimg.com/50/v2-ddc3bf3ac5bcbbfed3daecb0d1092254_720w.jpg?source=1940ef5c
radial-gradient属性
radial-gradient属性表示径向渐变，是一种颜色从起点到终点由内至外进行圆形渐变（从中间向外拉，像圆一样），其基本用法与线性渐变类似。起始颜色会渐变到结束颜色，也可以设置多个颜色值进行径向渐变。但径向渐变的方向设置尚不完善，需要添加浏览器前缀才可以实现。而且不支持to的方式，只支持方向的设置。

http://picx.zhimg.com/v2-684092535f31d87255589e41e0b3d2b2_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-d3b7dbb33a7741c3a8549fdfc7efe33b_720w.jpg?source=1940ef5c
CSS3边框属性

<a href="http://www.zhihu.com/zvideo/1557715116422057984" data-draft-node="block" data-draft-type="link-card">
在CSS3中对边框增加了丰富的修饰效果，使网页在视觉上更加美观舒服，提升用户体验。
border-radius属性
在很多网站中，圆角的效果十分常见。从用户体验方面来看，圆角效果在视觉上更为美观大方。如图12.3所示。

http://picx.zhimg.com/v2-87f3413d93d0a593a6ea3b0792d401d5_r.jpg?source=1940ef5c
图12.3 淘宝官网圆角导航
在CSS2.1中，给元素实现圆角效果都是使用背景图片来实现，制作起来比较麻烦。但CSS3中border-radius属性的出现，完美地解决了圆角效果难以实现的问题。
此外，在前端开发中，对于网页设计，始终秉着“尽量少用图片”的原则，即能用CSS实现的效果，就尽量不要使用图片。因为图片需要引发http请求，并且其传输量大，影响网页加载性能。
border-radius属性为元素添加圆角效果。长度值可以是px、百分比、em等。当设置的值越大时，圆角就越明显。border-radius属性中的数值代表这一个圆形的半径，这个圆形与元素相切就形成了圆角的大小。如果把一个元素宽、高都为150px的正方形转化成圆形，则可以设置border-radius属性值为75px。

http://pic1.zhimg.com/v2-e516e3992bb71fe35aa840b83ab9fecd_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-304547ec55a8d89705f880ece08c13fd_720w.jpg?source=1940ef5c
border-radius属性与margin、padding属性相似，可通过一个值设置四个方法，也支持两个值和四个值的写法。顺序从左上角按顺时针开始设置。

http://pic1.zhimg.com/v2-475f14c5f5e7b2d2e944dcf68f8bc442_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-a4573416aff825aaeb1c6b347344cec8_720w.jpg?source=1940ef5c
border-image属性
在前面章节中学习过边框样式border-style，其中边框只有实线、虚线、点状线等几种简单的形式。如果想要给边框添加漂亮的背景图片，就要用到CSS3中提供的border-image属性。
在CSS3中border-image属性为边框添加背景图片，主要可以设置图片路径、切割图片的宽度、图片平铺方式这三个值。本小节将用图12.4填充边框。

http://pica.zhimg.com/50/v2-20b7c710d33a6b67d08c6ff4ff68b048_720w.jpg?source=1940ef5c
图12.4 border-image用到的填充图片
通过url值来添加图片地址。通过数值来设置填充图片的大小，数值填充的是边框的四个方向，从图片边缘向图片内层截取相应数值进行填充。注意数值不加单位。

http://picx.zhimg.com/v2-324ad8cf5ad4be6407b4488058d681e9_r.jpg?source=1940ef5c

http://picx.zhimg.com/50/v2-f28e8fc82641bbcb3424a4505524dcf3_720w.jpg?source=1940ef5c
默认边框中间部分被拉伸，可通过图片平铺方式来改变边框添加的方式，repeat值表示重复；round值表示平铺；stretch值表示拉伸（默认值）。

http://pica.zhimg.com/v2-458464eb189edfbc667d3555a08502c7_r.jpg?source=1940ef5c

http://pic1.zhimg.com/50/v2-be8a96b473153b766fab05b9972576c1_720w.jpg?source=1940ef5c
box-shadow属性
box-shadow属性与前面小节的text-shadow类似，是给一个容器添加阴影的样式属性。可选择设置x-shadow、y-shadow、blur、spread、color、inset等值。x-shadow、y-shadow值为阴影的偏移量，blur值为模糊值，color值为阴影的颜色。

http://pica.zhimg.com/v2-e388b8a3bd48898f8ce995c1a79327b5_r.jpg?source=1940ef5c

http://pica.zhimg.com/50/v2-dea7cfa350e1838c199e556fd47e08e7_720w.jpg?source=1940ef5c
spread值为阴影的范围，可以对设置好的阴影进行局部放大。

http://pic1.zhimg.com/v2-207bbcac2bc074cbaa22604069102980_r.jpg?source=1940ef5c

http://picx.zhimg.com/50/v2-0878078a31b2bab6960d04371578ed91_720w.jpg?source=1940ef5c
inset值可用来设置内阴影。

http://picx.zhimg.com/v2-1c6a66cc750d3b5fde0029f8d76b81b2_r.jpg?source=1940ef5c

http://picx.zhimg.com/50/v2-df15cb0b4e1062a948f229445a40b04b_720w.jpg?source=1940ef5c

HbNCG">通过本篇的学习，了解CSS3基本概念、CSS3特性、浏览器前缀等。掌握CSS3中提供的新样式。如选择器、背景、边框、文本等。增强网页的美观，提高用户体验。

zyhzsz 发表于 2023-10-3 19:55:15

讲真，快速学习HTML5，这一篇就够了。
废话不多说了，先把全套的该学的更在这里，再说快速学习的方法。
更多HTML+CSS学习笔记如下（已完结）：


[*]认识网页 / HTML标签大全 / 表格 / 列表
[*]CSS入门笔记 / Css样式表 / emmet语法 / CSS的复合选择器 / 显示模式 /
[*]CSS背景 / CSS三大特性 / 盒子模型 / 圆角边框、盒子阴影、文字阴影
[*]浮动知识点汇总 / PS切图 / CSS属性书写顺序（重点） / CSS练手之学成在线页面制作
[*]CSS定位的4种分类 / 学成在线模块添加 / HTML+CSS之定位（position）的应用
[*]案例：淘宝轮播图 / 元素的显示与隐藏 / 土豆网鼠标经过显示遮罩 /
[*]【重点】CSS之精灵图 / 字体图标 / 用户界面样式源码 / vertical-align 属性应用 /
[*]溢出的文字省略号显示 / 常见布局技巧+案例 / CSS新增选择器 / 盒子模型和其他新特性
HTML+CSS项目《品优购》完整笔记+源码（万字版可复制）：


[*]HTML+CSS大项目1：品优购项目笔记+源码（万字！收藏）
[*]HTML+CSS大项目2：品优购项目笔记+源码（万字！收藏）
移动开发笔记（更新中）


[*]移动WEB开发之入门&视口 / 二倍图 / 主流方案选择 / 携程网首页案例制作
[*]rem基础&媒体查询 / less基础 / rem实际开发适配方案 /
JavaScript基础笔记分享：


[*]认识JavaScript / 注释以及输入输出语句 / 变量的使用、语法扩展、命名规范
[*]数据类型简介以及简单的数据类型 / 获取变量数据类型 / 运算符&算数运算符 /递增和递减运算符
[*]比较运算符和逻辑运算符 / 赋值运算符以及运算符优先级 / 流程控制-实际案例学习if语句
[*]三元表达式&分支流程控制 switch 语句 / JavaScript的for循环学不明白怎么办？
[*]以案例学习JavaScript双重for循环 / JavaScript中while以及do while循环 / JavaScript遍历数组，附5个案例
JavaScript最全拔高（更新中）

JavaScript面向对象开发相关模式 / JavaScript创建对象简单方式到优化 / JavaScript面向对象游戏案例：贪吃蛇
前端简易版路线图以及课程资源：

HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序
2022年前端学习路线图HTML5学习方法

方法1：从整体到局部

不要陷入细节当中，很多同学问我，学了就忘怎么办。没关系的！只有忘了记住—记住忘了，形成下意识记忆。
方法2：类比

在学习CSS引入方式的时候，我们可以进行类比学习。
这种方法主要针对于区分相似的两种或多种事物。如strong与em，块元素与行元素，同步与异步。
对于此类知识，应多多思考，抓取几种事物的不同点，结合去记忆。
方法3：实践学习


[*]HTML+CSS大项目1：品优购项目笔记+源码（万字！收藏）
[*]HTML+CSS大项目2：品优购项目笔记+源码（万字！收藏）
以上这个项目，仅仅学完HTML+CSS即可完成了。一定要加强练习，巩固自己的基础知识。
其他：


[*]1.学习html的基本知识。包括HTML的标签、属性等知识
[*]2.学习html+css。学习DIV+CSS的基础知识，掌握网页布局技巧，能够用DIV+CSS完成带交互的企业网站的布局。这两部网上随便一搜全部 都是教程，找一个系统的教程看就好。
[*]3.js+jquery。js语句语法的学习，对象、dom、事件处理的学习等;jquery选择器、ajax、流行的网页特效制作，以及jquery插件的封装 。都是在这个阶段要学习的。
[*]4.html5+css3。这个阶段要掌握html5新特性，css3新特性。包括新增标签、css3中的2D、3d转换、响应式媒体查询等。这个阶段的学习 完成后要能完成一个响应式网站的前端开发。
[*]5.移动端框架的学习，流行框架的学习比如bootstrap。
[*]6.react组件学习、nodejs&bower&gulp。能做到这个阶段，你已经是一位HTML5工程师了。

light999 发表于 2023-10-3 19:55:49

你说的快速是怎么快速呢！两个星期速成？html入门并不难，只要你学习的时候多多练习，多多动手，能写出像样的东西并不是很高深的事情。但是，如果你要玩得很厉害，那就要不断的学习 你要是初学者 。没有一点基础，来这里学。
链接我给你放这了，然后就是加油加油。学习过程中可能会碰到困难，碰到困难不要怕，第一多百度，第二多问。祝你一切顺利https://www.w3school.com.cn/html/html5_intro.asp

查看完整版本: 如何快速的学习html5？