前端认知
** 一、公司开发流程**
1、 产品需求(产品经理给需求文档)
2、项目设计(视觉设计师给PSD文件，交互设计师配合)
3、前端开发
4、后端开发
5、测试
6、上线运营
二、前端开发的核心语言
**HTML ** 超文本标记语言 （负责页面结构）
**CSS ** 层叠样式表 （负责页面样式）
**JS ** 脚本语言 （负责页面行为）
HTML的基本结构
<!DOCTYPE html> /*文档头声明*/
<html lang="en"> /*HTML中的根元素*/
<head> /*head标签内部的内容绝大部分是不可见的*/
<meta charset="UTF-8"> /*定义html页面的元数据，meta中的charset属性，针对搜索引擎和解析格式的属性*/
<title>Document</title> /*定义文档的标题，在页面中可见 */
</head>
<body>
/*主要书写页面中的内容*/
</body>
</html>
HTML中的单标签
<br><hr><meta><img><input..><option.><link>HTML中基本标签
<div></div>双标签<h1>-----<h6>双标签 一级标题至六级标题<p></p>双标签 段落标签<strong>双标签 用于强调文本 表示重要的文本<span>双标签 用来组合文档中的行内元素<pre>双标签 文字的格式按源码的排版来显示，我们称之为预处理格式<a>双标签 --> 它有一个必不可少的属性 href
■target属性
■_self(在原来页面打开)
■_blank(新窗口打开)
■_top(打开是忽略所有的框架)
■_parent(在父窗口中打开)-
创建锚点和锚链接
■ 锚点也是一种超链接，是页面内进行跳转的超链接第一步：创建锚点 ``<a name="锚点链接"></a>`` 第二步 : 使用创建好的锚点名称 ``<a href="#锚点名称">内容</a>`` marquee标签 可以创建一个滚动效果
<marquee direction="down" loop="4" onmousenver=this.stop( ) onmouseout=this.start( )></marquee>
-
direction表示滚动方向，取向有（left，right，up，down，默认left） -
loop表示滚动循环的次数，默认为无线循环
onmouseover=this.stop( ) onmouseover=this.start( ) scrollamout="1"（滚动速度）
img标签的用法
- img图片标签与路径
- 常用的图片格式
jpgpnggif -
gif(只支持全透明的) -
Jpeg/jpg -
png(半透明/全透明都支持) - 图片四要素
-
src=" "图片路径 -
alt=" "图片含义 -
width=" "图片宽度 尽量与图片大小保持一致 -
height=" "图片高度 尽量与图片大小保持一致 - 图片标签的写法
<img src=" " alt=" " width=" " height=" " />- 关于路径的小知识
- 相对路径：（Relative Path）相对于该文件的路径;
- 绝对路径：（Absolute Path）从磁盘出发的路径;
-
/开头表示根目录 -
./表示当前目录； -
../上级目录 - 直接用文件名不带 / 也表示同一目录
关于列表的用法
- Number1
-
<ul>无序列表 - 无序列表顾名思义就是一个没有顺序项目的列表，此列表项默认粗体圆点
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- Number2
-
<ol>有序列表 - 有序列表也是一列项目，只是列表项目使用的是数字进行标记.
-
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
- 列表嵌套
- 无序列表--嵌套
<ul>
<li>布朗熊
<ul>
<li>海绵宝宝</li>
<li>多啦A梦</li>
</ul>
</li>
<li>派大星</li>
<li>海马</li>
</ul>
- 无序列表--嵌套
<ol>
<li>布朗熊
<ol>
<li>海绵宝宝</li>
<li>多啦A梦</li>
</ul>
</li>
<li>派大星</li>
<li>海马</li>
</ol>
- Number3
-
dl定义列表 - 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表
<dl>标签开始。每个定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始
<dl>
<dt>男装</dt>
<dd>衬衫</dd>
<dd>裤子</dd>
<dt>女装</dt>
<dd>卫衣</dd>
<dd>裙子</dd>
</dl>
-
<dt>与<dd>都必须放在<dl>标签内部之间使用 -
dd是对dt的解释 -
<dl>是用来创建一个普通列表 -
<dt>是用来创建列表中的上层项目 -
<dd>用来创建列表中最下层的项目
表单
- 表单标签
-
<form>表单标签-
<form>表单是一个包含表单元素的区域，包含起来的都是表单的内容
-
<form>
<input type="text"/>
</form>
- 关于
<input>标签<input type=" " name= " " value=" " />-
type="text"单行文本输入框 -
type="password"密码 （maxlength=" "） -
type="radio"单项选择（checked="checked"） -
type="checkbox"多项选择 -
type="button"按钮 -
type="submit"提交type="image"图片提交 -
type="file"上传文件 -
type="reset"重置 -
type="hidden"隐藏
-
textarea没有默认值 -
<label>标签的使用-
<label></label>标签的for属性应当与相关元素的id属性相同 - 举个例子
-
<p>单选</p>
<label for="boy">男 <label> <input type="radio" name="sex" id="boy"/>
<label for="girl">女 <label> <input type="radio" name="sex" checked="check"/>
-
<textarea>文本标签 -
<textarea></textarea>标签，可以在其中插入一段文字内容，它有两个经常使用的属性rows和cols -
rows表示这个文本域有多少行 -
cols表示这个文本域有多少列 -
<select>标签的掌握
表格
-
<table></table>表格标签 用于定义一个表格-
<tr></tr>定义表格中的行，一个<tr></tr>表示一行 -
<td></td>定义表格中的单元格， 一个<td></td>表示一个单元格 - 举个例子
-
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
■ border-cellspacing 属性 用来设置是否将表格的边框折叠为单一边框
■ colspan 左右合并
■ rowspan 上下合并
结束语
很多时候，我们不缺方法，缺的是一往无前的决心和魄力。不要在事情开始的时候畏首畏尾，
不要在事情进行的时候瞻前顾后，唯有如此，一切才皆有可能。
