前端开发之HTML
前端
编程主要就是三部分：使用数据，存储数据和处理数据。
什么是前端：
前端就是使用数据的过程，通过规定的格式将服务端的数据在浏览器上更好的展示给用户。
前端的工具：
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>
特殊字符
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
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 使用：document.forms.name）。 |
| 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：多行文本框
