LOFTER for ipad —— 让兴趣,更有趣

点击下载 关闭

LOFTER-网易轻博

HTML

4845浏览    1757参与
西安汇杰
LUKER
LUKER
LUKER
LUKER
孔令锴

Visual Studio 2017/2019编写HTML并执行

作者:孔令锴
习惯VS者前端之旅的第一步。

JavaScript is the most popular programming language on GitHub. Visual Studio更快地进行代码编写。更智能地执行操作。使用同类最佳 IDE 创建未来。

yangsongsz2019

Html5(五):多媒体初级应用

  1.浏览器

  2.多媒体格式

     多媒体元素(比如视频和音频)通常存储于媒体文件中。分别为:

        视频:当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表,图片格式则通过 .gif 或 .jpg 来识别。...


  1.浏览器

  2.多媒体格式

     多媒体元素(比如视频和音频)通常存储于媒体文件中。分别为:

        视频:当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表,图片格式则通过 .gif 或 .jpg 来识别。

        音频:多媒体元素元素也拥有带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。

  3.常用应用

    QuickTime:MP4、Wave

    Flash:SWF

    Windows Media Player:WMV


     

m18712153233

html知识点

return也经常与confirm(“提示信息?”)消息框一起使用,用于返回客户端操作结果。

  例:<A HREF="del.html"onclick="return confirm('你确定删除此条数据吗?')" >删除</A>


在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例:

<Inputtype="button" value=" "...

return也经常与confirm(“提示信息?”)消息框一起使用,用于返回客户端操作结果。

  例:<A HREF="del.html"onclick="return confirm('你确定删除此条数据吗?')" >删除</A>


在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例:

<Inputtype="button" value=" " onclick=alert("这是一个例子"); 


yangsongsz2019

Html5(三):简易界面设计

1)对话框

<form>

   <input type="" name="" value="">

   <br/>

</form>

从上面的程序可以看出,设计一个对话框主要包括以下元素:

form标签:说明这是一个用于收集数据功能的标签,它具有以下属性:

  action属性:当按下提交按钮时,会将数据提交到服务器(网页)

  accept-charset属性:规定在被提交表单中使用...

1)对话框

<form>

   <input type="" name="" value="">

   <br/>

</form>

从上面的程序可以看出,设计一个对话框主要包括以下元素:

form标签:说明这是一个用于收集数据功能的标签,它具有以下属性:

  action属性:当按下提交按钮时,会将数据提交到服务器(网页)

  accept-charset属性:规定在被提交表单中使用的字符集(默认:页面字符集)。

  autocomplete属性:规定浏览器应该自动完成表单(默认:开启)。

  enctype属性:规定被提交数据的编码(默认:url-encoded)。  

  method属性:规定在提交表单时的http方法(get/post)

  name属性:规定识别表单的名称(对于 DOM 使用:document.forms.name)。

  novallidate属性:规定浏览器不验证表单。

  target属性:规定 action 属性中地址的目标(默认:_self)。

