【FE前端学习】第二阶段任务

技能学习部分：

  1. 需要熟练掌握HTML标签以及CSS各个常用属性。
  2. 掌握CSS3 常用属性
  3. 掌握jquery的基本用法，对于JS基本逻辑语句需要熟练掌握

一、HTML标签

    1. HTML是一种标记语言，标记语言是一套标记标签，标记标签是用尖括号包围的关键词，以开始标签和结束标签成对存在，如<b>和</b>
    2. HTML元素是开始标签到结束标签的所有代码
    3. HTML属性，给元素提供了更多信息，在开始标签中以名称/值的形式出现，如下例的href属性 
      <a href="http://www.w3school.com.cn">This is a link</a>
    4. HTML标题 <h1> - <h6>
    5. HTML 水平线<hr />
    6. HTML 注释 
      <!-- This is a comment -->
    7. HTML段落 
      <p>This is a paragraph</p>
    8. HTML换行 
      <br />由于关闭标签没有任何意义，因此它没有结束标签。
    9. HTML文本格式化
      <b> 定义粗体文本。
      <big> 定义大号字。
      <em> 定义着重文字。
      <i> 定义斜体字。
      <small> 定义小号字。
      <strong> 定义加重语气。
      <sub> 定义下标字。
      <sup> 定义上标字。
      <ins> 定义插入字。
      <del> 定义删除字。
    10. HTML编辑器，推荐使用Notepad (PC) 或 TextEdit (Mac)简单的文本编辑器
    11. HTML样式

      内部样式表

      <head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

      外部样式表

      <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

      内联样式

      <p style="color: red; margin-left: 20px">
This is a paragraph
</p>
    12. HTML链接 
      <a href="http://www.cnblogs.com/flipped/" target="_blank">Visit MyBlog!</a>
    13. HTML图像  
      <img src="boat.gif" alt="Big Boat" width="50" height="50">

      没有闭合标签，src属性为图片地址，alt属性为当图片不能加载时的替换文本，宽高属性调整图片尺寸

    14. HTML表格 
      <table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

      <tr>表示行，<td>表示列，border属性为表格边框宽度

    15. HTML列表 
      <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

      无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表即把<ul>替换为<ol>

    16. HTML块

      HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器中以新的一行开始和结束例如<h1>, <p>, <ul>, <table>，内联元素如<b>, <td>, <a>, <img>

    17. HTML<div>元素

      是块级元素，作为组合其他元素的容器，或用于文档布局
    18. HTML<span>元素

      是内联元素，作为文本的容器，可给部分文本设置样式
    19. HTML表单 
      <form>
...
  input 元素
...
</form>

      表单指包含文本域、下拉列表、单选框、复选框等输入信息的表单元素的区域

    20. HTML输入 
      <input type="text" name="nickname" />
      <input type="radio" name="sex" value="male" />

      type属性指定输入类型，text表示文本输入框，radio表示单选框，checkbox表示复选框，button表示普通按钮，submit表示提交按钮

    21. HTML框架 
      <frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

      通过frame标签将几个HTML文档放在一个HTML文档中，每个文档独立于其他文档

    22. HTML内联框架 
      <iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" ></iframe>

      用于在网页内显示其他网页

    23. HTML头部

      <head>是所有头部元素的容器，可以放<title>、<base>、<link>、<meta>、<script> 以及 <style>，其中<title>定义网页标题

      <title>Title of the document</title>

      <link>常用来连接外部样式表

      <link rel="stylesheet" type="text/css" href="mystyle.css" />

      <style>用于定义样式信息

      <style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

      <meta>用于定义网页的描述关键词，便于搜索引擎索引

      <meta name="description" content="这是一个个人博客" />
      <meta name="keywords" content="前端,博客,个人" />
    24. HTML 字符实体

      在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。因此HTML 中的预留字符必须被替换为字符实体。如小于号写成&lt; 或 <，在HTML源码中打10个空格，浏览器只显示1个空格，因此用&nbsp;来输出更多空格
    25. HTML多媒体

      <embed height="80" width="500" src="/i/horse.mp3"></embed>

      用embed标签嵌入MP3文件

      <video src="movie.ogg" controls="controls" width="320" height="240" ></video>

      添加视频，control 属性供添加播放、暂停和音量控件。

    26. HTML5的新特性

      用于绘画的 canvas 元素

      用于媒介回放的 video 和 audio 元素

      对本地离线存储的更好的支持

      新的特殊内容元素，比如 article、footer、header、nav、section

      新的表单控件，比如 calendar、date、time、email、url、search

