码迷,mamicode.com
首页 > Web开发 > 详细

Web前端幻术(持续更新)

时间:2018-12-01 13:09:22      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:列表   移除   不容易   sublime   区域   span   索引   细节   tip   


title: 前端法术
tags: 前端,Html!][1],Css,JavaScript
grammar_cjkRuby: true
---

技术分享图片

跳转到文章结尾https://www.cnblogs.com/Asterism-2012/p/10048355.html
前端被我称为幻术,这篇文章还是待完善的。其他我有空会写。

目录:

目录还没写,有空会写。

Web幻术

  • 操作系统:Windows10

    编译器:sublime

    常用操作:
  • 添加文件夹到当前界面 Project>Add Folder to Project
  • 打开文件夹到新的界面 File>Open Folder
  • 从Sublime中移除 右键>Remove Folder from Project
  • 显示或打开控制台 Ctrl+`
  • 打开命令面板 Tools > Command Palette/Ctrl+Shift+P
  • sublime创建h5 !+Tab/html:5+Tab
  • sublime创建xthml html:xt+Tab
  • 安装插件:在命令面板中输入install,然后输入插件名称

推荐书单:《HTML布局之路》

前端说的就是网页的前端

  • 前端工程师是新兴职业
  • 最初的拨号上网,连接简单的网页
  • 网页从最初的页面显示已经发展到应用程序,技术含量越来越大。职位由美工演变成了UI设计师和前端工程师。
  • 交互效果,处理数据,页面改口为界面
  • 技术更新特别快
  • 前端三大块
    1. HTML:页面结构
    2. CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
    3. JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能

HTMl

  • 单标签与双标签
  • 标签的嵌套
  • 学习html语言就是学习标签的用法

HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。

  • 文档声明:顶格写
<!DOCTYPE html>
  • meta声明:声明,编码方式,缓存,关键词(位于头部标签内)
<meta charset="UTF-8">
  • lang的en与zh-CN文档语言声明,可以不写,主要用于统计
<!--<html lang="en">-->
<html lang="zh-CN">
  • Ctrl+S保存是一个好习惯
  • 不论大厂还是小厂,文件就是工程师的产出物

H5(html)与XHTML1.0

  • 两者的文档声明和编码声明不同,H5比xhtml更精简,而且向下兼容,
  • H5新增了更多标签

html文档规范

xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。

  1. 所有的标签必须小写
  2. 所有的属性必须用双引号括起来
  3. 所有标签必须闭合
  4. img必须要加alt属性(对图片的描述)

注释

  • 上线的时候,把注释中无意义的东西删掉,包括没用的空格删掉,这对于网络传输是有意义的。
  • html中的注释:
<!--我是注释-->

html标题与段落

  • h标签与p标签均是双标签
  • 搜索引擎会使用标题将网页的结构和内容(根据网页的排版和优化)编制索引,所以网页上使用标题是很重要的。
  • <h1>用作主标题(最重要的),其后是<h2>(次重要的),再其次是 <h3>,以此类推最多至<h6>
  • p标签不会自动换行

修饰标签,div标签与span标签

  • <br />是单标签:换行
  • &nbsp;与&emsp;空格实体和缩进实体
  • 网页中写"<"或是">"会被转义,所以写做"&gt;“与”&lt;
  • <span></span>行内标签,没有具体语义,表示一行内的一小段内容,在我看来span标签是div的儿子,但是两者没有可替代性。
  • <div></div>标签是块级标签,是最常用的标签之一。表示一块内容,没有具体语义。
  • 语义化标签:
    1. em标签 行内元素,表示语气中的强调词
    2. i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
    3. b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
    4. strong标签 行内元素,表示非常重要的段落内容
      语义化的标签是方便所搜引擎能认识这些标签,理解文档结构,方便网站的收录、被搜索。

图片添加、超链接、绝对路径与相对路径

  • 图片添加的img标签是单标签,行内标签src与alt我们约定必填
  • a标签中的html文件绝对路径前,加上"file:///"或者"\"("/"也可以)就可以访问,title属性是标签的提示,
    • 空链接的两种写法:herf="#"号是空链接,作用是连接到当前页面顶部。
    • 第二种写法:herf="JavaScript:;"这表示告诉js什么也不做
    • 锚点跳转,也叫页面内部跳转。就是herf指定一个标签的id,比如herf="#title01".
    • target属性的默认值是在当前窗口打开页面target="_self",修改为在新的窗口打开页面:target="_blank"
  • 绝对位置是相对于磁盘的根目录去寻找的位置,绝对路径的兼容性不好,就是迁移不好。
  • 相对位置是相对于当前文件夹的位置去寻找的位置,相对路径迁移性比较好
  • 超文本链接"a"是双标签,行内标签,支持嵌套。

列表

  • dl>(dt+dd)*3 生成自定义列表
  • ol>li*3 生成有序列表
  • ul>li*3 生成无序列表

html表格

  • 曾作为主流布局方法应用在网页上
  • table>((tr>th3)+(tr>td3))生成两行三列的表格
  • table是表格,tr是行,th是表头,td是普通单元格:嵌套关系是:table>tr>th/td
  • table常用属性:
    1. border 定义表格的边框
    2. cellpadding 定义单元格内内容与边框的距离(内边距)
    3. cellspacing 定义单元格与单元格之间的距离(外边距)
    4. align 设置单元格中内容的水平对齐方式,设置值有:left | center | right
    5. valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
    6. colspan 设置单元格水平合并
    7. rowspan 设置单元格垂直合并

旧版table布局方式

  • 制作网页是根据UI设计师的图纸来参照制作的,而不是凭空想出来的。

html表单

  • 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用<form>标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入.
  • form定义表单区域
  • label标签定义表单控件的文字标注,提高用户体验的细节
    • for属性:for="某标签的id",用于操作激活标签,比如Inpu输入框,选择框等
  • input设置信息输入框
  • textarea定义多行文本输入(大文本)
  • select>option定义下拉列表选择框
  • post提交方式数据不会暴露在URL中

    input的属性

  • input标签是一个单标签,行内标签。也是表单中最常用的控件,它拥有很多属性,为表单提供了丰富的控件。
    • text文本
    • password密码
    • radio单选
    • checkbox多选
    • file文件类型
    • submit提交内容
    • reset重置内容
    • hidden隐藏标签

html内嵌框架

  • <iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址,frameborder属性定义边框,scrolling属性定义是否有滚动条
    <iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

Javascript

历史:

1.源于网景公司,初衷是为了表单快速验证,通过浏览器解释
2.起初前台后台都不太愿意学
3.flash一度鼎盛,游戏,动画,网页。几乎能取代html和JavaScript。但是对插件依赖。后来因为一些历史的原因。
4.V8引擎由谷歌公司发明,加速了JavaScript的解析速度
5.随之而来出现了ajax技术:实现无刷新、局部刷新。
6.全世界的Flash网页几乎都被JavaScript取代了。
7.ActionScript语言主要用于操作视频中的操作(.flv),源于Adobe公司。
8.Jscript是上不了台面的语言

  • JavaScript的运行环境试在浏览器上的,相当于买了的电脑都有解释的能力。
  • JavaScript是嵌入到html中运行的,而不是单独运行,它是一把宝剑,它也没有剑柄。

JavaScript介绍

JavaScript是运行在浏览器中的解释性脚本语言,它3主要解决的是前端与用户交互。前端脚本语言还有JScript(微软,IE独有),ActionScript( Adobe公司,需要插件)等。

  • jQuery是一个前后台都通的JS库,全球百分之四十二的网站在使用jQuery。jQuery是JavaScript语言课程内的重点分支。
  • 学习原生JavaScript是为了熟悉和深入了解它的语法,另一方面也是为了面试。
  • jQuery是一个经常被初学者遗忘的,但是它实际上是非常重要的东西,所以要重点学习和练习。
  • 大学里也没有开JavaScript的课程,我这里补充一句,好多大学连python语言都没有开。
  • JavaScript也是完整的编程语言,巨有高级语言的特性:面向对象、类等。

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。那么问题来了,为什么我们要学JavaScript?尤其是当你已经掌握了某些其他编程语言如Java、C++的情况下。简单粗暴的回答就是:因为你没有选择。在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。——廖雪峰

    JavaScrtipy的误解

    很多人认为,写JavaScript代码很简单。并且编写它只是为了在网页上添加一点交互和动画效果。但是这是完全错误的理解,它的精髓不为大多数开发人员所熟知。

ECMAScript标准

因为网景开发了JavaScript,一年后微软又模仿JavaScript开发了JScript,为了让JavaScript成为全球标准,几个公司联合ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准,被称为ECMAScript标准。

所以简单说来就是,ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。

那为什么不直接把JavaScript定为标准呢?因为JavaScript是网景的注册商标。

不过大多数时候,我们还是用JavaScript这个词。如果你遇到ECMAScript这个词,简单把它替换为JavaScript就行了。

JavaScript嵌入页面的方式

  • JavaScript嵌入页面的方式与CSS极度相似,分为行间(行内)事件,页面内部(嵌入)事件,外链事件
  • 每一个标签都有自己的事件属性
  • 第一种行间属性,不推荐批量使用
  • 第二种是内部事件(嵌入事件),可以写在头部或者尾部。
    <script type="text/javascript">
    /* 暴露在script中的语句会直接顺序执行。*/
    alert("here not a world.")
    </script>
  • 第三种在js文件中写代码,导进来就好。
<script type="text/javascript" src="js/hello.js"></script>
  • 在大的公司,常常是html和css是一帮人做,script是另一帮人做。html和css虽然入门门槛很低,但是要想做好做精,也是不容易的事情。JavaScript是前端三大块的最后一大块。
  • JavaScript单行注释与多行注释:// 单行注释 /* 多行注释 */

变量

  • JavaScript 是一种弱类型语言,也就是说我们定义变量时候不用指定变量类型。javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var‘
  • 学到这里我们应该发现语言之间的知识体系都是相似的,变量,运算符,算法,表达式,函数等
  • 声明变量的关键字:var
  • 电话面试里常考的变量类型:五种基本类型、一种复合类型。

    • 5种基本数据类型:
    • number、string、boolean、undefined、null
    • 1种复合类型:
    • object
  • 命名规范的三点:
  1. 区别大小写,顺便踩一脚《悟空传》电影版
  2. 第一个字符必须是字母、下划线或者$符号
  3. 其他字字符可以是字母、下划线、$、数字
  • 定义number类型变量:var num1 = 1;
  • 定义string类型变量: var str1 = ‘k‘;
  • 定义boolean类型变量: var bool1 = true 或者 var bool2 = false
  • 定义undefined类型变量: var var1; // 除了变量名什么都不写。

这是一些未完善的东西

外边距margin
id选择器 #id
浮动 float

CSS :hover 选择器

选择鼠标指针浮动在其上的元素,并设置其样式:

    a:hover
    { 
    background-color:yellow;
    }
    {# 这里的A标签在鼠标浮动其上之时,则会变色。#}

绝对定位与相对定位

前端页面收藏

我是结尾的锚点

Web前端幻术(持续更新)

标签:列表   移除   不容易   sublime   区域   span   索引   细节   tip   

原文地址:https://www.cnblogs.com/Asterism-2012/p/10048355.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!