HTML
- html是一门超文本标记语言
- 运行在浏览器上，由浏览器内置的解析器来解析
- 标签都是预定义好的
- 网页由三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css练习</title>
</head>
<body>
网页内容部分
</body>
</html>
基础标签
<h1>...<h6> 定义标题
<font> 定义文本字体，尺寸，颜色
<b> 加粗文本
<i> 斜体文本
<u> 带下划线的文本
<center> 文本居中
<p> 定义段落
<br> 定义折行
<hr> 定义水平线
图片音频视频标签
<img src="图片的地址或路径"> 图片标签
<audio src="音频的地址或路径" controls：显示播放控件>
<video src="视频的地址或路径" controls：显示播放控件>
绝对路径：完整路径 ./
相对路径：相对位置关系 ../
超链接和列表
<a href="指定访问资源的url">
<ol type="设置项目符号">
<li>有序列表</li>
...
</ol>
<ul>
<li>无序列表</li>
...
</ul>
表格标签
<table border="规定边框的宽度" cellspacing="规定单元格之间的空白">
<tr>
<th>表头单元格</th>
...
</tr>
<tr>
<td rowspan="单元格可横跨的行数" colspan="单元格可横跨的列数">表头单元格</td>
...
</tr>
</table>
布局标签
<div></div>
<span></span>
表单标签
action:规定当提交表单时向何处发送数据
method:规定发送表单数据的方式
get:数据直接附在表单的action的url之后，大小有限制
post:浏览器将数据放到http请求消息体中，大小无限制
表单中标签
<input>:表单项，通过type属性控制输入形式
<select>:下拉列表，<option>:定义列表项
<textarea>:文本域标签
type取值
text:定义单行输入的字段
password:定义密码字段
radio:定义单选按钮
checkbox:定义复选框
file : 定义文件上传按钮
hidden:定义隐藏的输入字段
submit:定义提交按钮，会将表单数据发送到服务器
reset:定义重置按钮，重置按钮会清除表单中的所有数据
button:定义可点击按钮，普通按钮
例
<form action="#" method="post">
<label for="username">用户名：</label><input type="text" name="username" id="username"><br>
<label for="password">密码：</label><input type="text" name="password" id="password"><br>
性别：<input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="2"> 女
<br>
爱好：<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 篮球
<input type="checkbox" name="hobby"> 洗脚
<br>
<select><!--定义下拉列表-->
<option>列表项</option>
</select>
<textarea>文本域标签</textarea>
<br>
<input type="submit" value="这是一个提交按钮">
<input type="reset" value="这是一个重置按钮">
<input type="button" value="这是一个普通按钮">
</form>
CSS
控制网页的表现和布局样式
css导入HTML有三种方式
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css练习</title>
<style>
span{
color: yellow;
}
</style>
<link href="../css/demo.css" rel="stylesheet">
</head>
<body>
<!-- 内联样式-->
<div style="color: red">hellocss</div>
<!--内部样式-->
<span>hellocss</span>
<!--外部样式-->
<p>heiheiehei</p>
</body>
</html>
<!--外部文件中的css-->
p {
color: red;
background-color: chartreuse;
height: 500px;
width: 200px;
}
css选择器：选择器是选取需设置样式的元素
分类
1.元素选择器
元素名称{样式设置}
2.id选择器
#id属性值{样式}
3.类选择器
.class属性值{样式}
css属性（了解）
JavaScript简单介绍
JavaScript是一门跨平台、面向对象的脚本语言，它是一门弱类型语言，变量可以存放不同类型的值，它一般用来控制网页行为，能使网页可交互
JavaScript引入方式
1.内部脚本：将JS代码定义在HTML页面中
可以在HTML文档任意位置放置任意数量的<script>
一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
2.外部脚本：将JS代码定义在JS文件中，然后引入到HTML页面中
外部脚本不能包含<script>标签
标签不能自闭和
书写语法
1.区分大小写，变量名、函数名以及其他一切东西都是区分大小写的
2.每行结尾的分号可有可无
3.注释：单行注释// 多行注释/**/
输出语句：
使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
var 变量名=值; //作用域：全局变量；变量可以重复定义
ECMAScript6新增了let关键字定义变量，所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变
数据类型：原始数据类型和引用类型
5种原始数据类型：
number：数字
string：字符，字符串，单双引号皆可
boolean：布尔
null：对象为空
undefined：声明的变量未初始化时，该变量默认值是undefined
使用typeof运算符可以获取数据类型
alert(typeof 变量名)
运算符：
== :先判断数据类型，不一样进行数据类型转换，再进行值的比较
=== :判断数据类型，不一样直接返回false
其他运算符与java一样
类型转换：
其他类型转number
1.string：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN
2.boolean：true为1，false为0
其他类型转boolean
1.number：0和NaN转为false，其他数字转为true
2.string：空字符串转为false，其他转为true
3.null和undefined：都转为false
函数：执行特定任务的代码块
js中函数通过function关键字进行定义，语法为：
function 函数名(){
执行的代码
}
注意：形式参数不需要类型，因为js是弱类型语言
返回值也不需要定义类型，直接在函数内部使用return返回即可
数组(Array)：
定义： var 变量名=new Array(元素列表);
var 变量名=[元素列表];
js数组类似于Java，但是它的长度类型都可变
字符串(String)
定义： var 变量名=new String("sss");
var 变量名=""; var 变量名='';
charAt() 返回指定位置的字符
indexOf() 检索字符串
自定义对象
格式：var 对象名={
属性名1:属性值1,
...
函数名:function(){
...
}
...
}
BOM对象(Browser Object Model) 浏览器对象模型
js将浏览器的各个组成部分封装为对象
组成：
window：浏览器窗口对象
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期来调用函数或计算表达式
setTimeout() 在指定毫秒后调用函数或计算表达式
navigator：浏览器对象
screen：屏幕对象
history：历史记录对象
back() 加载history列表中的前一个URL
forward() 加载history列表中的下一个URL
location：地址栏对象
href属性： 设置或获取完整的URL
DOM对象(Document Object Model)文档对象模型
将标记语言的各个组成部分封装为对象
js通过DOM，对HTML进行操作（改变元素内容、改变样式、对DOM事件作出反应，添加和删除HTML元素）
Document：整个文档对象
使用Document对象的方法获取Element元素对象
getElementById()：根据id属性值获取一个element对象
getElementsByTagName()：根据标签名获取，返回一个element对象数组
getElementsByName()：根据name属性值获取，返回element对象数组
getElementsByClassName()：根据class属性值获取，返回element对象数组
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
事件：
HTML事件是发生在HTML元素上的事情，比如：
鼠标被点击
鼠标移动到元素上
按下键盘按键
事件监听：js可以在事件被侦测到时执行代码
事件绑定有两种方式：
方式一：通过HTML标签中的事件属性进行绑定
<input type="button" οnclick="on()">
function on(){
alert("我被点了");
}
方式二：通过DOM元素属性绑定
<input type="button" id="btn">
document.getElementById("btn").οnclick=function(){
alert("我被点了");
}
常见事件：详见HTML文档教程
正则表达式
从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？
正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
正则表达式常用的规则如下：
- ^：表示开始
- $：表示结束
- [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
- .：代表任意单个字符，除了换行和行结束符
- \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
- \d：代表数字字符： 相当于 [0-9]
量词：
- +：至少一个
- *：零个或多个
- ？：零个或一个
- {x}：x个
- {m,}：至少m个
- {m,n}：至少m个，最多n个
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
