html文件 | 易学教程

HTML实时预览-livereload完整使用方法

阅读更多关于 HTML实时预览-livereload完整使用方法

常规html查看过程:修改html文件-->浏览器中刷新-->修改html文件-->浏览器中刷新使用livereload后:修改html文件,浏览器自动刷新可以简单的理解为livereload就是让浏览器自动帮你刷新html本地文件也许你会说网络上有很多livereload的使用方法,最开始浏览那些信息花了我一个多小时,但是我的LiveReload依然没有工作问题出在哪里? 实际上,LiveReload包括两部分内容:你需要同时为编辑器和浏览器安装livereload插件,两个插件的关系是server-client 基本上各大编辑器的插件库中都能找到LiveReload 至于浏览器,你也可以在Chrome和Safari的插件中心找到它对于初学者而言,Safari的LiveReload并不是那么合适,因为它只支持URL而不支持本地html文件.当然,如果你知道如何使用小型sever工具来发布你的网页,使用Safari也可以以下是步骤,使用Chrome和VSCode作为示范: 为Chrome安装LiveReload 如果无法打开插件中心,可以去寻找离线安装包.安装完成后,请在扩展管理中确认启用插件并开启本地文件支持(这一点很重要) 点我下载离线安装包为你的编辑器安装LiveReload插件,在插件中心直接搜索安装即可如何使用?默认情况下

如何在GitHub预览html

阅读更多关于如何在GitHub预览html

1.在GitHub中找到需要预览的html文件，点击settings 2.找到GitHub Pages，将其中的source改为master branch，此时出现了下图中的红色链接，打开一个新的网页，将该网址复制进去，然后将github中html文件的存放路径放到该链接的后面即可 3.生成的链接为https://cttv2.github.io/qianduan/，html文件在GitHub中的路径为day9-11/day_nine.html，最终链接为https://cttv2.github.io/qianduan/day9-11/day_nine.html 来源： https://www.cnblogs.com/ccv2/p/12299445.html

HTML<!DOCTYPE> 宣示

阅读更多关于 HTML 宣示

在html页面，下面这行代码到底有什么用呢？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在一次页面重构过程中。看到静态页的第一行有这么一段代码，其后紧跟一大片空白，在删除空白的时候不小心删掉了这行代码，然后。。。。原来显示正常的页面，瞬间凌乱了，字体样式没了。关键是放在IE浏览器下一看。布局全然错位了，，，，还以为是样式除了问题，找了半天也没找到原因，还好。原来的文件有备份，拿出了一比較，就这一行代码在做怪。然后学习了一哈，它究竟是干嘛用的？ <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 doctype的作用 doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在web文档的情况下。“阅读程序”一般是浏览器或者校验器这种一个程序，“规则”则是w3c所公布的一个文档类型定义（dtd）中包括的规则。每一个dtd都包含一系列标记、attributes和properties。它们用于标记web文档的内容；此外还包含一些规则，它们规定了哪些标记能出如今其它哪些标记中

【HTML】之DOCTYPE

阅读更多关于【HTML】之DOCTYPE

　　一、什么是DOCTYPE 　　DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML（或者HTML）里的标识和CSS才能正常生效。　　二、为什么要DOCTYPE 　　众所周知，浏览器有Standards Mode和Quirks Mode，特别是 IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，所以在页面前端申明文档类型显得尤为重要。 alert(window.top.document.compatMode); 　　上面这行代码，能够帮你判断浏览器目前的浏览模式，返回值有两种： BackCompat：标准兼容模式关闭。 CSS1Compat：标准兼容模式开启。　三、DOCTYPE的规则　　DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义 Document Type Definition （dtd）中包含的规则。　　每个dtd都包括标记、attributes、properties等内容

添加本地视频

阅读更多关于添加本地视频

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <div > 10 <object data="__ROOT__/Public/ceshi3/qc.mp4" type="video/mp4" width='330' height='200' align='middle' ></object> 11 </div> 12 </div> 13 <div align="center" style="padding-top:10px"> 14 <div>乾诚集团--------《破浪》<br><br> 15 <a href="__ROOT__/Public/ceshi3/qc.mp4" >点击全屏播放</a></div> 16 </div> 17 </div> 18 </body> 19 </html> 使用 <object> 元素 I nternet Explorer 和 Netscape 都支持 <object> 元素。该元素的作用是在网页中嵌入多媒体元素： <object data="video.avi" type="video/avi" /> 上面的代码片断在网页设置了一个嵌入的的 AVI 文件。来源： https:

