一、前端技术
1.1、什么是前端？
前端即网站的前台部分，运行在PC端，移动端等浏览器或者APP上，展现给用户浏览的网页。前端与后台是相对的
前端是展示给用户并且和用户进行交互的客户端，有app或者浏览器。
后台又称为服务器端，进行数据处理，存储，业务逻辑等。
1.2、前端的开发流程
前端的开发流程.png
1.3、页面的组织结构
- 结构
HTML用于描述页面的结构
结构即骨架
- 表现
CSS用于控制页面中元素的样式
image5.png
- 行为
JavaScript用于响应用户操作
行为
二、HTML标签（结构）
2.1 HTML简介
- HyperText Markup Language
- 超文本标记语言
- Html通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）
2.2 网页的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
<!-- 以下全为注释及解释说明-->
<!DOCTYPE html>: 版本的声明,当前是html5版本
html标签: 网页的根标签,所有其它的标签都被html包含
head头部标签: 网页的配置信息
<meta charset="utf-8">:字符集(编码的设置)
<meta name="keywords" content="千锋教育,良心培训">
为搜索引擎提供的关键字列表：各关键词间用英文逗号","隔开
<meta name="description" content="国内领先的前端品牌">
Description用来告诉搜索引擎你的网站主要内容
2.3 body标签
主体标签: 所有的显示效果的标签和内容都被body包含
第4节 HTML标签基本结构
<p>开始标签，结束标签</p>
< br/> <img src="123.jpg"/> 自闭和标签
第5节 标签的语法
- 标签由英文尖括号<和>括起来，如<html>就是一个标签
- html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开
始标签多了一个/ - 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
<div>内部嵌套<p>,那么</p>必须放在</div>的前面
- HTML标签不区分大小写
<h1>和<H1>是一样的，但是建议小写，因为大部分程序员都以小写为准
2.4 语义化，让你的网页更好的被搜索引擎理解
标签的用途： 我们学习网页制作时，常常会听到“语义化”。明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
2.5、常用标签
- 分级标题
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
- 段落
<p>这是一个段落</p>
- 强调/加强语气
em:强调->默认是斜体 strong：更强烈的强调 ->粗体
<em>强调</em>
<strong>强烈的强调</strong>
- 换行
<br/>
- 分割行
<hr/>
- 联系地址
<address>南京市,建邺区,所街</address>
- 添加一行代码 code
<code>一行代码</code>
- 添加多行代码
<pre>多行代码</pre>
- 给文本增加样式的标签 span
<span> 文本 </span>
- 短引用文本 q
<q>短引用文本</q>
- 长引用 blockquote
<blockquote> 常引用 </blockquote>
- 无序列表 ul + li
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
- 布局标签 div
- 表格标签 table
<table>
<tr>
<td>ID</td>
<td>名字</td>
<td>年龄</td>
</tr>
<tr>
<td>1001</td>
<td>李雷</td>
<td>18</td>
</tr>
</table>
- 连接
<a href="#">发送</a>
- 图片 img
- 表单标签 form 输入框 input
- 文本域 textarea
- 下拉列表 select + option
- 提交/重置按钮/lable标签
<form>
性别:
<label for="male">男</label>
<input type="radio" name="gender" id="male"/>
<label for="female">女</label>
<input type="radio" name="gender" id="female"/><br/>
兴趣:
篮球 <input type="checkbox" name="a" />
足球 <input type="checkbox" name="b" />
台球 <input type="checkbox" name="c" />
<br/>
<label for="email">邮箱</label>
<input type="email" name="email" id="email" placeholder="输入邮箱地址"/><br/>
<label for="desc">描述</label>
<textarea value="文本域" name="desc" id="desc"></textarea><br/>
<label for="address">地址</label>
<select id="address">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>南京</option>
</select>
<br/>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
2.6、转义字符
转义字符
