前端就是网站的前台部分，运行在浏览器上展现给用户浏览的网页。
HTML
超文本标记语言Hyper Text Markup Language，负责完成页面的结构，文件的后缀为：.html .htm
CSS
级联样式表Cascading Style Sheet，负责页面风格的设计，样式，美观，文件后缀为：.css
JavaScript
浏览器脚本语言，可以编写运行在浏览器上的程序，负责编写页面特效，调用浏览器的API(BOM)、操作改变页面(DOM)，从后端获取数据(Ajax)，渲染页面等。文件后缀为：.js
HTML 是用来描述网页的一种语言。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
标签的语法：
几个很重要的属性：
<!DOCTYPE html> <html> <head> head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的 <meta charset="UTF-8"> <title>我是页面标题</title> </head> <body> 用户能够看见的内容都在body里面 <h1>我是第一个标题</h1> <p>我是第一个段落。</p> <!--这是单行注释--> <!-- 这是多行注释 --> </body> </html> 说明：
Meta标签介绍：
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒后跳转到对应的网址，注意引号(了解)--> <meta http-equiv="refresh" content="2;URL=https://www.linwow.com"> <!--告诉IE以最高级模式渲染文档(了解)--> <meta http-equiv="x-ua-compatible" content="IE=edge"> 2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="简介信息"> HTML 标题（Heading）是通过h1~h6：标签来定义的。
HTML 段落是通过标签 <p> 来定义的，P 是英文paragraph段落的缩写，经常被用来创建一个段落。
HTML 链接是通过标签 <a> 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。target 属性用来控制是否在当前页面跳转，默认是_self当前页，也可以指定成_blank新建页面跳转
<a href="要跳转的网址">这是一个链接</a> HTML 图像是通过标签 <img> 来定义的。使用img元素来为你的网站添加图片，使用 src 属性指向一个图片的具体地址，即可以是网络上的图片地址也可以是本地的图片地址。<img> 标签是自关闭元素，不需要结束标签。img元素具有 alt 属性。 alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示。 title 属性是鼠标悬停在图片上时显示的文本。图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放
<img src="图片的路径" width="104" height="142" alt="对图片的描述"> 在 HTML 语言中， <br >标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段。
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
表格由<table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
属性:
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tboday> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
<table border="1"> <!--border不设置或设置为0，则没有边框--> <thead> <tr> <th>name</th> <th>age</th> <th>hobby</th> </tr> </thead> <tbody> <tr> <td>lonwow</td> <td>19</td> <td rowspan="2">学习</td> </tr> <tr> <td>lin</td> <td>20</td> <!--<td>吃饭</td>--> </tr> <tr> <td>wow</td> <!--<td>22</td>--> <td colspan="2">睡觉</td> </tr> </tbody> <!-- 通过rowspan和colspan进行跨行的操作 --> 1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> type属性：
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> type属性：
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> | 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定义列表的描述 |
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。<div> 标签可以把文档分割为独立的、不同的部分。HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。HTML <span> 元素是内联元素，可用作文本的容器。
实例: <b>, <td>, <a>, <img>
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:
多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
密码字段
密码字段通过标签<input type=“password”> 来定义。密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）
<input type=“radio”> 标签定义了表单单选框选项。
复选框（Checkboxes）
<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
获取文件
<input type=“file” >选择本机文件进行上传。
日历
<input type=“date”>提供日历进行选择’
下拉选择框(select)
默认是单选的，可以通过multiple参数将单选变为多选，一个option就是一个选项。select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
文本域(Textarea)
<textarea name=“info” id="" cols=“30” rows=“10”></textarea>用户可在文本域中写入文本。可写入字符的字数不受限制。
提交按钮(Submit Button)
<input type=“submit”> 定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务端。如果不想通过input标签来触发提交动作 那么可以直接写一个 <button>button按钮</button>
重置按钮(reset)
<input type=“reset”>重置form表单内容。
普通按钮(button)
<input type=“button” >定义一个普通的按钮，可以自己绑定对应的事件。
input属性说明:
select属性说明：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<meta http-equiv="refresh" content="10;url=https://blog.csdn.net/linwow">--> <title>我的第一个网页</title> <a href="" id="a1"></a> </head> <body> <div style="height: 100px; background: #caffd0"></div> <h3>用户注册</h3> <form action=""> <p>username: <input type="text" name="username"></p> <p>password: <input type="password" name="password"></p> <p>birthday: <input type="date" name="birthday"></p> <p>gender: <input type="radio" name="gender" value="0">男 <input type="radio" name="gender" value="1">女 <input type="radio" name="gender" checked="checked" value="2">保密 </p> <p>habby <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">双色球 </p> <p>province默认单选: <select name="province" id=""> <option value="beijin">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> </p> <p>province多选: <select name="" id="" multiple> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> </select> </p> <p>province归属选项: <select name="" id=""> <optgroup label="北京"> <option value="">朝阳区</option> <option value="">海淀区</option> <option value="">昌平区</option> </optgroup> <optgroup label="上海"> <option value="">浦东新区</option> <option value="">静安区</option> <option value="">徐汇区</option> </optgroup> <optgroup label="深圳"> <option value="">南山区</option> <option value="">宝安区</option> <option value="">福田区</option> </optgroup> </select> </p> <p>文本框 <textarea name="info" id="t1" cols="30" rows="10"></textarea> </p> <p>文件 <input type="file" name="file"> </p> <input type="submit" value="提交"> <input type="button" value="没用"> <input type="reset" value="重置"> <button>button</button> </form> <h1>这是一级标题</h1> <h6>这是六级标题</h6> <p>这是一个段落</p><br> <a href="https://blog.csdn.net/linwow">点我一下试试</a><br> <img src="https://www.bing.com/th?id=OGC.59a001c80cb085d03ff52eaf34bd132c&pid=1.7&rurl=http%3a%2f%2fatt.bbs.duowan.com%2fforum%2f201405%2f19%2f2015461v0s48j05j8je2i0.gif&ehk=6ZVeno%2bXyeqNMnv7dcz%2fAQ" width="500" height="250" title="夸你呢" alt="没事，夸你呢"><br> <div> <span> <b>我是粗体</b> </span> <span> <em>我是着重体</em> </span> <span> <small>我是小字体</small> </span> <span> <strong>我是加重语气的</strong> </span> <span> <ins>这是插入字</ins> </span> <span> <i>我是斜体</i> </span> <span> <sub>我在下边</sub>我是正常的<sup>我在上边</sup><br> </span> <span> <del>这是删除字</del> </span> <span> <s>这也是删除字</s> </span> </div> <table border="1"> <caption>这是标题</caption> <thead> <tr> <th>name</th> <th>age</th> <th>pwd</th> </tr> </thead> <tbody> <tr> <td>lin</td> <td>23</td> <td>132</td> </tr> <tr> <td>wow</td> <td>22</td> <td>321</td> </tr> <tr> <td>linwow</td> <td>21</td> <td>888</td> </tr> </tbody> <tfoot> <tr> <td>666</td> <!--<td>666</td>--> <!--<td>666</td>--> </tr> </tfoot> </table> <ul type="disc"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <ol type="1" start="2"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> <dl> <dt>标题一</dt> <dd>内容一</dd> <dt>标题二</dt> <dd>内容二</dd> <dt>标题三</dt> <dd>内容三</dd> </dl> <a href="#a1">bottom</a> </body> </html> Web浏览器通过URL从Web服务器请求页面。当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。一个统一资源定位器(URL) 用于定位万维网上的文档。
scheme://host.domain:port/path/filename
说明:
以下是一些URL scheme：
| Scheme | 访问 | 作用 |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 自己计算机上的文件。 |
前端HTML 超文本标记语言 注释 <!--单行注释--> <!-- 多行注释 --> ps:写HTML的时候，注释一般都是成双成对的 即 <!--xx功能开始--> <!--xx功能结束--> 文件的后缀名(给用户看的) head内常用标签(不是给用户看的) title：定义网页标题 style：内部写css样式代码 link：引入外部css样式文件 script：可以在内部直接写js代码也支持src属性 导入外部js文件 meta：定义网页原信息 name='keywords' content="......" name='description' content="......" body内常用标签(body内标签才是给用户看的) 基本标签 h1~h6 p u i s b br hr 特殊符号 < > © ® & ¥ 常用标签 div span a href='url'：跳转到指定网址。 锚点功能：一个a调到另一个a标签。具体案例:回到顶部 target：默认是在当前页面跳转 _self，指定成_blank新建页面跳转。 img src：放图片地址(可以是本地的也可以是网络上的) alt：当图片加载失败时可以指定显示的提示信息 title：鼠标悬停上之后显示的提示信息 width：长宽在设置的时候只需要设置一个另一个自动等比例缩放 heigth 列表标签 无序列表 ul>li：可以通过ul内type属性来控制无序的标识 有序列表 ol>li：可以通过ul内type属性来控制有序的标识(1,a,A,I,i) 标题列表 dl： dt：标题 dd：内容 表格标签 table标签内可以设置的属性 type：可以通过type参数设置边框 cellspacing：设置单元格与边框之间的距离 cellpadding：设置文本值域单元格之间的距离 单元格标签可以设置的属性 rowspan：垂直方向 colspan：水平方向 form表单 以用户注册为例 input：type属性可以变化的值 text password date radio：checked 如果属性名和属性值相等那么可以简写 checkbox：checked file：form表单上传文件需要修改两个参数的值 1.将method由默认的get改为post 2.将enctype编码格式由默认的urlencoded改为formdata submit：提交按钮 触发form表单提交数据的动作 button：上面功能都没有。就是一个普通按钮 reset：重置用户填写的信息 select :选择标签，默认是单选的，可以通过设置multiple参数改为多选 一个个的option就是一个个的选项 textarea:大段文本框 button标签:也可以出发form表单的提交动作 总结: 1 获取用户输入的标签都必须有一个name属性 用户输入的值会被存放到标签的value属性中 你可以理解为name属性对应是字典的key 用户输入的被value属性获取的到值是字典的value 2 label标签 通常是和input标签组合使用 <form action=""> <label for="i1">username:<input type="text" id="i1" name="username"></label> <label for="i2">password: <input type="password" name="pwd" id="i2"></label> <input type="submit"> </form> 请求方法: get请求:朝服务端获取资源(可以携带参数供服务端校验) get请求携带的参数是有大小限制的，大概4KB。可以携带一些不重要的参数，不推荐携带敏感型的参数。 post请求:朝服务端提交数据，敏感性的信息都应该采用post提交方式 标签分类1: 双标签:h1~h6 a p div span table ul ol dl 自闭和标签: img br hr input 标签分类2: 块级标签 独占一行 块级标签可以嵌套块级标签和行内标签 p标签虽然是块级标签但是不能嵌套任何的块级标签只能嵌套行内标签 可以设置长宽 行内标签 大小取决于内容大小 不能设置长宽