Html介绍,认识html文件基本结构

阅读更多关于 Html介绍,认识html文件基本结构

一个HTML文件的基本机构如下： <html> <head>...</head> <body>...</body> </html> 代码讲解如下： 1.<html></html>称之为根标签，所有的网页标签都是在它们中间的。 2.<head></head>标签用于定义文档的头部，它是头部元素的容器。头部元素包含有<title>、<style>、<scipt>、<link>、<meta>等标签。 3.在<body>和<body>标签之间的内容是网页的主体内容，如：<h1>、<span>、<a>、<img>、<p>等网页内容标签，在这里的标签中的内容会在浏览器中展示。整体代码如下展示： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>认识html文件基本结构</title> 8 </head> 9 <body> 10 <h1>html文件的基本结构包含<html></html><head></head><body><

2.1.7 html的处理与打包

阅读更多关于 2.1.7 html的处理与打包

webpack可以自动生成HTML，自动引入js和css html生成需要用到的plugin cnpm install html-webpack-plugin --save-dev 相关配置 filename -- 打包生成的 html 文件的名字 template -- 指定一个 html 文件为模板（以本地html文件为模板） minify -- 压缩html （去掉空格，换行） inject -- 是否把js，css文件插入到html，插入到哪 chunks -- 多入口时，指定引入chunks 1、引入插件 var htmlWebpackPlugin = require('html-webpack-plugin'); 2、在插件中注册 plugins:[ new htmlWebpackPlugin({ filename:"index.html", template:"./index.html", minify:{ collapseWhitespace: true }, inject:false, // chunks:['app'] //多入口 }) ] 生成的index.html <!DOCTYPE html><html><head><title></title></head><body><div id="mydiv" class="div1"></div></body

html网页基本概念

阅读更多关于 html网页基本概念

什么是网页？html文档经过浏览器内核渲染后展示出来的页面（五大主流浏览器及四大内核） html文档文件名后缀是.html,之前存在的.htm是为支持DOM系统（目前织梦还是用.htm文件名结尾文件）编码是我们通过代码的形式把想要展示的页面写到html文档里面，接着渲染作为一个动作，主要是html文档本身无法被人很好识别的，所以需要经过浏览器内核渲染展示为正常人看的页面，查看页面源代码快捷键是CTRL+U；通常源代码展示如下： 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="referrer" content="origin" /> 7 8 <meta http-equiv="Cache-Control" content="no-transform" /> 9 <meta http-equiv="Cache-Control" content="no-siteapp" /> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 11

Javascript用法

阅读更多关于 Javascript用法

1 .HTML 中的脚本必须位于标签之间。脚本可被放置在 HTML 页面的和部分中 < ! DOCTYPE html > < html > < body > . . < script > document . write ( "<h1>标题</h1>" ) ; document . write ( "<p>段落</p>" ) ; < / script > . . < / body > < / html > 2 .通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。 <html> <head> <script> function myFunction() { document.getElementById("art").innerHTML="Hello"; } </script> </head> <body> <h1>我的页面</h1> <p id="art">段落</p> <button type="button" οnclick="myFunction()">点击</button> </body> </html> 3 .您可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的或部分中，或者同时存在于两个部分中。通常的做法是把函数放入部分中，或者放在页面底部

30DaysOfJavaScript-First Day

阅读更多关于 30DaysOfJavaScript-First Day

在github上有一个30天学会Javascript的项目，本文对其进行了一些翻译与缩写，侵权删使用快捷方式打开控制台 Mac Command + Option + I Windows： Crtl + Shift + I 第一个JavaScript代码我们使用了内置函数 console.log（）。我们传递了一个参数作为输入数据，该函数显示了输出。我们在console.log（）函数中传递了“ Hello，World”作为输入数据或参数。 console.log('Hello, World!') console.log（param1，param2，param3）可以接受多个参数。 console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript') 注释示例：单行注释 //这是第一条注释示例：多行注释 / *这是一个多行注释多行注释可以占用多行 * / 算术运算 console.log(2 + 3) // 加 console.log(3 - 2) // 减 console.log(2 * 3) // 乘 console.log(3 / 2) // 除 console.log(3 % 2) // 求余 console.log(3 ** 2) // 次方环境我们使用Visual Studio Code

订阅 html文件