二、CSS属性

  1. CSS 指层叠样式表 (Cascading Style Sheets)
  2. CSS的语法

     selector {declaration1; declaration2; ... declarationN }

    selector表示选择器，declaration由属性（property）和值组成

    h1 {color:red; font-size:14px;}
  3. CSS高级语法

    h1,h2,h3,h4,h5,h6 {
  color: green;
  }

    被分组的选择器共享系统的声明

  4. CSS派生选择器

    li strong {
    font-style: italic;
    font-weight: normal;
  }

    只改变<li>标签中的strong元素的样式

  5. CSS id 选择器 
    css代码为：#red {color:red;}
    HTML代码为：<p id="red">这个段落是红色。</p>

    同一个id 属性只能在每个 HTML 文档中出现一次

  6. CSS 类选择器 
    css代码为：.center {text-align: center}
    HTML代码为：<p class="center">
This paragraph will also be center-aligned.
</p>

    类名的第一个字符不能使用数字，类 属性可以在每个HTML中出现多次

  7. CSS 元素选择器 
    h1 {color:blue;}
  8. CSS背景 
    p {background-color: gray;}
    body {background-image: url(/i/eg_bg_04.gif);}
    背景重复body
  {
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }
    背景定位body
  {
    background-image:url(‘/i/eg_bg_03.gif‘);
    background-repeat:no-repeat;
    background-position:center;
  }
    背景固定body
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }
  9. CSS文本 
    缩进文本 p {text-indent: 5em;} 
    文本居中对齐 h1 {text-align:center}
    文本装饰(使链接无下划线) a {text-decoration: none}
  10. CSS字体 
    按给出的字体顺序，选择候选字体p {font-family: Times, TimesNR, ‘New Century Schoolbook‘,
     Georgia, ‘New York‘, serif;}
    不同的style p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
    不同的粗细 p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
    字体大小 h1 {font-size:60px;}
    1em=父元素的字体大小 h1 {font-size:3.75em;}
    所有字体属性在一个声明里，其中30px表示line-height行高 p{font:italic bold 12px/30px arial,sans-serif;}
  11. CSS 链接

    链接的四种状态：

    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻
  12. CSS列表 
    无序列的小圆点 ul.circle {list-style-type:circle;}
无序列的小方块 ul.square {list-style-type:square;}
有序列的大写罗马数字 ol.upper-roman {list-style-type:upper-roman;}
有序列的小写字母 ol.lower-alpha {list-style-type:lower-alpha;}
    无序列的图片 ul li {list-style-image : url(xxx.gif)}
    简写样式，inside代表标志出现在列表项内容内部li {list-style : url(example.gif) square inside}
  13. CSS表格 
    td
  {
   height:50px;设置高度
   vertical-align:bottom;文本竖直对齐
   padding:15px; 表格内边距
  }
table, td, th
  {
   border:1px solid purple;表格边框颜色
   background-color:gray;表格背景颜色
   color:white;表格文字颜色
  }
  14. CSS框模型概述 
    外边距 margin: 0;
内边距 padding: 0;
    分别设置上下左右的内边距 padding: 10px 0.25em 2ex 20%;
  15. CSS 定位

    position 属性值的含义：

    static
    元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
    relative
    元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
    absolute
    元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
    fixed
    元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
  16. CSS 浮动 
    向右浮动 float:right;
    清除浮动（左右两边的） clear:both;
  17. CSS对齐

    左和右外边距设置为 "auto"，来水平对齐块元素

    margin:auto

    position设置左右对齐

    position:absolute;
right:0px;

    float设置左右对齐

    float:right;
  18. CSS分类
    属性 描述
    clear 设置一个元素的侧面是否允许其他的浮动元素。
    cursor 规定当指向某元素之上时显示的指针类型。
    display 设置是否及如何显示元素。
    float 定义元素在哪个方向浮动。
    position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
    visibility 设置元素是否可见或不可见。 
    内联元素display: inline;
消失display: none;
块级元素display: block

