专栏首页饶文津的专栏【FE前端学习】第二阶段任务-基础

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

技能学习部分:

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

上文 【FE前端学习】第二阶段任务-提高


一、HTML标签

  1. HTML是一种标记语言,标记语言是一套标记标签,标记标签是用尖括号包围的关键词,以开始标签和结束标签成对存在,如<b>和</b>
  2. HTML属性,给元素提供了更多信息,在开始标签中以名称/值的形式出现,如下例的href属性 <a href="http://www.w3school.com.cn">This is a link</a>
  3. HTML标题 <h1> - <h6> 
  4. HTML 水平线<hr /> 
  5. HTML 注释 <!-- This is a comment -->
  6. HTML段落 <p>This is a paragraph</p>
  7. HTML换行 <br />由于关闭标签没有任何意义,因此它没有结束标签。

<b>

定义粗体文本。

<big>

定义大号字。

<em>

定义着重文字。

<i>

定义斜体字。

<small>

定义小号字。

<strong>

定义加重语气。

<sub>

定义下标字。

<sup>

定义上标字。

<ins>

定义插入字。

<del>

定义删除字。

  1. HTML编辑器,推荐使用Notepad (PC) 或 TextEdit (Mac)简单的文本编辑器
  2. HTML样式 内部样式表 外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内联样式 <p style="color: red; margin-left: 20px"> This is a paragraph </p>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
  1. HTML链接 <a href="http://www.cnblogs.com/flipped/" target="_blank">Visit MyBlog!</a>
  2. HTML图像  <img src="boat.gif" alt="Big Boat" width="50" height="50"> 没有闭合标签,src属性为图片地址,alt属性为当图片不能加载时的替换文本,宽高属性调整图片尺寸
  3. HTML表格 <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> <tr>表示行,<td>表示列,border属性为表格边框宽度
  4. HTML列表 <ul> <li>Coffee</li> <li>Milk</li> </ul> 无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表即把<ul>替换为<ol>
  5. HTML块 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器中以新的一行开始和结束例如<h1>, <p>, <ul>, <table>,内联元素如<b>, <td>, <a>, <img>
  6. HTML<div>元素 是块级元素,作为组合其他元素的容器,或用于文档布局
  7. HTML<span>元素 是内联元素,作为文本的容器,可给部分文本设置样式
  8. HTML表单 <form> ... input 元素 ... </form> 表单指包含文本域、下拉列表、单选框、复选框等输入信息的表单元素的区域
  9. HTML输入 <input type="text" name="nickname" /> <input type="radio" name="sex" value="male" /> type属性指定输入类型,text表示文本输入框,radio表示单选框,checkbox表示复选框,button表示普通按钮,submit表示提交按钮
  10. HTML框架 <frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset> 通过frame标签将几个HTML文档放在一个HTML文档中,每个文档独立于其他文档
  11. HTML内联框架 <iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" ></iframe> 用于在网页内显示其他网页
  12. 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="前端,博客,个人" />
  13. HTML 字符实体 在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。因此HTML 中的预留字符必须被替换为字符实体。如小于号写成&lt; 或 &#60;,在HTML源码中打10个空格,浏览器只显示1个空格,因此用&nbsp;来输出更多空格 
  14. HTML多媒体 用embed标签嵌入MP3文件 <video src="movie.ogg" controls="controls" width="320" height="240" ></video> 添加视频,control 属性供添加播放、暂停和音量控件。
<embed height="80" width="500" src="/i/horse.mp3"></embed>
  1. HTML5的新特性 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article、footer、header、nav、section 新的表单控件,比如 calendar、date、time、email、url、search

二、CSS属性

  1. CSS 指层叠样式表 (Cascading Style Sheets)
  2. CSS的语法 selector表示选择器,declaration由属性(property)和值组成 h1 {color:red; font-size:14px;}
 selector {declaration1; declaration2; ... declarationN } 
  1. CSS高级语法 被分组的选择器共享系统的声明
h1,h2,h3,h4,h5,h6 {
  color: green;
  }
  1. CSS派生选择器 只改变<li>标签中的strong元素的样式
li strong {
    font-style: italic;
    font-weight: normal;
  }
  1. CSS id 选择器 css代码为:#red {color:red;} HTML代码为:<p id="red">这个段落是红色。</p> 同一个id 属性只能在每个 HTML 文档中出现一次
  2. CSS 类选择器 css代码为:.center {text-align: center} HTML代码为:<p class="center"> This paragraph will also be center-aligned. </p> 类名的第一个字符不能使用数字,类 属性可以在每个HTML中出现多次
  3. CSS 元素选择器 h1 {color:blue;}
  4. 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 }
  5. CSS文本 缩进文本 p {text-indent: 5em;} 文本居中对齐 h1 {text-align:center} 文本装饰(使链接无下划线) a {text-decoration: none}
  6. 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;}
  7. CSS 链接 链接的四种状态:
    • a:link - 普通的、未被访问的链接
    • a:visited - 用户已访问的链接
    • a:hover - 鼠标指针位于链接的上方
    • a:active - 链接被点击的时刻
  8. 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}
  9. CSS表格 td { height:50px;设置高度 vertical-align:bottom;文本竖直对齐 padding:15px; 表格内边距 } table, td, th { border:1px solid purple;表格边框颜色 background-color:gray;表格背景颜色 color:white;表格文字颜色 }
  10. CSS框模型概述 外边距 margin: 0; 内边距 padding: 0; 分别设置上下左右的内边距 padding: 10px 0.25em 2ex 20%;
  11. CSS 定位 position 属性值的含义: static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。absolute元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
  12. CSS 浮动 向右浮动 float:right; 清除浮动(左右两边的) clear:both;
  13. CSS对齐 左和右外边距设置为 "auto",来水平对齐块元素 margin:auto position设置左右对齐 position:absolute; right:0px; float设置左右对齐 float:right;

