Web前端幻术（持续更新）

*跳转到文章结尾* 文章链接：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可部分遵守，也可全部遵守，看开发要求。

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

注释

上线的时候，把注释中无意义的东西删掉，包括没用的空格删掉，这对于网络传输是有意义的。
html中的注释：

<!--我是注释-->

html标题与段落

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

修饰标签，div标签与span标签

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

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

图片添加的img标签是单标签，行内标签src与alt我们约定必填

代码与效果:
src:指向图片路径

<a href="#" onclick="click_it()"><img src="images/Connect_logo_3.png"></a>

alt:在图片无法显示时候显示指定内容

<a href="#" onclick="click_it()"><img src="" alt="QQ登陆的图片"></a>

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 border="1">
<!--第一行的表头-->
  <tr>
    <th>Name</th>
    <th>age</th>
    <th>Gender</th>
  </tr>

<!--以下是表格信息-->
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>female</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>25</td>
    <td>male</td>
  </tr>
</table>

旧版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>

鼠标悬停在一个标签上时，显示文字

Html如何在新的页面中打开?

<A href="www.baidu.com" target="_blank">

返回目录

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
命名规范的三点：

区别大小写，顺便踩一脚《悟空传》电影版
第一个字符必须是字母、下划线或者$符号
其他字字符可以是字母、下划线、$、数字

定义number类型变量：var num1 = 1;
定义string类型变量: var str1 = 'k';
定义boolean类型变量: var bool1 = true 或者 var bool2 = false
定义undefined类型变量: var var1; // 除了变量名什么都不写。

这是一些未完善的东西

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

返回目录

CSS

css: hover 选择器
选择鼠标指针浮动在其上的元素，并设置其样式：

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

绝对定位与相对定位

前端页面收藏

**点我回到文章开头再看看**

posted on 2018-12-01 09:57 墨书韶光（魏泯i）阅读(227) 评论(0) 编辑收藏举报

刷新页面返回顶部

Web前端幻术（持续更新）

目录:

Html

Css

JavaScript

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

前端说的就是网页的前端

HTMl

H5(html)与XHTML1.0

html文档规范

注释

html标题与段落

修饰标签，div标签与span标签

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

列表

html表格

旧版table布局方式

html表单

input的属性

html内嵌框架

Html如何在新的页面中打开?

Javascript

JavaScript介绍

JavaScrtipy的误解

ECMAScript标准

JavaScript嵌入页面的方式

变量

这是一些未完善的东西

CSS

绝对定位与相对定位

导航

公告