### HTML+JavaScript+CSS 学习笔记
#### HTML 基础知识点
##### 1. Meta 标签
Meta 标签主要用于提供网页的元数据信息，这些信息不会直接显示在页面上，但对浏览器、搜索引擎等有重要作用。
- `<meta name="属性名" content="属性值">`：用来描述页面的元信息，例如作者、描述、关键词等。
- 示例：`<meta name="author" content="张三">` 表示页面的作者为张三。
- `<meta http-equiv="属性名" content="属性值">`：用来定义与HTTP等效的头部信息。
- `Expires`：设置网页的过期时间，使浏览器在指定时间前缓存该页面。
- 示例：`<meta http-equiv="Expires" content="Wed, 26 Feb 1997 08:21:57 GMT">`
- `Content-Type`：设置网页的编码类型。
- 示例：`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">`
- `Refresh`：设置页面自动刷新的时间间隔。
- 示例：`<meta http-equiv="Refresh" content="5; url=http://www.example.com">` 表示5秒后跳转到指定URL。
- **注意**：使用`charset`属性时，建议将`Content-Type`放在文档头部的第一条或第二条，以确保字符集被正确解析。
##### 2. 表单与表格元素
表单（`<form>`）用于收集用户输入的数据，并通过提交操作发送到服务器端进行处理。
- `<form name="表单名称" method="GET/POST" action="处理程序" target="目标窗口">`：定义一个表单。
- `<input type="类型" name="名称" value="初始值">`：定义输入框。
- `type`属性包括：`text`（文本）、`password`（密码）、`submit`（提交按钮）、`reset`（重置按钮）、`checkbox`（复选框）、`radio`（单选框）等。
- 示例：`<input type="text" name="username" value="请输入用户名">`
表格（`<table>`）用于展示数据结构化的布局。
- `<table border="边框宽度" cellspacing="单元格间距" cellpadding="单元格填充">`：定义表格。
- `<tr>`：定义表格的一行。
- `<th>`：定义表头单元格，通常用于描述列的含义。
- `<td>`：定义普通单元格，用于放置具体的数据。
##### 3. DIV 和 SPAN 标签
- **DIV**：定义一个区块容器，常用于布局设计，可以包含多个HTML元素。
- 示例：
```html
<div id="left" style="position:absolute; top:15px; left:0px; border:5px solid red; background:#FFF; width:150px; height:400px;">
<p>左侧区域</p>
</div>
```
- **SPAN**：定义内联容器，用于样式化或添加JavaScript功能到部分文本或行内元素。
- 示例：
```html
<span style="color: blue; font-size: 50px;">100</span>
```
#### CSS 基础知识点
CSS（层叠样式表）用于定义HTML元素的样式，如颜色、字体、布局等。
- **选择器**：用于匹配特定的HTML元素，并应用相应的样式规则。
- 元素选择器：如`p { color: red; }`表示所有`<p>`标签内的文字都显示为红色。
- 类选择器：`.classname { ... }`表示类名为`classname`的所有元素。
- ID 选择器：`#idname { ... }`表示ID为`idname`的元素。
- **样式规则**：如`color`、`font-size`、`background-color`等。
- 示例：
```css
#left {
position: absolute;
top: 15px;
left: 0px;
border: 5px solid red;
background: #FFF;
width: 150px;
height: 400px;
}
#middle {
margin: 0px 160px 0px 160px;
border: 5px solid #666;
background: #FFF;
height: 400px;
}
#right {
position: absolute;
top: 15px;
right: 0px;
border: 5px solid #666;
background: #FFF;
width: 150px;
height: 400px;
}
```
#### JavaScript 基础知识点
JavaScript 是一种脚本语言，主要用于控制网页的行为，如动态效果、交互式表单验证等。
- **DOM 操作**：DOM（文档对象模型）是HTML和XML文档的编程接口，允许程序创建、读取、更新、删除文档中的内容和结构。
- 获取元素：`document.getElementById('elementId')`
- 修改内容：`element.innerHTML = '新的内容'`
- 添加事件监听器：`element.addEventListener('click', function() { ... })`
- **函数和事件处理**：函数是执行特定任务的一组指令，而事件处理程序则是在特定事件发生时调用的函数。
- 示例：
```javascript
function submitForm() {
var username = document.getElementById('username').value;
if (username == '') {
alert('请输入用户名！');
return false;
}
// 提交表单...
return true;
}
document.getElementById('submitButton').addEventListener('click', submitForm);
```
以上就是HTML、CSS、JavaScript的基础知识点介绍。通过理解并掌握这些基础知识，你可以构建出更复杂、更丰富的网页应用程序。在实际开发过程中，还可以结合使用框架和库来简化开发过程，提高开发效率。
