1、首先我们先了解一下什么是前端，简单说，就是我们平常所浏览的网页啊，以及app首页和小程序。

2、我们经常访问浏览器的时候，经常会输入网址，又可称为域名http://www...com. 有时候是http有时候又是https，二者的区别在于后者更加安全些，有秘钥。www就是万维网，后缀com、org、edu、cn以及DNS称为域名。

3、web开发设计的基础之一是html。html基本框架有以下几部分组成： 结构 <html> <!DOCTYPE html> .//声明网页类型
lang="en" // 语言 en ch <meta charset="UTF-8"> //信息标签 charset="UTF-8" 网页的编码类型 utf-8 <head> <title>标题</title> </head> <body> 内容 </body> </html> 以上标签都是带结尾的闭合，当然也有自闭和。

3、了解过html的结构，下面我们配置开发环境，我所用的软件是JetBrains WebStorm10.这个软件是要钱的，然后登录后首先进入File-setting-font-color 或者alt+ctrl+s设置字体大小和颜色。然后在file-new-dicrectory新建一个目录，然后在这目录下建html5文件 即file-new-html5 file.

4、创建完一个文件后，了解基本用法和相关标签 alt+F2 浏览或右上角也可快速浏览 按alt键+鼠标单击，可以在不同地方输入相同文字 在每一行的末尾ctrl+D 进行行复制 输入lorem按tab键，可以添加测试文本 p*数字 按tab键，可以输入多行标签P

5、建立一个网页 在body下编辑内容，设计网页常用标签

a）超链接 <a rel="nofollow" href="链接的目标地址" target="打开目标窗口"></a> target: _blank 在新窗口打开 _parent 在源窗口打开锚记：

1、跳转到同一个页面的不同位置 在跳转位置处添加一个锚记，<a name="名称"></a> 创建链接 <a rel="nofollow" href=“#锚记名称”>点击内容</a>

2、跳转到不同页面的不同位置 在跳转位置处添加一个锚记，<a name="名称"></a> 创建链接 <a rel="nofollow" href=“文件名#锚记名称”>点击内容</a>

b）发送邮件：mailto:邮箱地址 c）路径： 绝对路径 ：从根目录开始 相对路径 ：从当前目录开始 d）常用标签 水平线 <hr width="宽度" color="颜色" size="线粗细"/> html注释 <!--注释文本--> ctrl+shift+/
换行 <br/> 空格：   全角状态下空格 标题 h1~h6 <pre></pre> 预格式化 <em></em>斜体 <i></i> <b></b>加粗 <strong></strong> <big></big>字体放大 <small></small> <code></code>放置代码 <del></del>删除线 <sub></sub>下标 <sup></sup>上标 单位： 像素( px) 百分比(%) em rem

图片插入所用标签： <img src="图片路径" alt="信息提示" title=“图片描述” width=“图片宽度”height=“图片高度”/>

e）表格 <table border="边框线" cellspacing="边框单元格间距" cellpadding="单元格填充" width="表格宽度"> <caption>表头</caption> <tr> <th>标题行</th> </tr> <tr align="对方方式"> <td>单元格</td> </tr> </table> 跨行跨列 rowspan colspan

f）列表 无序列表 <ul type=""> <li></li> </ul> type:disc(默认实心圆) square 方块 circle 空心圆 有序列表 <ol type="" start=""> <li></li> </ol> type:1 a A i I start:起始位置 自定义列表 <dl> <dt></dt> <dd></dd> </dl> g）表单 文本框 <input type="text"/> 密码框 <input type="password"/> 单选按钮 <input type="radio"/> 复选框 <input type="checkbox"/> 文件域 <input type="file"/> 按钮 <input type="submit"/> 提交 <input type="reset"/> 重置 <input type="button" value="值"/> <button></button> 下拉列表 <select> <option></option> <option selected></option> </select> 文本域 <textarea rows="行数" cols="列数"></textarea>

h）表单分组 <fieldset> <legend></legend> name:~~ </fieldset> label 标签