前端必学 40个精选案例实战一课吃透HTML5+C

前端必学 40个精选案例实战一课吃透HTML5+CSS3+JS(MK分享)

端必学 40个精选案例实战一课吃透HTML5+CSS3+JS

"xiaのke"：sisuoit.com/4737.html

随着互联网技术的飞速发展，HTML5、CSS3和JavaScript已经成为网页开发的重要基石。它们分别负责网页的结构、样式和行为，让网页呈现出丰富多彩、动态交互的效果。本文将带你吃透HTML5、CSS3和JS，从入门到精通，助你成为一名优秀的网页开发者。

二、HTML5：网页的结构

HTML，全称HyperText Markup Language，是网页的基础语言。HTML5作为HTML的最新版本，提供了许多新的元素和API，使得网页内容更加丰富，交互性更强。

语义元素：如<header>、<footer>、<article>等，使网页结构更清晰，便于搜索引擎优化和辅助阅读器识别。
媒体元素：如<video>和<audio>，使得在网页上嵌入媒体内容变得简单。
图形绘制API：Canvas、SVG等，让网页实现2D、3D图形绘制。
离线存储：Web Storage、IndexedDB等，使网页能够在客户端存储数据，提升用户体验。

三、CSS3：网页的样式

CSS，全称Cascading Style Sheets，用于描述HTML元素的样式。CSS3作为CSS的最新版本，引入了许多新的特性，让网页更加美观、动感。

盒子模型：通过box-sizing属性，你可以控制盒子的宽度和高度。
动画与过渡：transition和animation属性，让元素在页面上动起来。
渐变与阴影：gradients和shadows属性，使元素呈现出生动的效果。
媒体查询：通过媒体查询，你可以为不同的设备或视口尺寸设置不同的样式。

四、JavaScript：网页的行为

JavaScript是一种脚本语言，用于控制网页的行为。通过JavaScript，你可以实现各种动态效果和交互功能。

DOM操作：通过JavaScript，你可以操作HTML元素，实现页面的动态内容更新。
事件处理：点击事件、键盘事件等，让网页响应用户的操作。
AJAX：通过AJAX技术，你可以在不刷新页面的情况下与服务器进行通信，提升用户体验。
前端框架：如React、Vue等，使开发更加高效，组件化开发使代码复用性更高。

五、总结

HTML5、CSS3和JavaScript是网页开发的三大核心技术。要想成为一名优秀的网页开发者，你需要熟练掌握它们。通过不断学习和实践，你将能够运用这些技术构建出功能强大、交互丰富的网页。在这个过程中，不要忘记保持对新技术的好奇心和学习动力，因为互联网技术日新月异，只有不断学习，才能跟上时代的步伐。

明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

一、为什么要学 SVG ?

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。

与其他图像比较，SVG 的优势有以下几点：

SVG 可以被多个工具读取和修改。
SVG 与其他格式图片相比，尺寸更小，可压缩性强。
SVG 可任意伸缩。
SVG 图像可以随意地高质量打印。
SVG 图像可以添加文本和事件，还可搜索，适合做地图。
SVG 是纯粹的 XML，不是 HTML5。
SVG是W3C标准

二、SVG 形状元素

2.1、svg 标签

SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：

有width和height，指定了svg的大小。

eg：画一条直线，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。

viewBox 属性

使用语法：<svg viewBox=" x1,y1,width,height "></svg>

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。

使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？

2.2.1、embed 嵌入：

使用语法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路径，type 表示 embed 引入文件类型。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用语法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路径，type 表示 object 引入文件类型。

优点：所有浏览器都支持，支持 html、html4 和 html5。

缺点：不允许使用脚本。

2.2.3、iframe 嵌入：

使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 标签直接插入 html 内容内，与其他标签用法一致。

2.2.5、连接到svg文件：

使用 a 标签，直接链接到 SVG 文件。

使用语法：<a href="line.svg">查看SVG</a>

三、SVG形状元素

3.1、线 - line

使用语法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。

3.2、矩形 - rect

//使用语法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小设置
 x="50" y="50"  //可选 左上角位置，svg的左上角默认(0,0)
 rx="20" ry="50" //可选 设置圆角
 stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>

上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。

3.3、圆形 - circle

// 使用语法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定义圆心 ，可选
  r="40" // 圆的半径
  stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>

上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。

3.4、椭圆 - ellipse

椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。

// 使用语法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //设置椭圆的x、y方向的半径
  fill="purple" // 椭圆填充色
  cx="150" cy="150" //设置椭圆的圆心 ，可选参数
 ></ellipse>
