HTML简介
超级文本标记语言（HyperText Markup Language）是标准通用标记语言下的一个应用，也是一种规范和标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以 告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文 件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制 者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完 全相同的解释，因而可能会有不同的显示效果。
标签：用尖括号包围的关键词我们成为标签。通常HTML标签成对出现，如：、。
Ø 开始标签：标签对中的第一个标签是开始标签，也成为开放标签。如。
Ø 结束标签：标签对中的第二个标签是结束标签，也成为闭合标签。如。
元素：我们把匹配的标签对以及它们包围的内容称为元素。即（元素 = 开始标签 + 内容 + 结束标签）。
Ø 块级元素：在浏览器默认显示时以新行来开始（和结束）的元素。
Ø 内联元素：又称行内元素，在浏览器默认显示时在同一行按从左至右顺序显示，不单独占一行的元素。
属性：开始标签中那些以名称/值对的形式出现的内容，我们称之为属性。
HTML元素
根元素
<doctype> |
定义文档类型。 |
|---|---|
<html> |
定义 HTML 文档。 |
元数据元素
<head> |
定义关于文档的信息。 |
|---|---|
<meta> |
定义关于 HTML 文档的元数据。 |
<link> |
定义文档与外部资源之间的关系，一般用于引入样式表。 |
<base> |
定义页面上所有链接的默认地址或默认目标。 |
<title> |
定义文档标题。 |
<style> |
定义文档的样式信息。 |
脚本元素
<script> |
定义客户端脚本。 |
|---|---|
<noscript> |
定义当浏览器不支持脚本的时候所显示的内容 |
块元素
<body> |
定义文档的主体。 |
|---|---|
<h1>、 <h2>... <h6> |
定义文档标题。 |
<p> |
定义文档段落。 |
<blockquote> |
定义块引用。 |
<ul>、 <ul>、 <dl> |
定义列表。 |
<table> |
定义表格。 |
列表元素
无序列表
<ul> |
定义无序的列表。 |
|---|---|
<li> |
定义列表项。 |
有序列表
<ol> |
定义有序的列表。 |
|---|---|
<li> |
定义列表项。 |
定义列表
<dl> |
定义定义列表。 |
|---|---|
<dt> |
定义定义术语。 |
<dd> |
定义定义描述。 |
表格元素
<table> |
定义表格。 |
|---|---|
<thead> |
定义表格的页眉。 |
<tbody> |
定义表格的主体。 |
<tfoot> |
定义表格的页脚。 |
<th> |
定义表格的表头行。 |
<tr> |
定义表格的行。 |
<td> |
定义表格单元。 |
文本元素
文本格式化元素
<em> |
定义着重文字。 |
|---|---|
<strong> |
定义加重语气。 |
<sup> |
定义上标字。 |
<sub> |
定义下标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
<b> |
定义粗体文本。 |
<i> |
定义斜体文本。 |
<big> |
定义大号字。 |
<small> |
定义小号字。 |
链接与图像
<a> |
定义超链接 |
|---|---|
<img> |
定义图像。 |
<map> |
定义图像地图。 |
<area> |
定义图像地图中的可点击区域。 |
<div> 和 <span>
<div> |
定义文档中的分区或节（division/section）。 |
|---|---|
<span> |
定义 span，用来组合文档中的行内元素。 |
表单元素
<form> |
定义供用户输入的表单。 |
|---|---|
<input> |
定义输入域。 |
<textarea> |
定义文本域 (一个多行的输入控件)。 |
<lable> |
定义一个控制的标签。 |
<select> |
定义一个选择列表。 |
<option> |
定义下拉列表中的选项。 |
<optgroup> |
定义选项组。 |
<button> |
定义一个按钮。 |
<fieldset> |
定义域。 |
<legend> |
定义域的标题。 |
CSS
CSS简介
CSS是一种定义样式结构如字体、颜色、位置等的语言，用于描述网页上的信息格式化和现实的方式。CSS样式可以 直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。 外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
2.2 CSS语法
- css由两部分组成：选择器和声明。
选择器指定来声明应用于那个或者那些元素；声明用于设置元素的样式，用大括号括起来里面用分号隔开每一条。
在
<head>中，可以用<style>和<link>标签。选择器中有多项时，在前一项的前提下，后一项的样式为声明的样式，其他情况无效。
id选择器：
css文件中：#red {color:red;}
HTML文件中：
<p id="red">red</p>
类选择器：
css文件中：.center {text-align:center}
HTML文件中： <h1 class="center"> center </h1>
- 背景属性：
background-color属性：（合理的英文颜色单词或#000000，默认值为transparent为透明）为元素设置背景色。background-image属性：（url（/i/emg_01.jpg），默认值为none）用图像做背景。
background-repeat属性：（默认repeat在所有方向重复，repeat-x在水平方向重复，repeat-y垂直方向重复，no-repeat不重复）设定重复方式。
background-position属性：（top、center、bottom每种情况的left、center、right三种位置共九种；（x，y），x和y由0%到100%从坐上到右下，也可以用数字表示像素，也可以混用）设置背景图像起始位置。
background-attachment属性：（fixed当页面其他部分滚动时背景不变）固定背景图像。
background-clip属性：（border-box背景被裁剪到边框盒，padding-box背景被裁剪到内边距框，content-box背景裁 剪到内容处）规定背景的绘制区域。
background-origin属性：（border-box背景被裁剪到边框盒，padding-box背景被裁剪到内边距框，content-box背景 裁剪到内容处）规定background-position属性的位置相对于什么来定位。
background-size属性：（x，y，可以为以父元素为基础的百分比或像素做单位；cover，扩展足够大，可能有的部分 无法显示；contain，扩展至适应内容区域的最大尺寸）设置背景图像的尺寸。
- 文本属性：
color属性：（合理英文颜色名，#00000，rgb（255，0，0））设定文本颜色。letter-spacing属性：（x，定义间距可以为负数单位像素）设定文本间距。
line-height属性：（x，可为百分比和像素，不能为负值）设定文本行高。text-align属性：（left，right，center，justify两端对齐）设定对齐方式。
text-decoration属性：（underline下划线，overline上划线，line-through横穿一条线，blink闪烁）文本划线样式修 饰。
text-indent属性：（x，可为以父元素为基础的百分比和像素）规定文本块首行文本缩进。text-shadow属性：（x,y,z水平阴影位置，垂直阴影位置，模糊距离，颜色）文本阴影。word-spacing属性：（x，定义间距可以为负数单位像素）设定字间距，单词以空格分开算。word-wrap属性：（break-word）在长单词或URL地址内部进行换行。
- 字体属性：
font属性：在一个声明中可以设置所有的字体属性。
font-style属性：（italic斜体，oblique倾斜，）设置字体倾斜样式。
font-variant属性：（small-caps显示小型大写字母的字体）设置为小型大写字母。font-weight属性：（x，400为默认，700为bold粗体）设置文本粗细。
font-size属性：（x，百分比或固定值）设置字体尺寸。font-family属性：为段落设置字体。
- 链接定义：
a:link {} 未被访问的链接
a:visited {} 已被访问的链接a:hover {} 鼠标指针移动到链接上a:active {}正在被点击的链接
hover要在link和visited之后，active要在hover之后。
text-decoration属性：（none去掉下划线，underline出现下划线）设置下划线。background-color属性：规定链接的背景色。
- 表格属性：
border-collapse属性：（collapse将边框合并为一个单一的边框）边框样式。caption-side属性：（top在顶端，bottom在低端）表格标题位置。
empty-cells属性：（hide不在空单元格周围绘制边框）是否显示空单元格。border-width属性：（x，y，z，w，上右下左，百分比或固定值）设置边框尺寸。border-color属性：（x，y，z，w，上右下左，四个颜色值）设置边框颜色。
width属性、height属性：（x，百分比或固定值）设置表格宽度和高度。
padding属性：（x，y，z，w，上右下左，四个位置内边距）声明所有的内边距，或者用padding-bottom，padding- left，padding-right，padding-top四个属性来替换。
border-style属性：（none无，dotted点，dashed虚线）定义边框样式。
margin属性：（x，y，z，w，上右下左，百分比或固定值）设置一个声明中的外边距。
css类型
内联方式
样式定义在单个的 HTML元素中内部样式表
样式定义在 HTML 页的头元素中外部样式表
将样式定义在一个外部的 CSS 文件中（.css 文件） 由 HTML 页面引用样式表文件
css选择器
标签选择器（如：body,div,p,ul,li）
类选择器（如：class=”head”,class=”head_logo”）
ID选择器（如：id=”name”,id=”name_txt”）
全局选择器（如：*号）
组合选择器（如：.head .head_logo,注意两选择器用空格键分开）
继承选择器（如：div p,注意两选择器用空格键分开）
伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
JavaScript
JavaScript简介
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户 提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
是一种解释性脚本语言。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、
iOS等）。
JavaScript语法
js代码能直接嵌入网页的任何地方，通常放在
<head></head>中，但会要求用户把所有js代码都下载解析执 行以后在呈现内容；可以把代码单独的放在一个.js文件中，同时，多个页面可以引用同一份.js文件；
页面中可以多次编写
<script></script>,但是浏览器会按照顺序执行这些JavaScript代码；JavaScript中每个语句以 ； 结尾 每个语句块以 {…..} 注释用//或/* */
所有类型都是定义变量都是用 var， 如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量；
hello.html
<html>
<head>
<title>js \</title>
<script type="text/javascript"> console.log("Hello javascript")
</script>
</head>
<body>
</body>
</html>
外部样式表
test.js
alert('Hello JS')
test.html
<html>
<head>
<title>js \</title>
<script type="text/javascript" src='test.js'> \</script>
</head>
<body>
</body>
</html>
火火的总结
- HTML展示内容，网页的骨架
- CSS美化页面｛｝
- JS让页面动起来，提高浏览体验。
