Web前端学习总结（华清远见）
HTML部分
html（HyperText Markup Languages）是一门超文本标记语言，是一门纯粹的文本类型的语言。
html的基本结构
用head包括起来的称为头部，body称为主题部分，而最外层的html包括起来的就称为HTML文件。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
body>
html>
html文件的标签与元素
html常用标签：
标签< h1>< /h1>~< h6>< /h6>表示标题1到标题6大小一次递减
标签< p>< /p>为段落标签
标签< span>< /span>文本标签，默认不换行
标签< div>< /div>也是文本标签，但是可以设置大小（宽高）
标签< ul>< /ul>，表示无序列表
标签< ol>< /ol>，表示有序列表
标签< b>< /b>、< strong>< /strong>：加粗
标签< img>用于承载照片
标签< a>< /a>超链接，打击标签内容可跳转致指定页面
标签< table>< /table>表格，用于实现表格
标签< form>< /form>表单标签，常用于用户选择或填写内容。等等还有很多标签
html元素
html元素开始于开始标签，终止于结束标签。
<html>
<body>
<p>这里是p标签的元素p>
body>
html>
上述中body标签的元素则为：< p>这里是p标签的元素< /p>，而不是“这里是p标签元素”，而是包括p标签在内。
CSS部分
CSS（Cascading Style Sheets） 是一种描述html文档样式的语言。css描述应该如何显示html元素。
css语法
css规则集（rule-set）由选择器和声明块组成：
<style>
div{
color:red;
font-size:12px;
}
style>
其中div为选择器，color为div的属性，red为其属性的值。二则连起来表示div的color属性为red。
选择器指向您需要设置样式的html元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个css属性名称和一个值，以冒号分隔。多条css声明用分号分隔，声明块用花括号括起来。
css选择器
css选择器用于“查找”（或选取）要设置样式的html元素。
我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- [组合器选择器]（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
css的使用
css有三中使用方法：
- 外部css
- 内部css
- 内行css
外部css
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！每张 html 页面必须在 head 部分的 < link> 元素内包含对外部样式表文件的引用。
内部css
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 < style> 元素中进行定义。
内行css
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 css 属性。
JS部分
JavaScript 是属于 HTML 和 Web 的编程语言。JavaScript 能够改变 HTML 内容.getElementById()是多个 JavaScript HTML 方法之一。本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：
document.getElementById("demo").innerHTML = "Hello JavaScript";
JS的使用
js的使用需要用到< script> 标签，在 HTML 中，JavaScript 代码必须位于 < script>与< /script>标签之间。js的使用也可以分为两种：
- 内部使用：在< body>中引用< script>实现js内容。
- 外部引用：外部脚本很实用，如果相同的脚本被用于许多不同的网页。JavaScript 文件的文件扩展名是 .js。如需使用外部脚本，请在 < script>标签的 src(source) 属性中设置脚本的名称：
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
JS函数
JavaScript 函数是被设计为执行特定任务的代码块。JavaScript 函数会在某代码调用它时被执行。
JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。圆括号可包括由逗号分隔的参数。
函数调用
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
函数返回
当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用者。
JS事件
下面是一些常见的 HTML 事件：
| 事件 | 描述 |
|---|---|
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
jQuery部分
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
jQuery语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery选择器
jQuery可分为三种选择器：
- 元素选择器
- 属性选择器
- css选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取 < p> 元素。
$(“p.intro”) 选取所有 class=“intro” 的 < p> 元素。
$(“p#demo”) 选取所有 id=“demo” 的 < p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$(“[href]”) 选取所有带有 href 属性的元素。
$(“[href=‘#’]”) 选取所有带有 href 值等于 “#” 的元素。
$(“[href!=‘#’]”) 选取所有带有 href 值不等于 “#” 的元素。
$ (“[href$=‘.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
把所有 p 元素的背景颜色更改为红色：
jQuery的使用与JS大体相同，出语法不同外。