前端

编程主要就是三部分：使用数据，存储数据和处理数据。

什么是前端：

　　　　前端就是使用数据的过程，通过规定的格式将服务端的数据在浏览器上更好的展示给用户。

　　前端的工具：

HTML CSS 和 JavaScript
　　　　jQuery 和 bootstrap

　　web服务的本质：

　　　　浏览器发送请求 --> 服务端接收请求 --> 服务端返回数据 --> 浏览器展示数据，但是不是任何类型的数据浏览器都能识别，浏览器和服务器之间有规定好的数据格式：HTTP协议

　　HTML是什么？

　　　　HTML：超文本标记语言

　　　　　　1，一种用于创建网页的标记语言

　　　　　　2，通过各种标签来进行数据不同形式的表现

　　　　　　3，扩展名：.html或.htm

　　　　HTML文件的结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>(浏览器显示给用户的部分)

</body>
</html>

1，<!DOCTYPE html>声明为HTML5文档。
　　　　2，<html lang="zh-CN">、</html>是文档的开始和结束标记，他们之间的是文档的head和body。
　　　　3，<head>、</head>为文档的头部，它之间的内容不会在浏览器窗口里显示。主要声明一些和文档的相关的一些属性。
　　　　4，<body>、</body>为文档的主体，里面就是在浏览器网页上要展示的内容。

　　HTML的标签格式：

1，使用<>包裹，里面放规定的关键字
　　　　2，标签里面还可以有属性，可以根据需求来使用
　　　　3，标签通常是成对存在的，如<div></div>，前面是开始后面是结束
　　　　4，也存在单独的标签，<br>,<hr>等等

　　标签中三个比较重要的属性：

1，id：定义标签的唯一ID
　　　　2，class：为HTML元素定义一个或多个类名（配合css文件使用）
　　　　3，style：规定元素的行内样式（配合css文件使用）

　　标签的分类：

标签按标签使用格式分为：双标签和单标签
    双标签：<h1></h1> <a></a>等等
    单标签：<img>等等
    标签按标签占用的长度分为：块级标签和内联标签
    块级标签：一个标签就占用浏览器的一行长度 例如：div p h1
    内联标签：一个标签只占用其自身的长度，多个一行显示 例如：span a img

　　HTML注释

<!-- 注释内容 -->

　　HTML常用标签

　　head内常用标签：

标签

意义

<title></title>

 定义网页标题

<style></style>

定义内部样式表

<script></script>

定义JS代码或引入外部JS文件

<link/>

引入外部样式表文件

<meta/>

定义网页原信息

　　body内常用标签

　　基本标签

<!--内容黑体和加粗显示，h1~h6型号逐渐减小-->
<h1>hello html</h1>
<h2>hello html</h2>
<h3>hello html</h3>
<h4>hello html</h4>
<h5>hello html</h5>
<h6>hello html</h6>

<!--加粗-->
<b>加粗</b>

<!--斜体-->
<i>斜体</i>

<!--下划线-->
<u>下划线</u>

<!--删除线-->
<s>删除线</s>

<!--换行-->
<br>

<!--水平线-->
<hr>

　　特殊字符

内容

对应代码

空格

&nbsp;

>

&gt;

<

&lt;

&

&amp;

¥

&yen;

版权

&copy;

注册

&reg;

　　div和span标签

1，div标签：没有特殊意义，块级标签，主要和其他标签组合使用，css文件来为其指定样式。
　　　　2，div标签：没有特殊意义，内联标签，主要和其他标签组合使用，css文件来为其指定样式。

　　ps：块级标签可以嵌套内联标签或块级标签，内联标签不能嵌套块级标签

　　　　但是p标签不能嵌套块级标签

　　img标签：图片展示

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高">

　　a标签：超链接标签

<a href="http://www.baidu.com" target="_blank" >百度</a>

　　href：指定跳转的网页地址。

1，可以指定绝对地址：www.baidu.com
　　　　2，可以指定相对地址：index.html
　　　　3，可以通过id指定页面中的标签：#top

　　target：指定网页打开方式。

1，_blank表示在新标签页中打开目标网页
　　　　2，_self表示在当前标签页中打开目标网页

　　列表

　　　　1.有序列表

<!--有序号列表-->
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

　　　　2.无序列表

<!--无序号列表-->
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

　　　　3.标题列表

<!--标题列表-->
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

　　表格

<!--表格-->
<table border="" cellspacing="0">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>zxc</td>
        <td>18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>zzy</td>
        <td>16</td>
    </tr>
    </tbody>
</table>

　　form表单

　　功能：用于向服务器发送数据，从而实现用户和服务器程序进行交互 。
　　表单属性：

属性

描述

accept-charset

规定在被提交表单中使用的字符集（默认：页面字符集）。

action

规定向何处提交表单的地址（URL）（提交页面）。

autocomplete

规定浏览器应该自动完成表单（默认：开启）。

enctype

规定被提交数据的编码（默认：url-encoded）。

method

规定在提交表单时所用的 HTTP 方法（默认：GET）。

name

规定识别表单的名称（对于 DOM 使用：）。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标（默认：_self）。

　　input标签：

type属性值

表现形式

对应代码

text

单行输入文本

<input type=text" />

password

密码输入框

<input type="password"  />

date

日期输入框

<input type="date" />

checkbox

复选框

<input type="checkbox" checked="checked"  />

radio

单选框

<input type="radio"  />

submit

提交按钮

<input type="submit" value="提交" />

reset

重置按钮

<input type="reset" value="重置"  />

button

普通按钮

<input type="button" value="普通按钮"  />

hidden

隐藏输入框

<input type="hidden"  />

file

文本选择框

<input type="file"  />

　　select标签：下拉菜单，一般用于多级菜单。

　　label标签：和input配套使用，用于标记input标签。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

　　textarea：多行文本框