</svg>

上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。

3.5、折线 - polyline

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 绘制出一个默认填充黑色的三角形 -->
 <polyline 
  points=" //点的集合
   0 ,0, // 第一个点坐标
   100,100, // 第二个点坐标
   100,200 // 第三个点坐标
    " 
  stroke="green" 
 ></polyline>
<!-- 绘制一个台阶式的一条折线 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代码执行结果如图所示：

需要注意的是 points 中包含了多个点的坐标，但不是一个数组。

3.6、多边形 - polygon

polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多边形的第一点
   100,100,  //多边形的第二点
    0,100  //多边形的第三点
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。

3.7、路径 - path

path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

点个关注，下篇更精彩！

、初识CSS3

本章目标：

会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式
会使用CSS3的基本选择器设置字体大小和颜色
会使用复合选择器为特定的网页元素添加CSS样式
会使用CSS3高级选择器为网页元素添加CSS样式

1.1、什么是CSS

Cascading Style Sheet 级联样式表。表现HTML或XHTML文件样式的计算机语言。 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

在这里插入图片描述

说明：

首先介绍什么是CSS
然后对比讲解使用CSS和没有使用CSS的两个相同的HTML代码页面显示效果，说明CSS的重要性
最后根据图说明CSS在网页中的应用

1.2、CSS的发展史

在这里插入图片描述

CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；

CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离

CSS2.1 融入了更多高级的用法，如浮动，定位等。

CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。

由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势，因此本书会讲解最新的CSS3版本

本课程中主要讲解css2.1和css3

CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

1.3、CSS的基本语法

首先讲解CSS的基本语法结构，由选择器和声明构成
然后对照具体的样式详细讲解语法，强调声明必须在 { } 中
最后说明基本W3C的规范，每条声明后的 ; 都要写上

在这里插入图片描述

Style标签

讲解CSS样式如何在HTML中应用，引入style标签的应用
讲解style标签，说明type=“text/css的用法
说明style标签在HTML文档中的位置，在与之间

在这里插入图片描述

1.4、引入CSS方式

行内样式使用style属性引入CSS样式 <h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p> 使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。
内部样式表 CSS代码写在 <head> 的 <style> 标签中 <style> h1{color: green; } </style> 优点：方便在同页面中修改样式缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底引出外部样式表
外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式
链接式（使用的最多,记住这个就可以了）使用标签链接外部样式表，并讲解各参数的含义，标签必须放在标签中

在这里插入图片描述

导入式使用@import导入外部样式表

在这里插入图片描述

链接式与导入式的区别

标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。
使用链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。
使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果也与使用链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这个也是现在目前大多少网站采用链接外部样式表的主要原因。
由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。

CSS样式优先级

行内样式>内部样式表>外部样式表
就近原则：越接近标签的样式优先级越高

【学员练习】使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14p

在这里插入图片描述

1.5、CSS基本选择器

标签选择器 HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img/>

在这里插入图片描述

类选择器一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器

在这里插入图片描述

ID选择器 ID选择器的名称就是HTML中标签的ID名称，ID全局唯一

在这里插入图片描述

小结

标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次

基本选择器的优先级

ID选择器>类选择器>标签选择

标签选择器是否也遵循“就近原则”？ 不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

1.6、CSS高级选择器

1、层次选择器

在这里插入图片描述

后代选择器 body p{ background: red; }

在这里插入图片描述

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

子选择器 body>p{ background: pink; }

在这里插入图片描述

相邻兄弟选择器 .active+p { background: green; }

在这里插入图片描述

通用兄弟选择器 .active~p{ background: yellow; }

添加图片注释，不超过 140 字（可选）

在线咨询

上一篇：网页中实现文件上传下载的三种解决方案(推荐)
下一篇：「网警提醒」网页篡改需提防大意违法泪两行

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端必学 40个精选案例实战 一课吃透HTML5+C

端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS

"xiaのke"：sisuoit.com/4737.html

一、为什么要学 SVG ?

二、SVG 形状元素

三、SVG形状元素

、初识CSS3

1.1、什么是CSS

1.2、CSS的发展史

1.3、CSS的基本语法

1.4、引入CSS方式

1.5、CSS基本选择器

1.6、CSS高级选择器

1、层次选择器

您的项目需求

前端必学 40个精选案例实战一课吃透HTML5+C

端必学 40个精选案例实战一课吃透HTML5+CSS3+JS