可以通过简单的HTML和CSS就可以做出自己想要网页，可以在敲出代码以后立马就可以去试效果，这种感觉很棒，也很有成就感。在之前学习的ps中也深深的体会到了这一点，所以要更系统的学习前端，作为以后求职的方向。希望自己能够学有所成，加油鸭！
前端
前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，将美工或UI提供的效果图通过HTML+CSS+JS技术来生成网页，现在最新的高级版本HTML5、CSS3，以及SVG等。由于现在前后端分离的模式，还需要学习一些框架，目前比较流行的三大框架：Angular、Vue、React。
学习大纲
HTML+CSS 基础
HTML5+CSS3 存储+canvas+api
JavaScript 面向对象继承 原生ajax
jQuery 封装的ajax
MySQL +PHP+前端
bootstrap pc+移动 App
Vue js 集成框架开发
angular 7.0 集成开发 谷歌 混合开发
GitHub 操作
PHP 后台开发网页
网页是构成网站的基本元素，是承载各种网站应用的平台。网页由文字，图片，音频，视频，超链接等组成。
W3c指定网页标准：网页由三部分组成：三者相分离
结构（HTML，网页的整体框架）
样式（CSS ，网页的美化）
行为 （JS，网页的交互）
浏览器
网页浏览器是个显示网站服务器或文件系统内的文件，并让用户与这些文件交互的一种应用软件。
我们通常通过浏览器去浏览网页，不同的浏览器或者不同的模式（极速模式/兼容模式）访问同一个网页显示的效果不同，这是因为浏览器内核（渲染引擎）有差异。渲染引擎也是引起兼容性问题的根本原因。
目前市面上的浏览器内核主要有四种
Trident 内核代表： Internet Explore
Gecko 内核代表： Mozilla、Firefox
WebKit 内核代表： Safari、Chrome
Presto 内核代表： OperaHTML
Hypertext Markup Language 超文本标记语言
HTML的结构标准：
<!DOCTYPE html> 声明文档类型
<html> 根标签
<head lang="en"> 头部标签 （告诉搜素引擎爬虫，我们的网站关于什么内容）
<meta charset="UTF-8"> 编码方式：通用字符集
<title></title> 标题
</head>
<body>
主体标签
</body>
</html>HTML标签
head标签
链接外部样式表
<link rel="stylesheet " href="index.css ">（后续再补充）
文本标签
<h1></h1>
<h1></h2>
<h1></h3>
<h1></h4>
<h1></h5>
<h1></h6> 标题标签
<b></b> 加粗
<strong></strong> 加粗
<i></i> 倾斜
<u></u> 下划线
<sub></sub> 上级标签
<sup></sup> 下级标签
<p></p> 文本段落标签 （有左对齐，居中，右对齐的属性）
<del></del> 删除线
常用标签
<div></div> 块标签，容器，做网站的布局
<span></span> 文字标签
<pre></pre> 预先定义格式标签
<br> 回车标签
<hr> 水平线标签
图片标签
<img src="http://img0.jpg" alt="加载失败" title=“可爱的笨笨” width=“300px”/>- Src：图片的来源 必写属性
- 位置：图片src有三种路径：相对路径，绝对路径，远程路径
- alt：替换文本，图片不显示的时候，显示的文字
- title：提示文本，鼠标放到图片上显示的文字
- with：图片宽度
- height：图片高度
图片没有定义宽高的时候，图片按照百分百比例显示，如果只更改片的高度或者宽度，图片等比例缩放
超链接
<a href="http://www.baidu.com" target=“_blank” title="百度官网">百度</a>- herf：去往的路径（跳转的页面）必写属性
- title：提示文本，鼠标放到链接上显示的文字
- target=“_self”:默认值，在自身页面打开（关闭自身页面，打开链接页面）
- target_blank: 打开新页面（自身页面不关闭，打开一个新的链接页面）
锚链接
先定义一个锚点
<a name="targetC">衣服</a> 链接到锚点
<a href="#targetC " >找衣服</a><a href="./text.html#targetF" >text页面</a> text.html页面，具体到tragetF的位置标签里的框架
<iframe name="tarlist" src="http://www.baidu.com"></iframe>
<a href="https://www.taobao.com/" target="tarlist" >淘宝</a>
列表
1）无序列表
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ul>
嵌套列表
<ul>
<li>水果</li>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
</ul>
2）有序列表
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ol>
表格
<table border="1" bgcolor="#00ffff" cellspacing="0" width="500">
<caption>学生信息表</caption>
<tr>
<td rowspan="7">学生</td>
</tr>
<tr>
<td align="center" colspan="5">清华学生</td>
</tr>
<tr bgcolor="#ffebcd">
<td align="center">姓名</td>
<td align="center">年龄</td>
<td align="center">学校</td>
<td align="center">成绩</td>
<td align="center">是否考过</td>
</tr>
<tr>
<td>张一</td>
<td>20</td>
<td>清华</td>
<td>400</td>
<td>没过</td>
</tr>
<tr>
<td>张二</td>
<td>20</td>
<td>清华</td>
<td>400</td>
<td>没过</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>清华</td>
<td>400</td>
<td>没过</td>
</tr>
<tr>
<td>张四</td>
<td>20</td>
<td>清华</td>
<td>400</td>
<td>没过</td>
</tr>
</table>
table标签里的属性
1）cellspacing 属性规定单元格之间的空间
2）cellpadding 属性规定的是单元边沿与单元内容之间的空间。
表单标签
表单一般是由提示信息和表单控件组成的，用于收集信息。比如网页上的登录，注册就是表单。表单元素指得是不同类型的input元素，复选框，单选按钮，提交按钮等。
<form method="get" action="">
</form>- Method:发送数据的方式
- Action:接收者 后端
- Name:发送数据 用户名，数据 值
- 文本输入框
<input type="text" name="userName">类型（type）：
| 类型 | 作用 |
|---|---|
| text | 定义常规的文本输入 |
| radio | 定义单选按钮输入（选择多个 类型之一） |
| submit | 定义提交按钮（提交表单） |
<form>
First name:<br>
<input type="text" name="firstname"/><br>
Last name:<br>
<input type="text" name="lastname"/><br>
</form>
- 密码输入框
<input type="password" name="pwd">文本输入框的属性和密码输入框的属性通用
示例
<form>
用户名<br>
<input type="text" name="username"/><br>
密码<br>
<input type="password" name="pwd"/><br>
</form>
- 单选框
<input type="radio"> 定义单选按钮
单选按钮允许用户在有限数量的选项中选择其中之一
示例
<form method="get" action="">
你们喜欢的明星
1.张杰<input type="radio" name="star" value="xiaojie">
2.贝克汉姆<input type="radio" name="star" value="xiaobei">
3.周杰伦<input type="radio" name="star" value="xiojie ">
<input type="submit">
</form>
Name属性确定是一道单选题，Value 数据值
提交按钮 submit
- 复选框
示例
<form method="get" action="">
选择你们喜欢的明星
1.张杰<input type="checkbox" name="star" value="xiaojie">
2.贝克汉姆<input type="checkbox" name="star" value="xiaobei">
3.周杰伦<input type="checkbox" name="star" value="xiojie ">
<input type="submit">
</form>
- 下拉框
示例
<select name="city">
<optgroup label="陕西省">
<option>西安市</option>
<option>商洛市</option>
<option>宝鸡市</option>
</optgroup>
</select>
- multiple=”multiple” 将下拉列表设置为多选项
- selected=”selected” 设置默认选中项目
<optgroup></optgroup>对下拉列表进行分组。- label=”” 分组名称
表单分组
<form>
<fieldset>
<legend>注册</legend>
</fieldset>
</form><fieldset></fieldset> 对表单信息分组 <legend></legend> 表单信息分组名称
控件：
<input type="url" /> 网址输入框
<input type="date" /> 日期控件
<input type="time" /> 时间控件
<input type="email" /> 邮件输入框
<input type="number" step="2" /> 数字，step：步长
<input type="range" /> 滑块控件