前端开发概述
前端开发也叫web前端开发，前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。简单来说，指的是基于web的互联网的页面开发及功能开发。
所以首先来学习html
html概述
- html的百科资料为：超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
- HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
html5的基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
<!--这是注释信息
第1行是文档声明
第2行第二行<html>标签和最后一行“</html>”定义html文档的整体.
后面的lang是属性定义网页的语言，如果‘lang=“en”为英文，如果“lang="zh-CN""为中文
“<head>”标签和“<body>”标签是它的第一层子元素
“<head>”标签里面负责对网页进行一些设置以及定义标题，
设置包括定义网页的编码格式，外链css样式文件和javascript文件等，
设置的内容不会显示在网页上，标题的内容会显示在标题栏
“<body>”内编写网页上显示的内容。-->
- 在Sublime中编写可以直接输入
！+Tab键，就可以自动出来html5的基本结构 - 如果输入的是
html:xt+Tab键，创建的是xhtml 1.0版本的文件，xhtml 1.0版本是html5之前的常用版本，现在仍然使用
它的基本结构如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html的基本编写规范
html注释
插入注释方法：
<!--这是html的注释-->
html标题标签
html可以在网页上定义6级标签，依次递推，搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
网页效果：
html段落标签
<p>
这是html的段落标签，是一个文本段落，有默认的上下间距
</p>
html换行标签
直接在html编写时回车换行，在网页中时不会显示换行的
<p>
<!--可以在代码的段落中插入<br />来强制换行-->
前端开发也叫web前端开发，前端开发是创建Web页面或app等前端界面呈现给用户的过程。<br />前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。
简单来说，指的是基于web的互联网产的页面开发及功能开发。
</p>
html字符实体
代码中的段落不能换行，可以使用空格，
但是在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体可以使用在需要空格的地方使用 ，表示半个空格，这个字符实体适合小规模的空格使用。
<p>
简单来说，指的是基于web的互联网产的页面开发及功能开发。
</p>
网页上显示< 和 >会误认为标签，所以一般用字符实体< 和 >表示
<p>
3 < 5 <br>
10 > 5
</p>
html块标签
1、<div> 标签 块元素，表示一块内容，没有具体的语义。
2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
html含样式和语义的标签
1、<em> 标签 行内元素，表示语气中的强调词
2、<i> 标签 行内元素，表示专业词汇
3、<b> 标签 行内元素，表示文档中的关键字或者产品名
4、<strong> 标签 行内元素，表示非常重要的内容
html图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页插入图片</title>
</head>
<body>
<img src="images/bg09.jpg" alt="水果图片" />
<img src="images/bike_loading.gif" alt="自行车图片" />
<img src="images/person.png" alt="美女图片 />
</body>
</html>
绝对路径和相对路径
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html链接标签
使用<a></a>可以在网页上定义一个链接地址常用的属性有：
- href属性 定义跳转的地址
- title属性 定义鼠标悬停时弹出的提示文字框
- target属性 定义链接窗口打开的位置
- target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
- target="_blank" 新页面会在新开的一个浏览器窗口打开
演练代码：
007链接标签.html链接003h标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<h1>这是网页1的标题</h1>
<!--网页之间的链接-->
<a href="003h标签.html"> 标题的网页</a>
<!--链接到远程的网页，链接到百度官网-->
<a href="https://www.baidu.com"> 百度</a>
<!--也可以用图片做为链接的按钮-->
<a href="https://www.baidu.com">
<img src="images/百度.jpg" alt="百度logo">
</a>
<!--使用title当鼠标放在百度的图片时，会提示信息-->
<a href="https://www.baidu.com" title="去到百度的网址">
<img src="images/百度.jpg" alt="百度logo">
</a>
<br />
<br />
<!--当不知道要链接哪里时，可以使用#表示缺省的链接-->
<a href="#">缺省的链接</a>
</body>
</html>
如果想要返回链接的网页，除了在网页上点撤销之外，可以在链接的网页上再加上一个之前的链接
003h标签.html链接007链接标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!--搜索引擎会使用标题将网页的结构和内容编制索引，标签可以定义六级标题对应六级目录-->
<h1>个人主页</h1>
<h2>二级标题</h2>
<h3>三级标签</h3>
<!--超链接，跳回原来的网页-->
<a href="007链接标签.html"> 链接标签</a>
</body>
</html>
html列表
有序列表
有序列表主要是定义一个有编号的内容列表，使用<ol> <li></li></ol>实现
<h1>有序列表</h1>
<!--可以使用快捷键ol>li*3+Tab键-->
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
网页显示:
无序列表
没有编号的内容列表，使用<ul><li></li></ul>实现
<h2>无序列表,一般用在新闻列表</h2>
<ul>
<!--加入链接，地址一般先用#-->
<li><a herf="#">新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
</ul>
不同的浏览器图标的显示效果也不同，可以使用样式去掉或者修改小图标的显示。实际开发中常用这种列表。
定义列表
定义列表通常用于定义术语。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：
<h2>定义列表</h2>
<!--快捷键dl>(dt+dd)*3+Tab-->
<dl>
<dt>html</dt>
<dd>负责页面结构</dd>
<dt>css</dt>
<dd>负责页面表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址，如果不写，默认提交到本地地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式。默认get方式，但是get方式会在地址栏中显示所有信息，所以不适合用在密码用户名这种敏感的注册等信息，一般会用post方式提交， 就不会在地址栏中显示，会放在http协议的报文中传过去。总结：少量的不敏感的信息用get,大量的不敏感的数据用post
2、<label>标签 为表单元素定义文字标注
3、<input>标签 定义通用的表单元素
input下的type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- type=“image” 定义图片作为提交按钮，用src属性定义图片地址
- type=“hidden” 定义一个隐藏的表单域，用来存储值
- value属性 定义表单元素的值
- name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
代码演练：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册表单</h1>
<form action="" >
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密 码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<label>性 别：</label>
<input type="radio" name="gender" id="male"> <label for="male">男</label>
<input type="radio" name="gender" id="female"> <label for="female">女</label>
</p>
<p>
<label>爱 好：</label>
<input type="checkbox" name="like">游戏
<input type="checkbox" name="like">篮球
<input type="checkbox" name="like">看书
</p>
<p>
<label>照 片：</label>
<input type="file" name="photo">
</p>
<p>
<label>个人描述：</label>
<textarea name="introduce"></textarea>
</p>
<p>
<label>籍 贯：</label>
<select name="site">
<option value="0">上海</option>
<option value="1">北京</option>
<option value="2">西安</option>
<option value="3">青岛</option>
</select>
</p>
<p>
<!-- <input type="submit" name="" value="提交"> -->
<input type="image" src="images/bg09.jpg" name="">
<input type="reset" name="" value="重置">
</p>
<p>
<input type="hidden" name="hid01" value="12">
</p>
</form>
</body>
</html>
网页显示：
html表格
表格的用法比较固定，有以下几个标签：
1、<table>标签：声明一个表格，它的常用属性如下：
border属性 定义表格的边框，设置值是数值，border=0没有边框
cellpadding属性 定义单元格内容与边框的距离，设置值是数值
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
制作一张个人简历的表格，代码演练如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body topmargin="0">
<table align="center" width="800" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="260" valign="top" bgcolor="#f2f2f2">
<table width="200" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td height="100"/td>
</tr>
<tr>
<td align="right"><img src="./images/person.png" ></td>
</tr>
<tr>
<td align="right">张达山</td>
</tr>
<tr>
<td align="right">18210898888 </td>
</tr>
<tr>
<td align="right">zhangdasan@126.com</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top">
<table width="480" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="80"></td>
</tr>
<tr>
<td align="right"><img src="images/resume.png"></td>
</tr>
</table>
<br />
<hr />
<br />
<table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><b>个人基本情况</b></td>
</tr>
<tr>
<td><b>姓 名：</b>张达山</td>
<td><b>籍 贯：</b>北京昌平</td>
</tr>
<tr>
<td><b>性 别：</b>男</td>
<td><b>身 高：</b>175cm</td>
</tr>
<tr>
<td><b>民 族：</b>汉</td>
<td><b>体 重：</b>70kg</td>
</tr>
<tr>
<td><b>出生日期：</b>1992.03.28</td>
<td><b>电 话：</b>18210898888</td>
</tr>
<tr>
<td><b>专 业：</b>工业设计</td>
<td><b>现居住地：</b>昌平天通苑</td>
</tr>
</table>
<br />
<br />
<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><b>教育背景及工作经历</b></td>
</tr>
<tr>
<td>2008.09-2011.06 北京邮电大学 工业设计专业</td>
</tr>
<tr>
<td>2011.06-2012.09北京微创信息科技有限公司 任前端开发工程师</td>
</tr>
</table>
<table width="480" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><b>所获证书</b></td>
</tr>
<tr>
<td>2008.09-2011.06 2009年：荣获“高级美术设计师”证书</td>
</tr>
<tr>
<td>2009年：荣获“优秀班干部”证书</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>
网页效果：
632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
