在html中写vuejs,html回顾及vue.js在html中使用(一)

牢骚

好长时间没有写关于html的代码,好多知识都忘得差不错了,业务需要vue.js，顺便回顾下html的知识。

html框架

了解html的都明白，html是超文本标记语言，姑且理解为标签语言。

最基本的写法结构:

图例层：

代码层：

head标签：

头部标签能处理什么呢？

title标签、base标签、link标签、meta标签、script标签 以及 style标签

title标签：

这是一个测试页面

运行结果：

base标签：

指定目标地址或者基链接

例如：

代码：

运行:

本例中我们有设置绝对地址，图片也能显示出来，因为我设置了base.默认为base下的图片.

link标签：

定义文档与外部资源之间的关联。

代码：

定义外部链接样式(.css文件)跟.html文件同级目录即可(或者放在一个文件夹下).

外部样式：outside.css

.html文件：

运行：

meta标签：

规定了字符编码格式、文档描述作者时间等等、文档关键字、重定向等等。

描述信息在哪呢？

打开浏览器的开发者选项

咦,margin报警高 非法，没有写单位，太粗心，添加单位px即可。

相关信息在head meta中描述了，不做详解。

script标签：

比较重要的一个标签，拆分html很重要的内容,实现交互，响应改变。

js位置：

head body都可以,一般外部script引入放在head标签中或者body显得不杂乱。

简单测试：

放入同一个文件夹下

外部js–mtest.js:

.html:

onclick 触发myFunction(),而该方法引入外部js.

运行结果：

实现点击按钮改变文字。

具体使用js前需要了解DOM.

DOM是什么？

DOM –文档对象模型，树形模型。

处理那些事务呢?

使得JavaScript能处理很多事情

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

JavaScript要去影响html,首先我们要获取影响的html元素。

DOM可以实现：

通过 id 找到 HTML 元素

var x=document.getElementById(“intro”);

————————————

通过标签名找到 HTML 元素

var x=document.getElementById(“main”);

var y=x.getElementsByTagName(“p”);

————————————

通过类名找到 HTML 元素

存在类名相同情况，寻找具体一个有点繁琐，不细说。

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

js与DOM合作做事：

1、js使用DOM改变HTML输出流

2、js使用DOM改变 HTML 内容

3、js使用DOM改变 HTML 属性

4、js使用DOM改变 HTML 样式

My Heading 1

请点击该文本

以及其他状态变化的情况，不祥述。

6、js使用DOM节点添加/删除

添加：

这是一个段落。

这是另一个段落。

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

实现创建新元素p标签，并在div标签后追加节点。

删除：

这是一个段落。

这是另一个段落。

var child=document.getElementById("p1");

parent.removeChild(child);

找到div的子节点p1并删除.

JS语法下一篇回顾。