从零开始，学习web前端之HTML5

最新推荐文章于 2024-03-31 23:20:43 发布
最新推荐文章于 2024-03-31 23:20:43 发布
阅读量6.8k 收藏 43
点赞数 11
分类专栏： 从零开始，学习web前端 文章标签： html5 html w3c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzhiqiang_1993/article/details/68061120
版权

什么是HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。是下一代 HTML 标准。

为什么要学习HTML5

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些新的Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
HTML5的设计目的是为了在移动设备上支持多媒体，它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5的优势有很多,比如：更聪明的存储，更具有语义化的标签，对视频和音频的支持等等。。。最重要的是，HTML5是未来的趋势。

HTML5的改进：

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用
等等

新增的语义化标签

HTML5新增了一些标签，也移除了一些标签。

目前兼容性比较好的常用的新标签有：

<header>	表示页眉，一般用在文档头部
<nav>       表示导航，一般用于导航区域
<section>   表示区块，定义了某个区域
<article>   表示文章，一般用于表示文章（评论，博客...）
<aside>     表示侧边栏，一般和article一起用，表示文章的侧边栏
<figure>    表示独立的流内容（图像、图表、照片、代码等等）
.....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        header {
            width: 1000px;
            height: 50px;
            background: red;
            margin: 0 auto;
            color: white;
            text-align: center;
        }

        nav {
            width: 1000px;
            height: 50px;
            background: blue;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

        section {
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

        aside {
            float: left;
            width: 300px;
            height: 500px;
            background: green;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

        article {
            float: right;
            height: 500px;
            width: 700px;
            color: white;
            text-align: center;
            background: pink;
            margin: 0 auto;
        }

        footer {
            width: 1000px;
            height: 50px;
            background: gray;
            color: white;
            text-align: center;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<!--头部-->
<header>头部</header>
<nav>导航</nav>

<!--主题-->
<section>
    <!--侧边栏-->
    <aside>侧边栏</aside>
    <!--文章-->
    <article>文章</article>
</section>
<!--底部-->
<footer>底部</footer>
</body>
</html>

这里写图片描述

浏览器兼容问题
目前新版本的浏览器对H5的支持都比较好，但是有些旧的浏览器并不识别H5的新元素。所有的浏览器对于无法识别的元素都会作为内联元素来处理。
为了让旧版本的浏览器识别这些新元素，我们可以将这些元素CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

自定义标签

我们可以自定义一个标签，并在html中使用它
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        document.createElement("myNode");//创建一个元素
    </script>

    <style>
        myNode{
            display: block;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>

<!--使用自定义元素-->
<myNode></myNode>

</body>
</html>

IE9以下的兼容性解决办法
在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过 document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

1.先下载js下面的文件
html5shiv.js

2.将html5shiv.js引入即可

    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <![endif]-->

注意：并不是所有的浏览器都需要引入这个文件，所以我们在IE9以下的浏览器引入即可


<!--[if lt IE 9]>
<!--[endif]>

上面代码是条件注释，只有IE浏览器识别，当IE浏览器版本小于9时，才会引入js文件。

表单

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

input输入类型

email 		输入email格式
tel 		手机号码  
url 		只能输入url格式
number 		只能输入数字
search 		搜索框
range 		范围 滑动条
color 		拾色器
time		时间
date 		日期 不是绝对的
datetime 	时间日期
month 		月份
week 		星期

新的表单元素

  • datalist
  • keygen (在新的web标准中已废弃)
  • output
  • meter
  • progress

datalist
数据列表，一般配合form和input使用，使其具有自动完成的功能。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">

    城市： <input type="text" list="cityData">
   

    <datalist id="cityData">
        <option>aaaa</option>
        <option>abaasd</option>
        <option>adasdww</option>
        <option>bsdas</option>
        <option>csdas</option>
        <option>fsdas</option>
        <option>dsdas</option>
    </datalist>
</form>

</body>
</html>

这里写图片描述

output
用来输出计算结果或用户动作的结果。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
    <input name="a" type="number" step="any"> +
    <input name="b" type="number" step="any"> =
    <output name="o"></output>
</form>

</body>
</html>

这里写图片描述

meter
表示度量器（不常用）

<meter min="0" max="100" low="20" high="80" value="81"  ></meter>

progress
表示进度条

<progress min="0" max="100" value="10"></progress>

表单属性

autocomplete
是否自动完成，on：开启 off取消，可用于form和input

<form action="" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

这里写图片描述

可以看到，当我们输入过信息后，再次输入时，会自动匹配之前输入够的内容。而邮箱由于设置了autocomplete=“off”，所以不会自动完成，

novalidate
取消验证，用于form元素上。

html5表单本身会自动验证一些input，例如属性为email的input

<form action="">
    E-mail: <input type="email" name="user_email">
    <input type="submit">
</form>

这里写图片描述

如果再form中添加这个属性，那么点击提交按钮时将不会验证。

<form action="" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

这里写图片描述

点击提交表单不会验证，直接提交

**required **
required 属性适用于以下类型的 input标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<form action="">
    Username: <input type="text" name="usrname" required>
    <input type="submit">
</form>

这里写图片描述

添加该属性后该input不能为空。点击提交按钮时会验证。

注意：如果form元素设置了novalidate属性，就算input设置了required 属性，也不会进行验证。

<form action="" novalidate>
    Username: <input type="text" name="usrname" required>
    <input type="submit">
</form>

这里写图片描述

placeholder
占位符，一般用于提示用户输入信息

 email：<input type="email" placeholder="请输入邮箱">

这里写图片描述

autofocus
获取焦点，用于input中。添加该属性进去页面时会自动获取焦点。如果多个input都设置了这个属性的话，最前面的input会获取焦点。

<form action="" >
    userName: <input type="text" >
    pwd：<input type="password" placeholder="请输入密码" autofocus>
    email：<input type="email" placeholder="请输入邮箱" autofocus>
    
    <input type="submit">
</form>

**multiple **
multiple 文件上传多选或邮箱多个,属性适用于以下类型的 input标签：email 和 file

<input type="file" name="img" multiple>

pattern
正则表达式 验证表单
pattern 属性适用于以下类型的 input 标签: text, search, url, tel, email, 和 password.

<form action="" >
    userName: <input type="text" pattern="[A-Za-z]{3}" title="">
    <input type="submit">
</form>

这里写图片描述

**formaction **
描述表单提交的URL地址
formaction 属性用于 type=“submit” 和 type=“image”.

 <input type="submit" formaction="demo-admin.php"
  value="提交">

表单事件

oninput
用户输入时触发

	$(function  () {
				$("#emailIpt")[0].oninput=function  () {
					console.log(this.value);
				};
			});

oninvalid
验证不通过时触发

	$(function  () {
				$("#emailIpt")[0].oninvalid=function  () {
					this.setCustomValidity("请输入正确的邮箱地址");//自定义提示信息
				};
			});

多媒体

在之前的版本我们如果想在网页上播放多媒体，必须依赖第三方插件，现在HTML5给我们提供了多媒体标签使我们可以音频和视频。

audio
音频标签

	<audio id="myAudio" src="music/TheTruthThatYouLeave.mp3">
		</audio>

但是不同浏览器对音频文件的支持程度不同。

这里写图片描述
兼容写法

<!--
    autoplay: 自动播放
    controls:控制条
    loop：循环
-->
    <!--<audio src="music/yinyue.mp3" autoplay controls> </audio>-->

    <!--推荐的兼容写法：-->
    <audio controls loop>
        <source src="music/yinyue.mp3"/>
        <source src="music/yinyue.ogg"/>
        <source src="music/yinyue.wav"/>
        抱歉，你的浏览器不支持音频标签！
    </audio>

video

视频标签

视频标签同样存在浏览器兼容问题
这里写图片描述

 <!--<video src="video/movie.mp4" controls  autoplay ></video>-->
    <!--  行内块 display:inline-block -->
    <video controls autoplay>
        <source src="video/movie.mp4"/>
        <source src="video/movie.ogg"/>
        <source src="video/movie.webm"/>
        抱歉，浏览器要换了！
    </video>

相关属性
属性有很多，常用的也就那几个
这里写图片描述

相关方法

这里写图片描述

相关事件

这里写图片描述

新增获取DOM的方式

querySelector
返回文档中匹配指定 CSS 选择器的一个元素。

document.querySelector("img");//返回第一个img

querySelectorAll
返回所有的元素

document.querySelectorAll("img");//返回img集合

类名操作

1、Node.classList.add('class') 			添加class
2、Node.classList.remove('class') 		移除class
3、Node.classList.toggle('class') 		切换class，有则移除，无则添加
4、Node.classList.contains('class')	 	检测是否存在class

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""
例如：
data-info=“我是自定义属性”，通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当我们如下格式设置时，则需要以驼峰格式才能正确获取
data-my-name=“itcast”，获取Node.dataset[‘myName’]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
		
		<script>window.onload=function  () {
			var div=document.querySelector("div");
			console.log(div.dataset["info"]);//获取自定义属性
		}
			
		</script>
	</head>
	<body>
		<!--添加滴自定义属性-->
		<div class="box" data-info="自定义属性"></div>
	</body>
</html>

拖拽

在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素
页面中设置了draggable="true"属性的元素

目标元素
页面中任何一个元素都可以成为目标元素，

例如：将盒子a中的元素拖拽到盒子b中，那么，盒子a中的元素就是拖拽元素，盒子b就是目标元素

事件监听

拖拽元素

ondrag 		应用于拖拽元素，整个拖拽过程都会调用
ondragstart	应用于拖拽元素，当拖拽开始时调用
ondragleave	应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend	应用于拖拽元素，当拖拽结束时调用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab 标签</title>
 
 <script>
 	
 	window.onload=function(){
 		var imgNode=document.querySelector("img");
 		imgNode.ondragstart=function(){
 			console.log("拖拽开始");
 		}
 		
 		imgNode.ondragleave=function(){
 			console.log("离开拖拽元素")
 		}
 		imgNode.ondrag=function  () {
 			console.log("正在拖拽");
 		}
 		imgNode.ondragend=function(){
 			console.log("拖拽结束")
 		}
 		
 	}
 	
 </script>
</head>
<body>


<img src="../img/yixin.png" />
</body>
</html>

这里写图片描述

目标元素

ondragenter	应用于目标元素，当拖拽元素进入时调用
ondragover	应用于目标元素，当停留在目标元素上时调用
ondrop		应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave	应用于目标元素，当鼠标离开目标元素时调用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab 标签</title>
    
    <style>
    	.box{
    		width: 50px;
    		height: 50px;
    		background: red;
    	}
    	.box1{
    		width: 150px;
    		height: 150px;
    		border: 1px solid red;
    	margin-left: 200px;
    	position: relative;
    		display: block;
    		left: 200px;
    	}
    </style>
 
 <script>
 	
 	window.onload=function(){
 		
 		var divNode=document.querySelector(".box1");
 		
 		divNode.ondragover=function  (e) {
 			/*阻止拖拽元素的默认行为*/
 			e.preventDefault();
 			console.log("停留在目标元素上了");
 		}
 		
 		divNode.ondragenter=function  () {
 			console.log("拖拽元素进入");
 		}
 		
 		divNode.ondrop=function  () {
 			
 			console.log("在目标元素上松开鼠标");
 		}
 		divNode.ondragleave=function  () {
 			console.log("离开目标元素了");
 		}
 	}
 	
 </script>
</head>
<body>


<div draggable="true" class="box" ></div>

<div class="box1"></div>
</body>
</html>

这里写图片描述

注意：ondragoverondragover 默认地无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
event.preventDefault()

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示

不同浏览器需要添加前缀：
请求全屏
webkitRequestFullScreen、mozRequestFullScreen
取消全屏
webkitCancleFullScreen、mozCancleFullScreen

兼容写法：

//进入全屏
function requestFullScreen() {
    var de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen() {
    var de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

web存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

window.sessionStorage
window.localStorage

1、设置、读取方便
2、容量较大，sessionStorage约5M、localStorage约20M
3、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享

window.localStorage
1、永久生效，除非手动删除
2、可以多窗口共享

方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容

			localStorage.setItem("name","yzq");//存数据
			localStorage.getItem("name")//取数据
			localStorage.removeItem("name");//移除数据
			localStorage.clear();//清除所有数据
			
			
			sessionStorage.setItem("pwd","aaa");
			sessionStorage.getItem("pwd")
			sessionStorage.removeItem("pwd");
			sessionStorage.clear();

网络状态监听

		<script>
			if(navigator.onLine) {
				alert("有网")
			} else {
				alert("没网");
			};

			window.addEventListener('online', function() {
				alert('网络连接已建立！');
			});

			window.addEventListener('offline', function() {
				alert('网络连接已断开！');
			})
		</script>

应用缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

步骤：
1.首先创建一个manifest 文件，manifest 文件的建议的文件扩展名是：".appcache"。
2.在需要缓存的页面的根标签添加manifest 属性。
2.编写manifest 文件，告知浏览器哪些需要缓存，哪些不需要…

例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"

注意，manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK
下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的：


NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*

FALLBACK

当页面无法访问时的回退页面（比如 404 页面）

FALLBACK:
404.html

示例：
创建demo.appcache文件
编写manifest文件

CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html

在html标签中添加manifest属性

<!DOCTYPE html>
<html manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</body>
</html>

下一篇：

从零开始，学习web前端之CSS3

如果你觉得本文对你有帮助，麻烦动动手指顶一下，可以帮助到更多的开发者，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客 ，谢谢！

XeonYu
关注
  • 11
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端开发第一季：HTML
06-14
本课程完全从零基础开始讲解，保证学习质量，一节课结束后就能做出效果。培养自己动手写代码能力、独立解决问题以及web开发能力。课程精细，页面丰富、设立了大量的演示案例、纯动手操作一步一步完成一个综合性的...
初始HTML5
qq_64469885的博客
04-27 55
HTML5是HyperText Markup Language的第五个版本，是HTML最新的一次更新，它具有更多的新特性和功能，可以为Web开发带来更好的用户体验和更强的可访问性。HTML5提供了一些新的语义化标签，如``、``、``、``、``等，这种类型的标签可以使页面更简洁，也使得搜索引擎对网站内容的理解更好。2. 在网站使用HTML5标签，比如``、``等。一、HTML5的新特性。
2024年web前端开发学习路线和实战开发教程指南
最新发布
2401_83973943的博客
03-31 998
2。使用HTML5，CSS3，画布上开发移动终端。考虑到第一方面的能力，你需要学习：1，javascript的基本特效它实现了木马、拖放、放大镜等常见的网络特效。2，jQuery的基础掌握一般的API使用jQuery，并能够熟悉jQuery的插件开发机制。3、引导响应掌握机器响应的机理，在引导过程中使用网格布局和响应布局，开发复杂的页面布局。4、ajax基础充分理解Ajax原理，掌握Ajax原生和jQuery的ajax用法。5、UI流行框架。
HTML5基础知识汇总（一）
weixin_30315723的博客
09-08 239
一、HTML的开发工具和使用的浏览器 开发工具：记事本等文本编辑器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。 浏览器：Chrome、Firefox、IE、Safari、IPhone、Android。 二、HTML的基本要素 DOCTYPE 描述文档的类型 html 网页的...
html网页实现分享功能,H5网页实现微信分享功能
weixin_26833205的博客
07-05 3019
H5网页实现微信分享功能一，首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。二，在需要调用JS接口的页面引入微信JSSDK的JS文件 。这个文件在需要分享的页面是...
前端HTML5常用基础知识总结
不想学习的打工人的博客
07-11 2091
HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架： 1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........
Web:前端入门到进阶图文教程，超详细的Web前端学习笔记。从零开始学前端，做一名精致优雅的前端工程师。公众号「千古壹号」作者
05-10
从零开始学前端，做一名精致优雅的前端工程师。 项目地址 GitHub地址： 我的前端教程长期免费，不玩猫腻，不会设置任何套路，暂时也没打算做成付费内容，因为我相信启蒙的重要性。 如果你发现本项目有内容上的错误，...
Web：前端入门到进阶图文教程，超详细的Web前端学习笔记。从零开始学前端，做一名精致优雅的前端工程师。公众号“千古壹号”作者
02-03
项目介绍项目地址： : 从零开始学尖端，做一名精致的前端工程师。持续更新中。本项目的主要作用有： 1，网上的大部分入门教程，都不太适合初学者，本项目有望照顾到每一位前端入门者的同理心。甚至你完全不懂前端，...
Web前端+后端+架构 21部从零玩转Web全栈超级架构师 2000集50G容量爆表-学完就够用！
08-22
超级Web全栈架构师视频教程，课程分成了21部从零玩转课程，每个分部的课程也都是从零开始实战。同时每个分部的课程都可以当做一个独立的专题课程进行学习。课程内容从HTML开始到跨平台开发，JavaScript核心+新特性，...
Bootstrap零基础学习第一课之模板
12-04
 写从零开始学Bootstrap的初衷：  看了半天的Bootstrap的文档，包括官方的（http://v3.bootcss.com/getting-started/）和非官方的（http://www.mscto.com/bootstrap/bootstrap-tutorial.html），以及他人写的简单...
html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...
weixin_35779309的博客
06-19 1729
对微信的JSSDK进行封装一下，创建一份类似的文件结构，增加index.html与shareApi.js文件，结构如图3.3所示。图3.3 3.2节文件结构另外，提醒读者一下，wxJSSDK.js文件的JSSDK环境配置中，需要更改一下配置参数，代码如下：01jsApiList:[//其他代码略02"onMenuShareTimeline",03...
【前端入门】HTML5
赵啸天的博客
02-12 277
一、基础概念 W3C标准： 结构化标准语言——HTML,XML 表现标准语言——CSS 行为标准——DOM,ECMAScript 行内元素和块元素 块元素：总会另起一行放内容的 行元素：可以好多元素放在一行内的 二、页面结构 结构 用途 header 标题头部区域的内容（用于页面或页面中的一块区域） footer 标记脚步部区域的内容（用于整个页面或页面中的一块区域） section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用（常用
前端学习路线，如何学习前端
wangjun_xiaoseng的博客
10-14 4642
前端学习路线，如何学习前端（学习周期，测试题，源码，阶段项目） 1.首先零基础学习前端先要有一个计划，了解前端要学习哪些技术。 2.做好自己的时间规划，如何快速入门前端那肯定是需要不断的提高自己的学习效率，学习过程中尽量把手机调至静音给自己一个安静的学习环境和氛围。 3.快速入门顾名思义肯定是少走弯路，在学习过程中看下自己身边有没有前端这方面的大神尽量多问，多交流，如果是没有的话，可以多去找一些前端的交流群，学习肯定是不能闭门造车。 学习是一个循序渐进的过程，前端的学习也是如此。 不论前端开发还是后端开发的
8个精美的 HTML5 网站案例分享
weixin_33964094的博客
03-16 316
与大家分享 8 个精美的 HTML5 网站作品。HTML5 是现在Web开发领域的热点，越来越多的开发人员开始使用 HTML5 来开发交互性强、效果出众的Web应用和游戏。希望这些 HTML5网站案例能帮助大家更好的学习 HTML5 网站制作。 Worry Free Labs Fore Fathers Group TEDxPortland Pointless Corp D...
如何学习前端？看这篇就够了
sdasadasds的博客
07-08 1076
数据可视化这一概念自1987年正式提出，经过30余年的发展，逐渐形成3个分支：科学计算可视化(scientific visualization)、信息可视化(information visualization)和可视分析(visual analytics)。近些年来，这3个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。通过“可视化”的方式，我们看不懂的数据通过图形化的手段进行有效地表达，准确高效、简洁全面地传递某种信息，
HTML5（入门）
热爱编程、热爱生活、热爱探索
01-18 8184
<!--1.我的第一个网页.html(为HTML文件名)--> <!DOCTYPE html> <!--表示浏览器的使用规范，一般默认都是html的规范,所以可不要--> <html lang="en"> <head> <!--网页标题--> <meta charset="UTF-8"> <!--告诉浏览器编码类型为字符型编码 常见的字符编码--> <title>网页一.
web前端学习文档 电子版_web前端小白系统入门学习
weixin_39754267的博客
12-12 146
正文互联网正在改变我们的生活，前端也成了很重要的岗位之一，许多人都往前端靠拢，可又无能为力，不知所措，首先我们说为什么在编程里，大家都倾向于往前端靠呢？原因很简单，那就是，在程序员的世界里，前端开发是最简单的编程，因为它真的很简单，下面，我就开始一点一点的教大家如何开始前端知识的学习首先我们学习前端，要知道前端的三个大内容，HTML、CSS、JS，其中HTML和CSS是相互结合着学习，掌...
前端学习路线（前端零基础）
qq_18599727的博客
04-30 4623
Hello！ 我是程序员米粉。目前在一家世界500强上市公司做全栈开发，曾担任10多人的前端小组的组长，喜欢分享各种前端技术、以前受人帮助，所以我也会传承这种助人为乐的精神。 前言 今天我们来简单聊一聊前端程序员的成长，学习什么前端技术，以及怎么学，如何从一个小白如何独当一面。前端的发展从我刚毕业那会只要会点 HTML、css、JavaScript、jquery 就有很多公司 抢着要，甚至前端开发那个岗位，也要会点 PS 设计。我曾经也做过，自己设计自己开发页面，自己也跟着用 php 开发。不过现在好多了，
从零开始:html5+css3快速入门 pdf
07-12
总而言之，《从零开始:HTML5 CSS3快速入门PDF》是一本适合初学者的实用教程，通过学习本书，读者可以快速入门HTML5和CSS3的技术，并能够运用它们进行网页开发。 ### 回答3： 从零开始:HTML5 CSS3快速入门是一本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XeonYu

码字不易，鼓励随意。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值