开始标签到结束标签--
标签
元素--Elements
<html> 元素定义了整个 HTML 文档
<body> 元素定义了 HTML 文档的主体
属性--properties
总是在 HTML 元素的开始标签中规定
名称/值对的形式出现
属性 值 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)
注释 <!-- <table> 定义 HTML 表格 -->
标题(Heading)是通过 <h1> - <h6> 等标签进行定义的
段落是通过 <p> 标签定义的
换行(新行)<br/>
元素中文本的字体系列、颜色和字体尺寸 font-family、color 以及 font-size
长引用的 <blockquote>
短的引用 <q>
链接语法 使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
图像由 <img> 标签定义
表格由 <table> 标签来定义
<html><head><title>.....</title><linkrel="stylesheet"type="text/css"href="mystyle.css"><styletype="text/css">
body {background-color: red}
p {margin-left: 20px}
</style><scripttype="text/javascript">
document.write("Hello World!")
</script></head><body><h1>First Heading</h1><p>first paragraph</p><ahref="http://shiyanlou.com">This is a link</a><imgsrc="shiyanlou.jpg"width="100"height="142"/><pstyle="color: red; margin-left: 20px">
This is a paragraph
</p></body></html>
常见的HTML事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。
JavaScript的基本介绍
客户端脚本
网页中JavaScript脚本,可以在HTML页面的 <body>和<head>部分中,必须位于<script> 与 </script> 标签内,浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码
如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件
<script>
function displayDate(){
//查找元素,HTML DOM 中定义.getElementById("demo")
//改变 HTML 元素的内容innerHTML=新的 HTML
document.getElementById("demo").innerHTML=Date();
}
</script><scriptsrc="myScript.js"></script>
数据类型
数据类型-动态类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)--
语法:
语句:带分号
函数定义 function
变量声明:var
Object-键值对的容器
访问对象--使用.点或者[]
访问对象方法objectName.methodName()
输出数据
JavaScript 可以通过不同的方式来输出数据
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台
HTML DOM介绍
浏览器会创建页面的文档对象模型(Document Object Model)
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
改变
改变 HTML 内容
document.getElementById(id).innerHTML=新的 HTML
改变 HTML 元素的属性
document.getElementById(id).attribute=新属性值
改变HTML 元素的样式。
document.getElementById(id).style.property=新样式
事件
button 元素分配 onclick 事件
<buttononclick="displayDate()">点这里</button>
在用户点击按钮时触发监听事件:
document.getElementById("myBtn").addEventListener("click", displayDate);
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。