input标签:用于表明这是一个用于框体的输入数据标签,它包括type(文本、按钮等)、name(控件名称)、value(控件里默认数据定义)、action(在



 


yangsongsz2019

Html5(二):HTML构架

<head>

<style>

.cites{background-color:black ;color: white;margin: 20px;padding:20px;}

</style>

</head>

此部分是整个HTML页面的页面设置部分。包括背景颜色、字体颜色、行间距、字间距、分块名等重要因素。

<body>

<div class="cites">(页面分类)

<h2>标题</h2>

<p>页面显示的主题内容</p>

<...

<head>

<style>

.cites{background-color:black ;color: white;margin: 20px;padding:20px;}

</style>

</head>

此部分是整个HTML页面的页面设置部分。包括背景颜色、字体颜色、行间距、字间距、分块名等重要因素。

<body>

<div class="cites">(页面分类)

<h2>标题</h2>

<p>页面显示的主题内容</p>

</div>

</body>

此部分时整个HTML页面的页面显示部分。包括:标题、段落内容(带分类)、块等重要因素。




yangsongsz2019

HTML自学路线

第一阶段:前端页面重构(4周)

课程一:PC端网站布局

课程内容:HTML基础、CSS基础、CSS核心属性 、CSS样式层叠、继承,盒模型 、容器、溢出及元素类型 、浏览器兼容与宽高自适应 、定位、锚点与透明 、图片整合 、表格、CSS属性与滤镜"

课程项目:《世纪佳缘用户注册页布局》、《卧龙控股网站项目布局》、《华帅灯饰网站项目布局、《千锋互联网站项目布局》、《京东首页布局》 、《腾讯游戏首页布局》 、《BOSS直聘布局》 、《麦田国际项目布局》

课程二:HTML5+CSS3基础

课...

第一阶段:前端页面重构(4周)

课程一:PC端网站布局

课程内容:HTML基础、CSS基础、CSS核心属性 、CSS样式层叠、继承,盒模型 、容器、溢出及元素类型 、浏览器兼容与宽高自适应 、定位、锚点与透明 、图片整合 、表格、CSS属性与滤镜"

课程项目:《世纪佳缘用户注册页布局》、《卧龙控股网站项目布局》、《华帅灯饰网站项目布局、《千锋互联网站项目布局》、《京东首页布局》 、《腾讯游戏首页布局》 、《BOSS直聘布局》 、《麦田国际项目布局》

课程二:HTML5+CSS3基础

课程内容: HTML5新增的元素与属性 、表单域增强元素 、CSS3选择器 、文字字体相关样式 、 CSS3位移与变形处理 、CSS3 2D转换与过度动画、CSS3 3D转换与关键帧动画 、弹性盒模型 、媒体查询 、响应式设计

课程项目:《探路者页面布局》 、《2D相册》、《3D相册》 、《CSS3绘制机器猫》 、《CSS3绘制自行车》 、《骰子布局》

课程三:WebApp页面布局

课程内容:移动端页面设计规范 、移动端切图 、流式布局(100%布局) 、等比缩放布局(rem布局) 、响应式布局 、viewport 、rem/vw的使用 、flexbox详解 、移动端reset, 1px border, 高清图片 、 淘宝移动端页面适配方案

课程项目:《Ghost 开源博客平台页面的响应式布局》 、《足球圈M站布局》


第二阶段1:JavaScript高级程序设计(8周)

课程一:原生JavaScript交互功能开发

课程内容:基本语法 、循环语句、 函数与数组 、String与Date 、 BOM与DOM 、事件 、拖拽效果 、cookie存储 、正则表达式 、Ajax 、 面向对象基础 、 运动与游戏开发

课程项目:蘑菇街瀑布流 、打砖块游戏开发 、淘宝商品查询 、微信飞机大战游戏开发 、智能问答机器人

课程二:面向对象进阶与ES5/ES6/ES7应用

课程内容:Promise 、设计模式(观察者模式等)、原型链 、 构造函数 、 执行上下文栈与执行上下文 、 变量对象与活动对象 、作用域链 、 闭包 、 this 、ES5 、ES6 、ES7

第二阶段2:PC端全栈开发

课程一:jQuery经典交互特效开发

课程内容:时间轴特效 、 tab页面切换效果 、 网页定位导航特效 、滑动门特效 、焦点图轮播特效 、导航条菜单效果 、瀑布流特效 、弹出层效果 、倒计时效果 、抽奖效果

课程项目:《天猫首页交互开发》

课程二:PHP+MySQL后端基础

课程内容:Apache 、 PHP 、MySQL 、HTTP(s)协议详解 、Ajax进阶、跨域与Defered 、Apache与Nginx 环境搭建与配置 、接口的定义、Mock数据 、Restful 、前后端联调、前端安全(XSS,CSRF,JSON注入)

课程项目:《Smartisan手机商城后端接口开发》

课程三:前端工程化与模块化应用

课程内容:Gulp 、Webpack 、 NPM 、 Linux命令 、Git/SVN 、 CommonJS 、 AMD 、 CMD 、ES6模块化

课程项目:《Smartisan手机商城开发工程化环境搭建》

课程四:PC端全栈开发项目

课程内容:、大首页、列表页与详情页 、展示与交互特效 、搜索 、登录与注册 、购物车 、jQueryUI 与 jQuery EasyUI 、Bootstrap(ACE) 、Highcharts/Echarts 、 ArtTemplate、velocity 、smarty 、云平台系统前端 、Apache+PHP+MySQL服务器搭建

课程项目:《Smartisan手机商城全栈开发》

第三阶段1:Node.js后端开发

课程一:Node.js基础

课程内容:开发环境搭建M 、模块与包管理工具M 、CommonJS模块M 、URL网址解析M 、QueryString参数处理M 、HTTP模块M 、HTTP小爬虫M 、request方法M 、事件 events模块M 、文件 fs模块M 、Stream 流模块M 、原生路由与参数接收M 、读取图片文件M 、npm scriptsM 、Yarn 与 PM2M
课程二:MongoDB
课程内容:MongoDB介绍与环境搭建 、数据库常用命令 、Collection聚集集合 、document文档操作 、聚集集合查询、NodeJS连接MongoDB
课程三、GraphGL
课程内容:GraphQL初探:从REST到GraphQL 、GraphGL安装 、准备数据源 、搭建GraphQL服务器 、数据查询
课程四、Express
课程内容:express 介绍 、安装和创建基于Express的项目、Express 4.1x 初始化项目详解、路由简介、模板引擎EJS 、模板引擎Pug(Jade)
课程五、Koa2
课程内容:Koa2开始 、路由 、请求数据获取、静态资源加载 、cookie/session 、模板引擎 、文件上传 、数据库MySQL 、JSONP实现、测试与debug
课程六、测试框架mocha
课程内容:搭建框架、断言assert 、项目测试、运行多个测试
课程七、socket 即时通信项目
课程内容:Socket简介和通讯流程 、基于net模块实现socket、WebSocket 、Socket.io

第三阶段2:vue.js前端构架

课程一:Vue.js开发基础

课程内容:WebApp开发基础(Webstorage,移动端事件,UI组件, Zepto, IScroll, Swiper) 、MVVM模式、前端组件化 、单文件组件 、组件间传值 、Vue实例 、E19Vue实例生命周期 、Vue的模版语法 、计算属性,方法与侦听器 、计算属性的 getter 和 setter 、Vue中的样式绑定 、Vue中的条件渲染 、Vue中的列表渲染 、Vue中的set方法 、父子组件间的数据传递 、组件参数校验与非 props 特性 、给组件绑定原生事件 、非父子组件间的传值 、在Vue中使用插槽 、作用域插槽 、动态组件与 v-once 指令 、Vue动画

课程项目:《Vue.js基础案例.》

课程二:应用Vue.js开发WebApp项目

课程内容:环境配置 、项目代码介绍 、单文件组件与Vue中的路由 、单页应用VS多页应用 、Mint UI 、Element UI 、项目的联调,测试与发布上线

课程项目:《打造仿卖座网移动端网站》

第三阶段3:React前端框架

课程一:React 开发基础课程内容:React简介 、React开发环境准备、 React中的组件、JSX语法 、拆分组件与组件之间的传值、React developer tools 安装及使用 、PropTypes 与 DefaultProps 的应用 、props,state 与 render 函数的关系 、深入了解React虚拟DOM 、虚拟 DOM 中的 Diff 算法 、React 中 ref 的使用、React的生命周期函数及使用场景 、使用Charles实现本地数据mock、React 中实现 CSS 动画效果 、react-transition-group 实现动画 、Redux 概念简述和工作流程 、Action 和 Reducer 的编写 、 ActionTypes 的拆分 、使用 actionCreator 统一创建 action 、UI组件和、容器组件及无状态组件 、使用Redux-thunk 中间件实现ajax数据请求 、Redux-saga 中间件使用 、React-redux 中间件使用

课程项目:《React基础案例》

课程二:应用React开发WebApp项目

课程内容:Ant Design组件库、React Router 4 路由 、项目组件编写 、使用 Immutable.js 来管理store中的数据 、项目的联调、测试与发布上线

课程项目:《打造在线英文教育网》

第三阶段4:混合开发(Hybrid,RN)

课程一:微信公众号开发

课程内容:初识微信公众号 、订阅号的基本功能 、使用百度BAE实现代码的快速上线、 使用Git完成线上代码部署 、公众号开发权限及功能接入、 微信JSSDK接口API 、微信场景项目开发与接入

课程项目:《卖座电影项目接入微信》

课程二:各类混合应用开发

课程内容:自主原生Navtive Hybrid(iOS、Android) 、 第三方Hybrid框架Cordova/Phone gap  第三方Hybrid框架MUI + HTML5

课程项目:《mui+h5项目实战》

课程三:阿里钉钉企业E应用(支付宝小程序)

课程内容:E应用功开发入门 、E应用开发流程 、E应用开发基础 、 E应用开发实战

第三阶段5:小程序开发

课程一:微信小程序开发

课程内容:微信小程序初探 、小程序入门必学 、小程序组件体验 、小程序大功能、项目实战带你征服小程序

课程项目:《造萌宠交易平台》

课程二:多端小程序开发

课程内容: 支付宝小程序 、 百度小程序 、 字节跳动小程序

课程项目:《电商小程序平台》

第三阶段6:原生APP开发

课程一:React Native

课程内容:React Native初探 、React Native 项目导航 、React Native 项目文本框 、React Native 项目滚动分页 、 React Native 其他组件

课程项目:《React Native豆瓣电影APP》

课程二:Flutter开发

课程内容:开发准备 、快速起步 、 界面结构 、基础部件 、布局 、视图、Sliver 、 路由 、 表单 、按钮 、 输入 、对话框 、状态管理 、网络请求 、动画 、测试、发布与部署

课程项目:《Flutter版爱美食APP》

第三阶段7:Angular前端框架

课程:Angular6基础

课程内容:TypeScript 基础与进阶 、开发环境配置 、Hello World 、架构、模块与组件、模板 、元数据、数据绑定与数据显示 、表单 、服务与指令、依赖注入、路由、 Ionic 3 框架

课程项目:《直播课管理系统》、《跨平台手机APP》

第三阶段8:大数据可视化

课程:大数据可视化基础与实战

课程内容:数据可视化基础 、Echars、Hignchars 、D3.js 入门 、D3.js 进阶 、D3.js 选择集与数据 、D3.js 高级应用 、D3.js 应用工具:NVD3、n3-charts

课程项目:《公安警情可视化系统》









零落成泥

老福特对图片有一定的保护,但是对文字内容好像并没有相关的保护。

因为最近太芥tag的事情想着用我这点贫瘠的html知识康康能不能实现禁止复制的功能。

结果发现老福特的html源码模式竟然只支持几个属性。

事件和CSS不用说了,甚至连文字对齐方式都改不了……

 结果除了把字体变大改色和加背景色以外我啥都没研究出来。

发现能够添加<div>的标签,直接在<div>里定义的话会简单很多,用其他支持H5的博客尝试了下可以实现禁止复制但不知道lofter可不可以(估计是不能的)

我再研究研究,如果有了解这方面的太太也欢迎私信评论一起讨论啊。

研究出来了就写...

老福特对图片有一定的保护,但是对文字内容好像并没有相关的保护。

因为最近太芥tag的事情想着用我这点贫瘠的html知识康康能不能实现禁止复制的功能。

结果发现老福特的html源码模式竟然只支持几个属性。

事件和CSS不用说了,甚至连文字对齐方式都改不了……

 结果除了把字体变大改色和加背景色以外我啥都没研究出来。

发现能够添加<div>的标签,直接在<div>里定义的话会简单很多,用其他支持H5的博客尝试了下可以实现禁止复制但不知道lofter可不可以(估计是不能的)

我再研究研究,如果有了解这方面的太太也欢迎私信评论一起讨论啊。

研究出来了就写个教程,没有就算了(。


==========================

结果改动字体也仅仅是能在编辑界面看到效果,发布预览和保存草稿的时候并不能看到真实效果。



是因为lofter的自定义模板把效果覆盖了吗…………?

那这个html源码模式的意义是什么(吐槽)

我再研究研究


=========================

失败了,明明普通文字都可以使用源码但长文章却没有这个功能

lofter的这个功能真是令人迷惑

删tag了


=========================

询问了客服,客服告诉我不支持修改html代码来自定义文字,让我多多摸索

那么请问这个功能有什么用?拿来看的吗!

user-xiao

JS的基础知识

作者:user-xiao
未来的前端攻城狮们,想知道JS的基本组成部分以及它是如何运行的吗?

本文主要介绍了JS中的一些基础知识:

1.JS的基本组成

2.ESMAScript的历史以及规范等

3.变量

4.数据类型

5.JS代码如何运行及运行后如何输出运行结果

大白兔蹦上墙

设计网页文本【20190903.笔记】

标题文本

<h1>~<h6> 


标题文本

<h1>~<h6> 



网页制作学习笔记

选择符的优先级

优先级顺序:

在各种选择符中,id选择符的优先级最高,然后是类选择符,最后是类型选择符。


伪类:指的是一类特殊的选择符,通过这类选择符,可以定义了某种鼠标触发时间的显示效果。


未访问的链接   a:link 也就是a标签未被访问状态

已访问链接:a:visited 也就是a标签已被访问状态

鼠标移动到链接上:a:hover也就是a标签鼠标悬停状态

选定的链接:a:active 也就是a标签鼠标悬停状态活动状态(鼠标点着不松)

优先级顺序:

在各种选择符中,id选择符的优先级最高,然后是类选择符,最后是类型选择符。


伪类:指的是一类特殊的选择符,通过这类选择符,可以定义了某种鼠标触发时间的显示效果。


未访问的链接   a:link 也就是a标签未被访问状态

已访问链接:a:visited 也就是a标签已被访问状态

鼠标移动到链接上:a:hover也就是a标签鼠标悬停状态

选定的链接:a:active 也就是a标签鼠标悬停状态活动状态(鼠标点着不松)

网页制作学习笔记

子选择器

语法:

子元素选择器只能选择作为某元素子元素的元素,用>符号


作用:

子选择符,用来精确定位某个元素


选择器分组

语法:为了得到更简洁的样式表,用,符号


作用:使用选择符分组的方法,可以一次性定义几个选择符中的样式


语法:

子元素选择器只能选择作为某元素子元素的元素,用>符号


作用:

子选择符,用来精确定位某个元素


选择器分组

语法:为了得到更简洁的样式表,用,符号


作用:使用选择符分组的方法,可以一次性定义几个选择符中的样式



网页制作学习笔记

选择符

有哪些:id选择符、类选择符、类型选择符、伪类


级别不同:在CSS中,选择符的种类很多,每种选择符的优先级也不同


id选择符是所有选择符中,优先级最高的。

#是关键字


类选择符用来定义页面中可以重复使用的CSS属性,其优先级低于id选择符

.是关键字


有哪些:id选择符、类选择符、类型选择符、伪类


级别不同:在CSS中,选择符的种类很多,每种选择符的优先级也不同


id选择符是所有选择符中,优先级最高的。

#是关键字


类选择符用来定义页面中可以重复使用的CSS属性,其优先级低于id选择符

.是关键字



网页制作学习笔记

CSS的语法

CSS样式有自身固定的语法结构,只有按照规范的写法,语法才能正确的作用并在相应的页面元素上显示


包含:CSS选择符、属性、属性值、单位等各个部分内容的写法,以及在使用各种结构时,所要注意的各种问题等。


掌握以下知识要点


熟悉CSS中的各类选择符的属性及用法

了解CSS中属性和属性值的特点

简单了解块元素和内联元素


CSS样式有自身固定的语法结构,只有按照规范的写法,语法才能正确的作用并在相应的页面元素上显示


包含:CSS选择符、属性、属性值、单位等各个部分内容的写法,以及在使用各种结构时,所要注意的各种问题等。


掌握以下知识要点


熟悉CSS中的各类选择符的属性及用法

了解CSS中属性和属性值的特点

简单了解块元素和内联元素


网页制作学习笔记

表格对齐属性

align 水平对齐属性align来定义行行所包含的单元格内容的水平对齐方式


valign 垂直对齐属性valign来定义行所包含的单元格内容的垂直对齐方式


background 用背景图片属性background来定义单元格使用的背景图片


align 水平对齐属性align来定义行行所包含的单元格内容的水平对齐方式


valign 垂直对齐属性valign来定义行所包含的单元格内容的垂直对齐方式


background 用背景图片属性background来定义单元格使用的背景图片



网页制作学习笔记

表格的一些其他属性

thead 表格头行元素<thead>用来定义表格最上端表首的样式


caption 表格标题元素<caption>来定义表格的标题


th 定义表格的表头,文本内容会加粗显示,同时默认为中间对齐


tbody 表主题元素<tbody>用来将表格的内容分割成各个独立的部分。


tfoot 表格行尾元素<tfoot>用来定义表格行尾的标注等内容。

thead 表格头行元素<thead>用来定义表格最上端表首的样式


caption 表格标题元素<caption>来定义表格的标题


th 定义表格的表头,文本内容会加粗显示,同时默认为中间对齐


tbody 表主题元素<tbody>用来将表格的内容分割成各个独立的部分。


tfoot 表格行尾元素<tfoot>用来定义表格行尾的标注等内容。

LOFTER

让兴趣,更有趣

简单随性的记录
丰富多彩的内容
让生活更加充实

下载移动端
关注最新消息