分类目录归档:前端开发

编码也是一种能力!

前端学习笔记

1、前端基础技能
HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时:HTML将元素进行定义;CSS对展示的元素进行排版和设置样式;再通过JavaScript实现相应的效果和交互。

下面的段落是从定义、注释方式是对三大技能的基本介绍:

2、HTML
2.1 解释
html:超文本标记语言(Hypertext MarkLanguage);
DOCTYPE:文档类型

2.2 注释方式
html注释符号: <!– 我是内容 –>

2.3 注意事项
<1>开头:<!DOCTYPE html>
<2>“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。超文本标记语言的结构包括头部分(Head)、和主体部分(Body),其中,
头部(head)提供关于网页的信息;
主体(body)部分提供网页的具体内容。

2.4 html书写形式:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
<h2></h2>
<p></p>

</body>
</html>

2.5 格式:
<标签 属性=”值; 值” /标签>
<1> 标签:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
html标签的构成:
<html> 与 </html> 之间的文本描述网页
<head>与</head>之间提供关于网页的信息
<title>与</title>之间显示网页的标题
<meta>:单标签,用于申明编码类,eg.
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=0″>
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为正文内容的标题<!– 通过 <h1> – <h6> 等标签进行定义的 –>
<p> 与 </p> 之间的文本被显示为段落
<img>:单标签,指定图片,eg.
<img class=”picture” src=”static/images/baidu_sylogo1.gif” />

<2> 属性:
http-equiv:超文本传输协议标题信息
src:标签 <img> 的 src 属性用来指定图片位置。

<3> 值:
charset:字符集(编码类型)
(通用:charset=utf-8,中国:中国简体(GBK))

3、CSS
3.1 解释
CSS:层叠样式表(Cascading Style Sheets);

3.2 注释方式
CSS中注释符号: /* 我是内容 */

3.3 注意事项
1、样式定义为如何显示 HTML 元素。
2、样式通常存储在样式表中。
3、把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题。
4、外部样式表可以极大提高工作效率。
5、多个样式定义可层叠为一。

3.4 CSS书写的三种形式:
1、在head标签内,使用link标签链接外部文件,扩展名为.css,eg.
<link rel=”stylesheet” type=”text/css” href=”static/css/style.css” />
2、在head标签内,使用style标签,eg.
<style type=”text/css”></style>
3、在具体标签的style属性中写样式,eg.
<p style=”text-align : center;”>
<img class=”picture” id=”pic” src=”static/images/baidu_sylogo1.gif” />
</p>

CSS的3种常用选择器:
1、元素选择器element
eg.选择所有<p>元素
p { line-height : 50px; }
eg.选择所有<img>元素
img { line-height : 50px; }
2、class类选择器.class
eg.选择class=”paragragh”的所有元素
.paragragh { font-size : 20px; }
3、ID选择器#id
eg.选择id=”paragragh”的所有元素
#hello { color : #FF0000; }
CSS选择器参考详见http://www.w3school.com.cn/cssref/css_selectors.asp

3.5 作用
rel:用于定义连接的文件和HTML文档之间的关系。
1、StyleSheet 的意思就是样式调用REL=StyleSheet指定一个固定或首选的样式
2、REL=”Alternate StyleSheet”定义一个交互样式
href:超文本引用(hypertext reference);超链接;
text-align:属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。eg.对百度首页的图片居中显示。
<p style=”text-align : center;”>
<img class=”picture” id=”pic” src=”static/images/baidu_sylogo1.gif” />
</p>
src:标签 <img> 的 src 属性用来指定图片位置。

4、JS
4.1 解释
JS:(javascript)是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言;

4.2 注释方式:
JS注释符号:/* 我是内容 */

4.3 注意事项
1、HTML 中的js脚本必须位于 <script> 与 </script> 标签之间。
2、脚本可被放置在HTML页面的<body>或<head>部分或两个同时存在。通常的做法是把函数放入<head>部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
3、js语句在页面加载时或某个事件发生时执行代码。
4、外部脚本不能包含 <script> 标签。

4.4 JS书写的两种形式:
1、在head标签内,使用script标签保存在外部文件,扩展名为.js,外部文件通常包含被多个网页使用的代码。eg.
<script type=”text/javascript” src=”static/js/demo.js”></script>
2、在head或body标签内,使用style标签,eg.
<script type=”text/javascript”>
alert(“点一下有惊喜哦~”);
</script>

4.5 作用
alert:页面警报、提醒。用法eg.
<script type=”text/javascript”>
alert(“点一下有惊喜哦~”);
</script>