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

来源：互联网发布：福科汽车软件编辑：程序博客网时间：2024/05/16 10:32

牢骚

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

html框架
了解html的都明白，html是超文本标记语言，姑且理解为标签语言。
最基本的写法结构:

图例层：
这里写图片描述

代码层：

<html><head></head><body></body></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输出流

<script>document.write(Date());</script>

2、js使用DOM改变 HTML 内容

<script>document.getElementById("p1").innerHTML="New text!";</script>

3、js使用DOM改变 HTML 属性

<img id="image" src="smiley.gif"><script>document.getElementById("image").src="landscape.jpg";</script>

4、js使用DOM改变 HTML 样式

<h1 id="id1">My Heading 1</h1><button type="button" onclick="document.getElementById('id1').style.color='red'>点击这里</button>

5、js使用DOM处理事件

HTML 事件的例子：

a、当用户点击鼠标时
b、当网页已加载时
c、当图像已加载时
d、当鼠标移动到元素上时
e、当输入字段被改变时
f、当提交 HTML 表单时
g、当用户触发按键时

比如，点击改变文字：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

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

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

添加：

<!DOCTYPE html><html><body><div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script></body></html>

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

删除：

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script>

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

JS语法下一篇回顾。

阅读全文

1 0