网页开发学习
网页开发学习笔记
menglong0329
不止于技术,不止于代码!
展开
-
网页开发学习思路
基础知识:建议学习步骤Html5 —> css3 —> javascript —> vueHTML5html中的列表标签 - ul、ol、dl html中的表单标签 - form html中的表格标签 - table html中的多媒体标签 - bgsound、embed、object html中的滚动字幕标签 - marquee html中的内嵌框架标签 - iframe html中的下拉列表标签 - select html中的框架标签 - frameset原创 2020-08-06 15:27:21 · 258 阅读 · 0 评论 -
html中的head标签
head标签中设置页面的配置项:字符集、关键词、页面描述、页面标题、IE适配、视口、iphone小图标等等<mate>标签:提供页面的基本信息设置字符集:字符集,有UTF-8和GBK两种格式<metacharset="UTF-8">设置窗口的大小,例如做移动端的网页时,手机的分辨率是720*1280device-width代表视口宽度 &l...原创 2020-03-10 16:54:15 · 261 阅读 · 0 评论 -
html中的body标签
body用于定义html中所要显示的内容,也称为主题标签,我们所写的代码必须要放在这个标签内属性: bgcolor 设置整个网页的背景色 background 设置整个网页的背景图片,当背景色和背景图同时设置时,优先展示背景图 text 设置整个网页的文本颜色 leftmargin 网页的...原创 2020-03-10 17:00:36 · 1317 阅读 · 0 评论 -
html中的超链接、段落标签、水平线标签、块标签、内容居中标签
<!-- 超链接标签 --> <a href="#">点击我一下</a> <!-- 段落标签 --> <p align="left">今天是一个好日志</p> <!-- 水平线标签(已废弃)align位置 width宽,已像素为单位 size线条粗细 color线条颜色 n...原创 2020-03-10 18:05:55 · 3018 阅读 · 0 评论 -
html中的pre、标题标签、字体标签
<!-- 禁止屏蔽空格/换行符标签pre:所有浏览器默认都会屏蔽掉空格和换行符,pre标签就是告诉浏览器不要屏蔽空格及换行符 --> <b>禁止屏蔽空格/换行符标签pre:</b> <pre> 这是一个pre标签哪 这是一个标签哪 </pre> <br&...原创 2020-03-10 19:57:02 · 1309 阅读 · 0 评论 -
html中的:下划线标签、中划线标签、斜体标记、粗体标记
<!-- 下划线标记 --> <b>下划线标签:</b> <u>u标签是下划线标签</u> <br> <!-- 中划线标签 --> <b>中划线标题:</b> <s>s是中划线标签</s> <d...原创 2020-03-10 20:03:12 · 26207 阅读 · 0 评论 -
html中的上标标签、下标标签
<br> <!-- 上标标签 --> <b>上标标签:</b> 0<sup>sup表示上标</sup> <br> <!-- 下标 --> <b>下表标签:</b> 0<sub>sub是下标记</...原创 2020-03-10 20:05:50 · 4508 阅读 · 0 评论 -
html中的超链接及锚点设置
<!-- 回到底部的标记 此链接为锚点连接 --> <a name="name1">这是回到顶部的标记</a> <br> <!-- 超链接 href跳转到其他网页的URL title悬停文本 name主要用于设置一个锚点的名称 target告诉浏览器用什么方式打开新页面:...原创 2020-03-10 20:12:08 · 4505 阅读 · 0 评论 -
html中的邮件标签
<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>原创 2020-03-10 20:17:23 · 3200 阅读 · 0 评论 -
html中的图片标签 - img
<!-- img标签: 单边标记,自封闭标签 能够插入的图片类型有:jpg(jpeg)、gif、png、bmp 不能往网页中插入的图片格式是:psd、ai HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。 src属性:图片的相对路径和绝对路径 相对路径...原创 2020-03-10 20:25:45 · 694 阅读 · 0 评论 -
html中的框架标签 - frameset、frame
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>框架标签</...原创 2020-03-11 08:56:53 · 794 阅读 · 0 评论 -
html中的下拉列表标签 - select
<body><!-- select 下拉列表标签 --><!-- select 里面的每一项用 option 表示,select是选择,option是选项,select和ul/ol/dl一样都是组标签 --><!-- 属性: 1. multiple 可以对下拉列表中的选项进行多选,没有属性值 2. size="3" ...原创 2020-03-11 08:57:12 · 9401 阅读 · 0 评论 -
html中的内嵌框架标签 - iframe
<body> <!-- 内嵌框架用iframe表示,是body的子标记,嵌入在一个页面上的框架 --> <!-- 属性: 1. src="subframe/second.html" 内嵌的那个页面 2. width="20" 宽度 3. height="150" 高度 ...原创 2020-03-11 08:57:22 · 1180 阅读 · 0 评论 -
html中的滚动字幕标签 - marquee
<body> <!-- marquee 滚动字幕标签 --> <!-- 属性: 1. direction="right" 移动的方向,可以是:left(从右向左,默认),right(从左向右),up(从下向上),down(从上向下) 2. behavior="slide" 行为方式:slide(只移动一次),scrol...原创 2020-03-11 08:57:35 · 2232 阅读 · 0 评论 -
html中的多媒体标签 - bgsound、embed、object
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-03-11 08:57:48 · 2981 阅读 · 0 评论 -
html中的表格标签 - table
<p><b>表格标签:table</b></p> <hr size="3" color="red"> <!-- 表格标签 table 子元素只能放td 一个表格<table>是由行<tr>组成的,行是由列<tr>组成的 --> <!-- table标...原创 2020-03-11 08:58:05 · 1219 阅读 · 0 评论 -
html中的表单标签 - form
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单标签</...原创 2020-03-11 08:58:19 · 286 阅读 · 0 评论 -
html中的列表标签 - ul、ol、dl
<p><b>无序标签:ul</b></p> <hr size="3" color="red"> <!-- 列表标签1:ul 无序标签,子元素只能放li --> <!-- type条目前标记类型:disc(实心圆点,默认)、square(实心方点)、circle(空心圆);ul、li都可以设置 ...原创 2020-03-11 08:58:32 · 753 阅读 · 0 评论 -
DOM8:NodeList对象
JavaScript HTML DOM 节点列表NodeList对象是一个从文档中获取的节点列表 (集合) 。NodeList 对象类似HTMLCollection对象。一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象。所有浏览器的childNodes属性返回的是 NodeList 对象。大部分浏览器的querySelectorAll()返回 NodeList 对象。...原创 2020-05-21 14:54:15 · 320 阅读 · 0 评论 -
DOM7:集合(Collection)
JavaScript HTML DOM 集合(Collection)HTMLCollection 对象getElementsByTagName() 方法返回HTMLCollection对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。以下代码获取文档所有的 <p> 元素:var x = document.getElementsByTagName("p");集合中的元素可以通过索引(以 0 为起始位置)来访问。访问第二个 <p>..原创 2020-05-21 14:54:23 · 711 阅读 · 0 评论 -
DOM6:元素 (节点)
本章节介绍如何向文档中添加和移除元素(节点)。创建新的 HTML 元素 (节点) - appendChild()要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div> <script>var para = document.createE原创 2020-05-21 14:54:30 · 186 阅读 · 0 评论 -
DOM5:EventListener
JavaScriptHTML DOM EventListeneraddEventListener() 方法在用户点击按钮时触发监听事件:document.getElementById("myBtn").addEventListener("click", displayDate);addEventListener() 方法用于向指定元素添加事件句柄。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。你可以向一个元素添加多个事件句柄。你可以向同个元.原创 2020-05-21 14:54:38 · 110 阅读 · 0 评论 -
DOM4:事件
JavaScriptHTML DOM 事件HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。对事件做出反应我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:onclick=JavaScriptHTML 事件的例子:当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提.原创 2020-05-21 14:54:44 · 251 阅读 · 0 评论 -
DOM3:改变CSS
JavaScriptHTML DOM - 改变CSSHTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样式如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style.property=新样式下面的例子会改变 <p> 元素的样式:<!DOCTYPE html><html><head><meta charset="utf-8"&.原创 2020-05-21 14:54:50 · 103 阅读 · 0 评论 -
DOM2:改变HTML
JavaScriptHTML DOM - 改变 HTMLHTML DOM 允许 JavaScript 改变 HTML 元素的内容。改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容:今天的日期是:Fri May 15 2020 14:46:03 GMT+0800 (中国标准时间)在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。<!DOCTYPE html><html><..原创 2020-05-21 14:54:57 · 173 阅读 · 0 评论 -
DOM1:简介
JavaScriptHTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM模型被构造为对象的树:通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML..原创 2020-05-15 14:43:44 · 1309 阅读 · 0 评论 -
Vue8:自定义指令
Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:<body> <!-- 自定义指令 - 当页面加载时,输入框自动获取焦点 --> <div id="mydiv1"> <input v-focus> </div> <scri原创 2020-05-26 13:35:21 · 233 阅读 · 0 评论 -
Vue7:组件
Vue.js 组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:注册一个全局组件语法格式如下:Vue.component(tagName, options)tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName&g.原创 2020-05-26 13:10:57 · 441 阅读 · 0 评论 -
Vue6:事件处理器
Vue.js 事件处理器事件监听可以使用 v-on 指令:<div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p></div> <script>new Vue({ el: '#app', data: { counter: 0 }})</s原创 2020-05-25 21:57:39 · 188 阅读 · 0 评论 -
Vue5:样式绑定
Vue.js 样式绑定Vue.js classclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:<div v-bind:class="{ active: isActive }"&原创 2020-05-25 15:15:08 · 313 阅读 · 0 评论 -
Vue4:监听属性
Vue.js 监听属性本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器:<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</b原创 2020-05-25 14:15:25 · 138 阅读 · 0 评论 -
Vue3:循环语句
循环语句循环使用 v-for 指令。v-for 指令需要以site in sites形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表:<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol></div> &l..原创 2020-05-25 10:58:22 · 969 阅读 · 0 评论 -
Vue2:条件语句
Vue.js 条件与循环条件判断v-if条件判断使用 v-if 指令:<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> <原创 2020-05-22 16:14:36 · 299 阅读 · 0 评论 -
vue1:模板语法
Vue.js 模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:<div id="app"> <p>{{ mess原创 2020-05-21 14:53:40 · 160 阅读 · 0 评论