JavaScript学习01：快速入门
JavaScript` 简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
JavaScript：直接写入 HTML 输出流
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
JavaScript：对事件的反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。
JavaScript：改变 HTML 内容
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
JavaScript：改变 HTML 图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>
JavaScript：改变 HTML 样式
改变 HTML 元素的样式，属于改变 HTML 属性的变种。
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
JavaScript：验证输入
if isNaN(x) {
alert("不是数字");
}
前端架构分析
开发流程
设计页面样板–>前端工程师将样板做成静态网页–>后端工程师将静态网页修改为动态网页
C/S架构
B/S架构
B/S架构顾名思义就是 B代表浏览器，则S代表服务器的意思
2.B/S架构就是说以网址的形式使用，将运算 操作等储存到远程服务器
W3C标准
**W3C标准是由万维网联盟所制定及修改
1.结构（HTML）
用于描述页面结构
2.表现（CSS)
用于控制页面中元素的样式
在前端中起美化页面的作用
3.行为（JavaScript）
用于响应用户的操作
在前端中起网页布局修改的作用
网站协议
协议就是一种加密方式 别名（超文本传输协议） 目前世界通用HTTP协议相对安全，如果网站涉及密码安全与支付安全的同时，在此诞生了HTTPS协议
HTML语言（超文本标记语言）
HTMl语言有多种版本而我就不一一列举了，今天我主要介绍HTML5 第五代超文本标记语言，（编写过程中是不分行的当然为了代码好区分还是缩进为好）
超文本
顾名思义就是超链接的意思，可以实现页面间的对接
标记
又名标签用来识别网页中的不同组成部分
HTML页面基本代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
HTML中的标记指的就是标签用来描述网页
<title>网页标题</title>
<标签名/>
常用标签
<html>
作用：标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
用法：所有的网页内容都需要编写到html标签中，一个网页中html标签只能有一个
html标签中有两个子标签head和body
<head>
作用：标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息
用法：head标签作为html标签的子元素出现，一个网页中只要有一个head
<title>
作用：
<body>
作用：标签用来设置网页的主体，所有可视页面都编写在body标签中
用法：body标签作为html的子标签使用
<p>
作用：
标签表示网页中的一个段落，一般浏览器会在段落的前后各加上一个换行，段落会在页面中自成一行
作用：
标签表示一个换行标签，使用br标签可以使标签后的内容另起一行
作用：
标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分
<img/>
作用：标签是图片标签，可以用来向页面中引入一些外部的图片
属性：src指向一个外部的图片路径
alt图片的描述
<a/>
作用：<a/>标签是超链接标签，通过a标签，可以快速跳转到其他页面
属性：href指向一个链接地址
target设置打开目标页面的位置，可选值：_blank新窗口，_self当前窗口
元素
一个完整的标签称为元素
<h1>网页正文</h1>
h1和/h1是一个完整的元素
子元素和父元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素
祖先元素和后代元素
<body>
<p><em>段落</em></p>
</body>
body也是一个元素
body是p和em的祖先元素
p和em是body的后代元素
标题
标题分为一到六级分别写法为
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
**属性**可以为标签设置属性
通过属性为元素添加附加信息
属性总是以名称/值对的形式出现 比如：name=“value”
-有些属性可以是任意值
<img src=""alt="" />
有些属性是指定值
<h1 title="我是一个标题">标题</h1>
常见属性
id
id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值
class
class属性用来为标签分组，拥有相同属性的标签视为一组，就像python中的类，可以出现相同的class属性，可以为一个元素指定多个class
title
title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会显示提示文字
注释
注释就是解释的意思 为了方便记忆可以使用注释
<!-- 注释内容 -->
解决显示乱码问题
在头标题中添加
<meat charset="utf-8" />
实体（转义字符）
在编写过程中我遇到必须使用的大于或小于符号这时浏览器会将它解析为标签，这时候就用到转义字符
上一篇： 某些HTML字符打不出来怎么办
下一篇： C++指针知识点总结