三、CSS3常用属性

  1. CSS3 圆角边框

    div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
  2. CSS3 边框阴影 
    div
{
box-shadow: 10px 10px 5px #888888;
}
  3. CSS3 边框图片 
    div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
  4. 

    CSS3 background-size 属性
    

    div
{
background:url(bg.gif);
-moz-background-size:50px 100px; /* 老版本的 Firefox */
background-size:50px 100px;/* 分别代表宽度高度 */
background-repeat:no-repeat;
}
    

    5. 

  5. CSS3 background-origin 属性
    

    背景图片可以放置于 content-box、padding-box 或 border-box 区域。
    

    div
{
background:url(bg.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;/* 背景图片在文本区域  */
}
    

    6. 

  6. CSS3 文本阴影

    h1
{
text-shadow: 5px 5px 5px #FF0000;
}
    

    7. 

  7. CSS3 自动换行

    p {word-wrap:break-word;}
    

    8. 

  8. CSS3 @font-face 规则 首先定义字体的名称（比如 myFirstFont），然后指向该字体文件

    <style>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
     url(‘Sansation_Light.eot‘); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>
    

    9. 

  9. CSS3 2D 转换

    transform: translate(50px,100px);/* 移动到X,Y坐标 */
    

    transform: scale(2,4);/* 拉伸到2倍宽4倍高 */
    

    transform: skew(30deg,20deg);/* 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。 */
    

    transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* 旋转，缩放，移动，倾斜*/
    

    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
    

    10. 

  10. CSS3 3D转换

    div
{
transform: rotateX(120deg); /* rotateY(130deg); */
-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
-moz-transform: rotateX(120deg);	/* Firefox */
}
    

    11. 

  11. CSS3 过渡

    transition: width 2s, height 2s, transform 2s;
    

    12. 

  12. CSS3 多列

    div
{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
    

    13. 

  13. CSS3 动画

    @keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
    

    14. 

				


				
时间： 2024-08-07 20:41:54 

		


		


	

	
	

		


		
【FE前端学习】第二阶段任务的相关文章


								

		

			

                【FE前端学习】sublime开启vim模式
			

		

		

									

				学习目标:在sublime下开启vim模式,了解基本vim的编辑快捷键. 下载安装Sublime Text 3 :http://www.sublimetext.com/3 Vim/Vi: Vim/Vi 是一个文本编辑器,没有菜单,只有命令,适合写前端代码.高效命令行使用vim编辑文本,只需在键盘上操作就可以,根本无需用到鼠标.. 开启vim模式: 在菜单栏中: Preferences -> Setting - User 即可打开配置文件进行编辑,将 ignored_packages 项的[]里面			

		

	

				

		

			

                前端学习
			

		

		

									

				TOP:前端学习==20%知识+80%能力 1.好教材 JS CSS javascript高级程序设计 精通CSS                                                    DOM编程艺术 CSS权威指南         2.练习 (1)教材代码*3 (2)FreeCodeCamp (3)计蒜客 (4)在线编程online--{MDN,W3Cschool} 3.工具栈 (1)Sublime Text插件--{1.Emmet--chart;  2.侧边栏			

		

	

				

		

			

                前端学习之路
			

		

		

									

				转载自:https://github.com/qiu-deqing/FE-learning必备基础技能 前端技能汇总(https://github.com/JacksonTian/fks)这个项目详细记录 了前端工程师牵涉到的各方面知识.在具备基本技能之后可以在里面找到学习 的方向,完善技能和知识面. frontend-dev-bookmarks(https://github.com/dypsilon/frontend-dev-bookmarks)是老外总结的前端开发资源.覆盖面非常广.包括各种			

		

	

				

		

			

                WEB前端学习笔记 一
			

		

		

									

				最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分			

		

	

				

		

			

                【转载】前端学习路径
			

		

		

									

				前端学习路径 什么是前端工程师? 总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术,在工作中配合设计师实现用户界面,和后端工程师进行数据对接,完成Web应用开发的职位. 开发工具 设计软件 前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码,所以我们要学习一些设计软件的基础操作和切图方法. Photoshop 运用最广泛的设计软件,大部分人都在用它,很有必要学习一下 前端工程师必备的PS技能——切图篇 Sketch 轻量且功能强大,切图迅速高效,为UI设计而生			

		

	

				

		

			

                小小六的前端学习心得
			

		

		

									

				打算写这篇文章已经好久了,但是文采不行,不知道如何下笔,今天终于鼓起勇气用我拙劣的作文水平来讲述一下这段时间我学习前端开发的心得. 先从我的专业说起.我本人是学计算机的.全名是叫计算机科学与技术(软件方向),学校虽然是一个211学校,学习成绩也还行,但是对于编程这一块,真的是很弱很弱.所以我对计算机编程真正的学习是从实习这段时间开始的.说到这里,我必须得感谢带我进入前端的学长.因为他我才能在今天坐在这里写这篇学习心得. 所以,首先最好是有一个愿意耐心的指导你学习的人,也就是一个好的师傅.他能根据			

		

	

				

		

			

                黑马程序员：从零基础到精通的前端学习路线
			

		

		

									

				随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了.确实,前端是一门涵盖面很广的学科.但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端! 那么前端开发到底需要学什么?应该怎么学?接下来黑马程序员前端学院教你如何从零基础学习前端. 一.前端开发入门 在入门阶段,你首先要学会最基本的技能			

		

	

				

		

			

                前端学习 第六弹：  javascript中的函数与闭包
			

		

		

									

				前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {    var tmp = 3;    function bar(y) {        alert(x + y + (++tmp));    }    bar(10);}foo(2) 这时无论怎么运行输出的都是16,但这不是闭包 如果我们返回内部函数,内部function会close-over外部fu			

		

	

				

		

			

                前端学习 第五弹： CSS （一）
			

		

		

									

				前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="mystyle.css" /> 外联 <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40