1、什么是前端
前端就是将效果图生成网页，利用html+css+js等技术
2、什么是网页
2.1 网页是由文本、图片、输入框、视频、音频、超链接等组成
2.2 web标准
1 html #结构标准 相当于人的身体，基本组成 2 css #表现标准 相当于给人化妆，变的更加漂亮 3 js #行为标准 相当于人在唱歌，页面更加灵动
3、认识html
html（hyper text markup language）：超文本标记语言
3.1 html结构标准
<! doctype html> #声明标签 <html> #根标签 <head> #头部标签 <title>诗句</title> #标题标签 </head> <body> #主体标签
春风又绿江南岸，明月何时照我还。 </body> </html>
4、标签
4.1 单标签
1 #注释标签 ctrl + / 2 #换行标签 <br /> 不会生成空白行 3 #水平线标签 <hr />
4.2 双标签
1 #段落标签 <p></p> 自动生成上下空白行 2 #标题标签 <h1></h1> h1--h6，字体由大到小 3 #文本标签 <font></font> 4 #加粗标签 <strong></strong>和<b></b>，工作中尽量使用strong 5 #倾斜标签 <em></em>和<i>和</i>，工作中尽量使用em 6 #删除线标签 <del></del>和<s></s>，工作中尽量使用del 7 #下滑线标签 <ins></ins>和<u></u>，工作中尽量使用ins 8 #工作中尽量使用strong、em、del、ins，是因为更有语义化。
#<sup>上标</sup>，<sub>下标</sub>
4.3 图片标签
1 <img src="img/lzl.jpg" alt="林志玲" title="lzl" width="300" height="500" /> 2 #src 图片的来源 3 #alt 替换文本，当图片不显示时，显示文字 4 #title 提示文本，鼠标放在图片上时，显示的文字 5 #width 图片宽度 6 #height 图片高度 7 #图片不自定义宽高时，图片原图大小展示，如果只定义宽，或者高，图片将等比例缩放。
5、相对路径
1 文件或图片在同一个目录 2 文件或图片在下一级目录 3 文件或图片在上一级目录
6、超链接
1 <a href="img标签.html" title="我的超链接" target="_blank">超链接标签</a> 2 #href 去往的路径（跳转的页面） 必写属性 3 #title 提示文本，鼠标放在超链接时，提示的文字 4 #target=_self 默认值，在自身打开页 5 #target=_blank 打开新页面，自身页面不关闭 6 7 #超链接的优化写法 8 #在head里面，定义base target="_blank"，默认打开新的页面 9 <head> 10 <title>超链接优化写法</title> 11 <base target="_blank"> 12 </head> 13 <body> 14 <a href="img标签.html" title="我的超链接">超链接标签</a> 15 </body>
7、锚点
1 id="maodian" 2 #先定义锚点 3 <a href="#maodian">回到顶部</a> 4 #超链接跳转到锚点
8、空链
1 <a href="#">空链</a> 2 #当不知道链接到哪个页面时，用空链
9、特殊字符
10、列表
10.1 无序列表
1 <body> 2 <ul type="square"> 3 <li>春风又绿江南岸</li> 4 <li>明月何时照我还</li> 5 </ul> 6 </body> 7 #type="square" 小方块 8 #type="disc" 实心小圆点（默认） 9 #type="circle" 空心小圆点
10.2 有序列表
1 <body> 2 <ol type="1" start="5"> 3 <li>长风破浪会有时</li> 4 <li>直挂云帆济沧海</li> 5 </ol> 6 </body> 7 #type默认为数字，start定义开始数字 8 #type值可以为："1、a、A、i、I"
10.3 自定义列表
1 <body> 2 <dl> 3 <dt>帮助中心</dt> 4 <dd>账户管理</dd> 5 <dd>购物指南</dd> 6 <dd>订单操作</dd> 7 </dl> 8 </body> 9 #<dt></dt>为小标题 10 #<dd></dd>解释标题
11、音乐标签
1 <body> 2 <embed src="1.wav" type="" hidden="true" /> 3 </body> 4 #hidden="true"隐藏播放器
12、滚动
1 <body> 2 <embed src="1.wav" type="" hidden="true" /> 3 <marquee behavior="scroll" direction="right">春风又绿江南岸</marquee> 4 <marquee behavior="scroll" direction="right" width="600"><img src="1.jpg" alt="" width="300" /></marquee> 5 </body> 6 #marquee滚动标签 7 8 #behavior设定滚动方式 9 #behavior="scroll"，从一端到另一端，会重复 10 #behavior="slide"，从一端滚到另一端后停止，不重复 11 #behavior="alternate"，表示在两端之间来回滚动 12 13 #direction设定滚动方向 14 #direction="right"，从左向右滚动 15 #direction="left"，从右向左滚动 16 #direction="down"，向下滚动 17 #direction="up"，向上滚动 18 #loop设置滚动次数
13、html5的标签结构
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content="seo引擎收录，关键字，html5标签结构，meta标签"> 6 <meta name="description" content="网页描述，这是一个html5标签结构页面"> 7 <meta http-equiv="refresh" content="5; http://www.baidu.com"> 8 <link rel="stylesheet" href="1.css"> 9 <link rel="icon" href="favicon.ico"> 10 <title>html5的标签结构</title> 11 </head> 12 <body> 13 #meta charset="UTF-8" html默认字符编码为utf-8 <br> 14 #meta name="keywords" content="关键字" 写关键字，seo便于搜索引擎收录 <br> 15 #meta name="description" content="网页描述" 搜索引擎搜索出来后，显示对网站的描述 <br> 16 #meta http-equiv="refresh" content="5; http://www.baidu.com" 网页5秒后重定向至百度 <br> 17 #link rel="stylesheet" href="1.css" 链接外部样式表 <br> 18 #link rel="icon" href="favicon.ico" 设置icon图标 19 </body> 20 </html>
14、表格
14.1 表格的属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <table border="1" width="500" height="100" cellspacing="0" cellpadding="30" align="center" bgcolor="yellow"> 8 <tr align="center"> 9 <td width="166">姓名</td> 10 <td width="166">年龄</td> 11 <td width="166">职业</td> 12 </tr> 13 <tr align="center"> 14 <td>catinsky</td> 15 <td>500</td> 16 <td>高级ceo</td> 17 </tr> 18 </table> 19 #border="1"，表格边框大小 <br> 20 #width,height，表格宽高，如在td标签里，则为单元格的宽高<br> 21 #cellspacing="0"，设置单元格与单元格间距为0 <br> 22 #cellpadding="30"，设置内容与单元格边框的距离，默认左对齐<br> 23 #align="center"，在table标签里则为整个表格剧中，tr标签里则为单元格内文字居中，可以为left,right,center值<br> 24 #bgcolor="yellow"，设置表格背景颜色 25 </body> 26 </html>
14.2 表格的标准结构
1 <body> 2 <table> 3 <thead> 4 <tr> 5 <td></td> 6 <td></td> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td></td> 12 <td></td> 13 </tr> 14 </tbody> 15 <tfoot> 16 <tr> 17 <td></td> 18 <td></td> 19 </tr> 20 </tfoot> 21 </table> 22 </body> 23 #表格标准结构为，thead、tbody、tfoot三部分组成，thead和tfoot便于seo搜索引擎收录，一般不用tfoot，只用thead。
14.3 设置表头与合并单元格
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <table border="1" width="500" height="100" cellspacing="0" cellpadding="30" align="center" bgcolor="yellow"> 8 <caption>统计表</caption> 9 <tr align="center" height="33"> 10 <td width="106" rowspan="2">姓名</td> 11 <td width="56">年龄</td> 12 <td width="166">职业</td> 13 </tr> 14 <tr align="center" height="33"> 15 <!-- <td>catinsky</td> --> 16 <td>500</td> 17 <td>高级ceo</td> 18 </tr> 19 <tr align="center" height="33"> 20 <td>eleven</td> 21 <td>600</td> 22 <td>linux高级工程师</td> 23 </tr> 24 </table> 25 #caption，设置表头 26 #rowspan="2"，合并同一列上的单元格，并要把同一列被合并的单元格注释掉 27 #colspan="2"，合并同一行上的单元格，并要把同一列被合并的单元格注释掉 28 </body> 29 </html>
14.4 设置表格标题、边框颜色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <body> 7 <table border="1" width="500" height="100" cellspacing="0" cellpadding="30" align="center" bgcolor="yellow" bordercolor="red"> 8 <caption><strong>统计表</strong></caption> 9 <tr align="center" height="33"> 10 <th width="106">姓名</th> 11 <th width="56">年龄</th> 12 <th width="166">职业</th> 13 </tr> 14 <tr align="center" height="33"> 15 <td>catinsky</td> 16 <td>500</td> 17 <td>高级ceo</td> 18 </tr> 19 <tr align="center" height="33"> 20 <td>eleven</td> 21 <td>600</td> 22 <td>linux高级工程师</td> 23 </tr> 24 </table> 25 #caption，设置表头 26 #rowspan="2"，合并同一列上的单元格，并要把同一列被合并的单元格注释掉<br> 27 #colspan="2"，合并同一行上的单元格，并要把同一列被合并的单元格注释掉<br> 28 #bordercolor="red"，表格边框颜色 29 </body> 30 </html>
15、表单
15.1 表单域
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <form action="1.php" method="post"> 9 用户名：<input type="text" name="username"> 10 密 码：<input type="password" name="password"> 11 <input type="submit"> 12 </form> 13 </body> 14 </html>
#form为表单标签
#action="1.php"，处理信息。将信息交给1.php处理
#method="post"，信息处理方式。post表示通过1.php来处理信息，安全性高。get为通过地址栏传输信息，安全性差，可以看见明文密码。
15.2 文本输入框、密码输入框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <form action="1.php" method="post"> 9 用户名：<input type="text" name="username" maxlength="8" readonly="readonly" disabled="disabled" value="用户姓名"> 10 密 码：<input type="password" name="password"> 11 <input type="submit"> 12 </form> 13 </body> 14 </html>
#type="text"，文本框。type="password"，为密码输入框，输入时不可见。
#name="username" ，输入框的名称
maxlength="8"，限制输入字符长度
readonly="readonly" ，输入设置为只读状态，不能编辑输入
disabled="disabled" ，输入框未激活状态，显示灰色底纹
value="用户姓名"，将输入框的内容传给处理文件，在输入框中显示
15.3 单选框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <form action="1.php" method="post"> 9 用户名：<input type="text" name="username" value="请输入用户名"> 10 密 码：<input type="password" name="password"> 11 性 别：<input type="radio" name="gender" checked="checked">男 12 <input type="radio" name="gender">女 13 <input type="submit"> 14 </form> 15 </body> 16 </html>
#type="radio"，单选框标签
#name="gender"，只有将name的值设置相同的时候，才能实现单选效果
#checked="checked"，默认选中项
15.4 多选框、下拉列表、提交
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表</title> 6 </head> 7 <body> 8 <form action="1.php" method="post"> 9 昵称<input type="text"><br> 10 密码<input type="password"><br> 11 确认密码<input type="password"><br> 12 性别<input type="radio" name="gender" checked="checked">男 13 <input type="radio" name="gender">女<br> 14 生日 15 <select> 16 <option>农历</option> 17 <option selected="selected">公历</option> 18 </select> 19 <select> 20 <option>2012年</option> 21 <option>2013年</option> 22 <option>2014年</option> 23 <option>2015年</option> 24 <option selected="selected">2016年</option> 25 </select> 26 <select> 27 <option>1月</option> 28 <option selected="selected">2月</option> 29 <option>3月</option> 30 <option>4月</option> 31 <option>5月</option> 32 </select> 33 <select> 34 <option>1日</option> 35 <option>2日</option> 36 <option>3日</option> 37 <option>4日</option> 38 <option selected="selected">5日</option> 39 </select><br> 40 所在地 41 <select> 42 <option>韩国</option> 43 <option>日本</option> 44 <option selected="selected">中国</option> 45 </select> 46 省（市） 47 <select> 48 <option>湖北省</option> 49 <option>广东省</option> 50 </select> 51 区域 52 <select> 53 <optgroup label="武汉市"> 54 <option>江汉区</option> 55 <option>武昌区</option> 56 <option>硚口区</option> 57 </optgroup> 58 <optgroup label="广州市"> 59 <option>天河区</option> 60 <option>花都区</option> 61 <option>硚口区</option> 62 </optgroup> 63 </select><br> 64 手机号码 65 <input type="number"><br> 66 <input type="checkbox" checked="checked">我已阅读 67 <input type="checkbox">我已成年 68 <input type="checkbox">我已同意<br> 69 <input type="submit"> 70 </form> 71 </body> 72 </html>
#select，下拉列表标签，option，下拉列表项
#multiple="multiple"， 将下拉列表设置为多选项
#selected="selected"，设置默认选中项，select标签
#checked="checked"，设置默认选中项，多选框，input标签
#optgroup，对下拉列表进行分组，label="武汉市"，命名分组名称
#tpye="submit"，提交按钮，input标签
15.5 多行文本框
1 <form> 2 自我描述<br> 3 <textarea cols="30" rows="10">自我介绍</textarea> 4 </form> 5 #cols 控制输入字符的长度 6 #rows 控制输入的行数
15.6 文件上传控件、提交按钮
1 <form> 2 文件上传控件<br> 3 <input type="file"> 4 <input type="submit"> 5 </form> 6 7 #type="file"，上传文件 8 #type="submit"，提交按钮
15.7 普通按钮、图片按钮、重置按钮
1 <form> 2 <input type="button" value="普通按钮"><br> 3 <input type="image" src="../按钮.jpg"><br> 4 <input type="reset"> 5 </form> 6 #普通按钮，不能提交，配合js使用 7 #图片按钮，可实现提交信息功能 8 #重置按钮，将信息重置到默认状态
15.8 表单分组
1 <form action="1.php" method="post"> 2 <fieldset> 3 <legend>表单分组</legend> 4 </fieldset> 5 </form> 6 #<fieldset></fieldset> 对表单信息分组 7 #<legend></legend> 表单信息分组名称
15.9 html5补充表单控件
1 <form action="1.php" method="post"> 2 <fieldset> 3 <legend>html5表单控键</legend> 4 <input type="url">网址控件<br> 5 <input type="date">日期控件<br> 6 <input type="time">时间控件<br> 7 <input type="email">邮件控件<br> 8 <input type="number" step="5">数字控件<br> 9 <input type="range" step="6">滑块控件 10 </fieldset> 11 </form> 12 #step设置步长
所有表单信息
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表</title> 6 </head> 7 <body> 8 <form action="1.php" method="post"> 9 昵称<input type="text"><br> 10 密码<input type="password"><br> 11 确认密码<input type="password"><br> 12 性别<input type="radio" name="gender" checked="checked">男 13 <input type="radio" name="gender">女<br> 14 生日 15 <select> 16 <option>农历</option> 17 <option selected="selected">公历</option> 18 </select> 19 <select> 20 <option>2012年</option> 21 <option>2013年</option> 22 <option>2014年</option> 23 <option>2015年</option> 24 <option selected="selected">2016年</option> 25 </select> 26 <select> 27 <option>1月</option> 28 <option selected="selected">2月</option> 29 <option>3月</option> 30 <option>4月</option> 31 <option>5月</option> 32 </select> 33 <select> 34 <option>1日</option> 35 <option>2日</option> 36 <option>3日</option> 37 <option>4日</option> 38 <option selected="selected">5日</option> 39 </select><br> 40 所在地 41 <select> 42 <option>韩国</option> 43 <option>日本</option> 44 <option selected="selected">中国</option> 45 </select> 46 省（市） 47 <select> 48 <option>湖北省</option> 49 <option>广东省</option> 50 </select> 51 区域 52 <select> 53 <optgroup label="武汉市"> 54 <option>江汉区</option> 55 <option>武昌区</option> 56 <option>硚口区</option> 57 </optgroup> 58 <optgroup label="广州市"> 59 <option>天河区</option> 60 <option>花都区</option> 61 <option>硚口区</option> 62 </optgroup> 63 </select><br> 64 手机号码 65 <input type="number"><br> 66 <input type="checkbox" checked="checked">我已阅读 67 <input type="checkbox">我已成年 68 <input type="checkbox">我已同意<br> 69 <input type="submit"><br> 70 自我描述<br> 71 <textarea cols="30" rows="10">自我介绍</textarea><br> 72 文件上传控件<br> 73 <input type="file"> 74 <input type="submit"><br> 75 <input type="button" value="普通按钮"><br> 76 <input type="image" src="../按钮.jpg"><br> 77 <input type="reset"> 78 </form> 79 <form action="1.php" method="post"> 80 <fieldset> 81 <legend>html5表单控键</legend> 82 <input type="url">网址控件<br> 83 <input type="date">日期控件<br> 84 <input type="time">时间控件<br> 85 <input type="email">邮件控件<br> 86 <input type="number" step="5">数字控件<br> 87 <input type="range" step="6">滑块控件 88 </fieldset> 89 </form> 90 </body> 91 </html>
16 标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
-标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；