属性

描述

clear

设置一个元素的侧面是否允许其他的浮动元素。

cursor

规定当指向某元素之上时显示的指针类型。

display

设置是否及如何显示元素。

float

定义元素在哪个方向浮动。

position

把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

visibility

设置元素是否可见或不可见。


三、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. 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. CSS3 文本阴影 h1 { text-shadow: 5px 5px 5px #FF0000; }
  7. CSS3 自动换行 p {word-wrap:break-word;}
  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. 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. CSS3 3D转换 div { transform: rotateX(120deg); /* rotateY(130deg); */ -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ }
  11. CSS3 过渡 transition: width 2s, height 2s, transform 2s;
  12. CSS3 多列 div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }
  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;} }

四、jQuery

  1. jQuery 是一个 JavaScript 函数库。
  2. HTML 元素选取和操作
    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值
    • attr() 方法用于获取属性值。
  3. HTML 元素添加和删除
    • append() - 在被选元素的结尾插入内容
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容
    • remove() - 删除被选元素(及其子元素)
    • empty() - 从被选元素中删除子元素
  4. CSS 获取和设置 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 ("p").css("background-color","yellow");/*设置一个属性*/
  5. 处理尺寸
    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()
  6. 遍历
    1. 祖先
      • parent()
      • parents()
      • parentsUntil()
    2. 后代
      • children()
      • find()
    3. 同胞
      • siblings()
      • next()
      • nextAll()
      • nextUntil()
      • prev()
      • prevAll()
      • prevUntil()
    4. 过滤
      • first()
      • last()
      • eq() 
      • filter()
      • not() 
  7. ("#div1").load("demo_test.txt #p1"); .get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); });

五、JS的基本逻辑语句

  1. 和C语言一样的比较运算符,多了一个===全等号,值和类型都相等才返回true
  2. 和C语言一样的逻辑运算符&&、||、!代表与或非
  3. 和C语言一样的?:三目运算符 variablename=(condition)?value1:value2 
  4. 和C语言一样的if和switch语句
  5. 和C语言一样的for、while、break语句
  6. 测试和捕捉 try { adddlert("Welcome guest!");//在这里运行代码 } catch(err) { txt="There was an error on this page.\n\n";//在这里处理错误 txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); }
  7. 正则表达式RegExp
    1. test() 方法检索字符串中的指定值。返回值是 true 或 false
    2. exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
    3. compile() 既可以改变检索模式,也可以添加或删除第二个参数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 博客园美化插入代码css

    博客园写博客的TinyMCE编辑器下添加代码有两种方式,我平时用的是第二种,就是代码背景是一行灰一行白的,行号和代码之间有一条绿色竖线的这种。

    饶文津
  • 【计导作业】链表——差集与交集

    问题描述:已知有两个递增的正整数序列A和B,序列中元素个数未知,同一序列中不会有重复元素出现,有可能某个序列为空。你的任务是求这两个序列的差集A-B与交集A+B...

    饶文津
  • 乘法逆元及其应用

      满足 a * k ≡ 1 (mod p) 的k 叫做 a关于p的乘法逆元。另一种表达方法是 k ≡ a-1 (mod p)

    饶文津
  • SimuLooker 一款用于iOS开发的小工具

    在iOS日常开发中,Xcode的模拟器作为调试App的必备工具,使用频度很高,一些app需要对数据进行持久化,因此就需要经常访问模App内的Doucment,C...

    代码行者
  • 只有公众监督才能力挽监测数据造假

    大数据文摘
  • python学习笔记5.3-包的创建

    包,也可以称为库,是具有很多功能的一个集合体。本文主要介绍如何自己创建一个包,以及介绍一些在包的创建过程中的技巧。 1. 包的创建 本文的例子将使用最复杂的情况...

    锦小年
  • 编译安装openresty

    OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭...

    行 者
  • 产品动效设计全方位科普手册,超级全面的分析!

    本文主要讲述了为什么做动效,好的动效设计的标准是什么,如何做动效设计,以及如何使自己设计的动效完美落地。

    宇相
  • OpenGLES_入门01_创建第一个工程

    今天就带这个大家把OpenGL 用原始的方法创建一下,之后我们会使用苹果给我封装的类做,简化操作!

    酷走天涯
  • 【AI核心技术】课程四:多层感知机网络模型

    UAI与PaddlePaddle联合推出的【AI核心技术掌握】系列课程持续更新中!

    用户1386409

扫码关注云+社区

领取腾讯云代金券