一、HTML
1、什么是html？
HTML：Hyper Text Markup Language ：超文本标记语言。
超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的语言，它不是编程语言
2、html的语法和规范
- HTML 文件都是以.html 或者.htm 结尾的，建议使用.html 结尾！
- Html 文件分为头部分<head></head>和体部分<body></body>。
- Html 标签都是由开始标签和结束标签组成(<hr />)。
- Html 标签忽略大小写，但建议使用小写。
3、常用标签及取值
标题标签
1.<h1> 用于修饰标题，从<h1>到<h6>大小逐渐变小
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不推荐使用。请使用样式替代它。 规定标题中文本的排列。 |
<h1>落饼枫林</h1>
<h2>欢迎加入我们</h2>2.<hr> 在页面中创建一条水平分割线
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不赞成使用。请使用样式取代它。 规定 hr 元素的对齐方式。 |
| noshade | noshade | 不赞成使用。请使用样式取代它。 规定 hr 元素的颜色呈现为纯色。 |
| size | pixels | 不赞成使用。请使用样式取代它。 规定 hr 元素的高度（厚度）。 |
| width |
|
不赞成使用。请使用样式取代它。 规定 hr 元素的宽度。 |
<hr />
<hr size="5" />
<hr noshade="noshade" />字体标签
<font> 用于设置字体尺寸、字体颜色等
| 属性 | 值 | 描述 |
|---|---|---|
| color |
|
不赞成使用。请使用样式取代它。 规定文本的颜色。 |
| face | font_family | 不赞成使用。请使用样式取代它。 规定文本的字体。 |
| size | number | 不赞成使用。请使用样式取代它。 规定文本的大小。 |
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>格式标签
1.<b> 粗体
2.<i> 斜体
段落标签
1.<p> 定义段落，段落前后有空行
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不赞成使用。请使用样式取代它。 规定段落中文本的对齐方式。 |
2.<br> 换行标签
<br />表单标签
1.<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
| bgcolor |
|
不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding |
|
规定单元边沿与其内容之间的空白。 |
| cellspacing |
|
规定单元格之间的空白。 |
| frame |
|
规定外侧边框的哪个部分是可见的。 |
| rules |
|
规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width |
|
规定表格的宽度。 |
2.<tr> 定义 HTML 表格中的行。
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
定义表格行的内容对齐方式。 |
| bgcolor |
|
不赞成使用。请使用样式取而代之。 规定表格行的背景颜色。 |
| char | character | 规定根据哪个字符来进行文本对齐。 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| valign |
|
规定表格行中内容的垂直对齐方式。 |
3.<td> 定义 HTML 表格中的标准单元格。
| 属性 | 值 | 描述 |
|---|---|---|
| abbr | text | 规定单元格中内容的缩写版本。 |
| align |
|
规定单元格内容的水平对齐方式。 |
| axis | category_name | 对单元进行分类。 |
| bgcolor |
|
不赞成使用。请使用样式取而代之。 规定单元格的背景颜色。 |
| char | character | 规定根据哪个字符来进行内容的对齐。 |
| charoff | number | 规定对齐字符的偏移量。 |
| colspan | number | 规定单元格可横跨的列数。 |
| headers | header_cells'_id | 规定与单元格相关的表头。 |
| height |
|
不赞成使用。请使用样式取而代之。 规定表格单元格的高度。 |
| nowrap | nowrap | 不赞成使用。请使用样式取而代之。 规定单元格中的内容是否折行。 |
| rowspan | number | 规定单元格可横跨的行数。 |
| scope |
|
定义将表头数据与单元数据相关联的方法。 |
| valign |
|
规定单元格内容的垂直排列方式。 |
| width |
|
不赞成使用。请使用样式取而代之。 规定表格单元格的宽度。 |
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>4.<ol> 定义有序列表。
| 属性 | 值 | 描述 |
|---|---|---|
| compact | compact | HTML5 中不支持。HTML 4.01 中不赞成使用。 规定列表呈现的效果比正常情况更小巧。 |
| reversed | reversed | 规定列表顺序为降序。(9,8,7...) |
| start | number | 规定有序列表的起始值。 |
| type |
|
规定在列表中使用的标记类型。 |
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>5.<ul> 定义无序列表。
| 属性 | 值 | 描述 |
|---|---|---|
| compact | compact | 不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧。 |
| type |
|
不赞成使用。请使用样式取代它。 规定列表的项目符号的类型。 |
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>6.<frameset> 可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
| 属性 | 值 | 描述 |
|---|---|---|
| cols |
|
定义框架集中列的数目和尺寸。有关 cols 属性的详细信息。 |
| rows |
|
定义框架集中行的数目和尺寸。有关 rows 属性的详细信息。 |
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>7.<frame> 定义 frameset 中的一个特定的窗口（框架）。
| 属性 | 值 | 描述 |
|---|---|---|
| frameborder |
|
规定是否显示框架周围的边框。 |
| longdesc | URL | 规定一个包含有关框架内容的长描述的页面。 |
| marginheight | pixels | 定义框架的上方和下方的边距。 |
| marginwidth | pixels | 定义框架的左侧和右侧的边距。 |
| name | name | 规定框架的名称。 |
| noresize | noresize | 规定无法调整框架的大小。 |
| scrolling |
|
规定是否在框架中显示滚动条。 |
| src | URL | 规定在框架中显示的文档的 URL。 |
8.<form>
用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。
| 属性 | 值 | 描述 |
|---|---|---|
| accept | MIME_type | HTML 5 中不支持。 |
| accept-charset | charset_list | 规定服务器可处理的表单数据字符集。 |
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| autocomplete |
|
规定是否启用表单的自动完成功能。 |
| enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
| method |
|
规定用于发送 form-data 的 HTTP 方法。 |
| name | form_name | 规定表单的名称。 |
| novalidate | novalidate | 如果使用该属性，则提交表单时不进行验证。 |
| target |
|
规定在何处打开 action URL。 |
9.<input> 用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
| 属性 | 值 | 描述 |
|---|---|---|
| accept | mime_type | 规定通过文件上传来提交的文件的类型。 |
| align |
|
不赞成使用。规定图像输入的对齐方式。 |
| alt | text | 定义图像输入的替代文本。 |
| autocomplete |
|
规定是否使用输入字段的自动完成功能。 |
| autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。 （不适用于 type="hidden"） |
| checked | checked | 规定此 input 元素首次加载时应当被选中。 |
| disabled | disabled | 当 input 元素加载时禁用此元素。 |
| form | formname | 规定输入字段所属的一个或多个表单。 |
| formaction | URL | 覆盖表单的 action 属性。 （适用于 type="submit" 和 type="image"） |
| formenctype | 见注释 | 覆盖表单的 enctype 属性。 （适用于 type="submit" 和 type="image"） |
| formmethod |
|
覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） |
| formnovalidate | formnovalidate | 覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 |
| formtarget |
|
覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） |
| height |
|
定义 input 字段的高度。（适用于 type="image"） |
| list | datalist-id | 引用包含输入字段的预定义选项的 datalist 。 |
| max |
|
规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 |
| maxlength | number | 规定输入字段中的字符的最大长度。 |
| min |
|
规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 |
| multiple | multiple | 如果使用该属性，则允许一个以上的值。 |
| name | field_name | 定义 input 元素的名称。 |
| pattern | regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
| placeholder | text | 规定帮助用户填写输入字段的提示。 |
| readonly | readonly | 规定输入字段为只读。 |
| required | required | 指示输入字段的值是必需的。 |
| size | number_of_char | 定义输入字段的宽度。 |
| src | URL | 定义以提交按钮形式显示的图像的 URL。 |
| step | number | 规定输入字的的合法数字间隔。 |
| type |
|
规定 input 元素的类型。 |
| value | value | 规定 input 元素的值。 |
| width |
|
定义 input 字段的宽度。（适用于 type="image"） |
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" />
Last name: <input type="text" name="lname" />
<input type="submit" value="Submit" />
</form>图片标签
<img> 向网页中嵌入一幅图像。请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 规定图像的替代文本。 |
| src | URL | 规定显示图像的 URL。 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不推荐使用。规定如何根据周围的文本来排列图像。 |
| border | pixels | 不推荐使用。定义图像周围的边框。 |
| height |
|
定义图像的高度。 |
| hspace | pixels | 不推荐使用。定义图像左侧和右侧的空白。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指向包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
| vspace | pixels | 不推荐使用。定义图像顶部和底部的空白。 |
| width |
|
设置图像的宽度。 |
媒体标签
1.<audio> 定义声音，比如音乐或其他音频流。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
2.<video> 定义视频，比如电影片段或其他视频流。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
更多标签请到这个网站去找：http://www.w3school.com.cn/tags/index.asp
二、CSS
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，通常存储在 CSS 文件中，多个样式定义可层叠为一。
语法规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {property: value}
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}选择器
1.派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
注意strong和li的上下文关系！！！2.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色3.类选择器
在 CSS 中，类选择器以一个点号显示 。
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>4.属性选择器
对带有指定属性的 HTML 元素设置样式。只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
可以在http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp查看各种演示效果。
常用样式
1.背景
background-color：为元素设置背景色。这个属性接受任何合法的颜色值。
p {background-color: gray;}background-image：默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。
body {background-image: url(/i/eg_bg_04.gif);}background-repeat：背景重复，对对象进行平铺。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}background-position：背景定位，更改背景的位置。为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}2.文本
text-indent：文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
p {text-indent: 5em;}3.字体
font-family：定义文本的字体系列。连续排列多个字体，系统将按照排列的顺序在没有找到相应字体时加载下一种字体。
h1 {font-family: Georgia;}font-style：字体风格。最常用于规定斜体文本。
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}font-weight：设置字体粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}font-size：字体大小。
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
padding：定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
margin：设置外边距。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
1.相对定位
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
2.绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
3.浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。
.news img {
float: left;
}更多详细的内容请查看这个网址：http://www.w3school.com.cn/css/index.asp
三、JS
四、JQuery
欢迎扫码关注：落饼枫林，与我们一起进步~示例网页代码可以在公众号后台发送：获得