牢骚
好长时间没有写关于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语法下一篇回顾。