什么是Web前端开发
在2005年以前，web网页主要以展示为主，内容基本是静态的，所以，一般是依靠Photoshop和Dreamweaver等工具。2005年后，互联网进入Web2.0时代，web注重用户的交互作用。Web前端开发要涉及网站开发的方方面面，从前端UI到和后端的数据交互。因此，Web前端开发兼具艺术气息和逻辑思维的综合体，既要考虑页面的美感和操作体验，又要关注前端代码的质量。
——Web前端开发最佳实践
Web前端开发需要具备的技能
HTML（Hypertext Marked Language）：
超文本标记语言，是一种标识性语言。html命令可以说明文字、图片、声音、表格、链接等。HTML功能强大，易上手，支持不同数据格式的文件镶入。从1993年发布开始，至今到H5，H5是公认的下一代Web语言，提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。目前在面试过程中会经常被问到H5 的有关知识，特别是H5的新特性和常用标签的用处。
H5的十大新特性：
- 语义标签
- 增强型表单
- 视频和音频
- Canvas绘图
- SVG绘图
- 地理定位
- 拖放API
- WebWorker
- WebStorage
- WebSocket
常用标签
<!DOCTYPE html> <!--声明为HTML文档 -->
<html> <!--html页面的根元素-->
<head> <!--定义文档的信息 -->
<meta /> <!--定义HTML文档的元数据 -->
<title></title> <!--定义文档的标题 -->
<link /> <!--定义一个文档和外部资源之间的关系，引用外部资源 -->
<script></script> <!--定义了客户端的脚本文件。既可以包含脚本语句，也可以通过src属性指向外部脚本文件。这一标签放置的地方一般存在于head和body标签中。-->
</head> <!--对主页内容的介绍-->
<body> <!--实体标签，可见的页面内容 -->
<style></style> <!--定义HTML文档的样式文件-->
<header></header> <!--定义文档的页眉 -->
<section> <!--定义文档中 节，比如章节、页眉、页脚或文档中的其他部分 -->
<div></div> <!--定义文档中的分区或节。是一个块级元素，可以把文档分割为独立的、不同的部分，并且不使用任何格式与其关联 -->
<span></span> <!--组合文档中的行内元素，通过样式来格式化，它们这一标签是使用的灵活性好，经常使用,没有固定的格式表现。当它应用了样式时，它才会产生视觉上的变化，如果不对其应用样式，span元素中的文本与其他文本内容不会有任何视觉上的差异。-->
<h1></h1> <!--定义一个标题，其中有h1到h6字体一次减小 -->
<p></p> <!--定义一个段落-->
<table> <!--定义html表格。html表格由table元素以及一个或多个tr、th或td元素组成。 -->
<tr> <!--定义表格的行 -->
<th> <!--定义表格的表头 -->
<td> <!--定义表格的单元格 -->
</td>
</th>
</tr>
</table>
</section>
<footer></footer> <!--定义文档或节的页脚。页脚通常包含文档的作版权信息、使用条款链接、联系信息等。 -->
</body>
</html>
CSS（Cascading Style Sheet）：
层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，对网页中元素位置的排版进行详细精确的控制。
CSS样式的使用有三种方法：
1. 方法一：行内样式
eg：
HTML代码
<div style="width:450px; background-color:#39F; margin-top:25px; font-size:18px;">
初始Web前端开发
</div>
运行结果
语法：在标签后加空格，然后写style=…，属性与属性值之间用" : “隔开，属性与属性之间用” ; "
注意：凡是用到标点符号都是英文式的标点符合。行内样式仅作用与它对应所使用的标签，对其他标签没有作用。
2. 方法二：内部样式
HTML代码
<div>
初始Web前端开发
</div>
.CSS代码
<style type="text/css">
div {
width: 450px;
background-color: #0F0;
margin-top: 25px;
font-size: 18px;
}
</style>
运行结果
语法：需要放在标记中，属性与属性值之间用“：”隔开，属性与属性之间用“；”隔开。
注意：内部样式有三种表示选择器
第一种：id选择器
语法：
#id名 {
属性：属性值;
…;
}
第二种：class类选择器
语法：
.类名 {
属性：属性值;
…;
}
第三种：标签选择器
语法：
标签名 {
属性：属性值;
…;
}
说明：class类名前一定要有" . “，id名前一定要有” # "。内部样式三种选择器的优先级为：标签选择器<class选择器<id选择器。
3. 方法三：外部样式
eg:
HTML代码
<div>
初始Web前端开发
</div>
.CSS代码
@charset "utf-8";
div {
width: 450px;
background-color: #F63;
margin-top: 25px;
font-size: 18px;
}
运行结果
语法：
1.链接式：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2.导入式：
<style type="text/css">
@import url("CSS文件路径");
</style>
注意：CSS代码保存的文件扩展名为.css的样式表中。
注意：CSS样式使用的优先级从低到高排序（外部样式<内部样式<行内样式），其中内部样式和外部样式遵循就近原则。
JavaScript：
javascript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，基于对象和事件驱动的客户端脚本语言，是页面实时动态交互的技术基础并且支持面向对象、命令式和声明式风格。
javascript代码分布：
1. 方法一：行内引入
eg：
html代码
<button type="button" οnclick="alert('初始Web前端开发')">administer</button>
运行结果
说明：<标签名 on+事件类型=“javascript代码”/>
2. 内部引入：
eg：
html代码
<div id="web">
<button type="button" οnclick="my()">administer</button>
</div>
内部js代码
<script type="text/javascript">
function my()
{
dv=document.getElementById("web");
dv.innerHTML="初始Web前端开发";
}
</script>
运行结果
点击前
点击后
说明：在内部引入时定义script一般在head或body标签中。
3. 外部引入：
eg:
html代码
<div id="web">
<button type="button" οnclick="my()">administer</button>
</div>
js文件代码
// JavaScript Document
function my()
{
dv=document.getElementById("web");
dv.innerHTML="初始Web前端开发";
}
运行结果
点击前
点击后
说明：javascript代码保存的文件扩展名为.js的结尾的文件中。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
