Web前端幻术（持续更新）

zoukankan html css js c++ java

Web前端幻术（持续更新）
title: 前端法术
tags: 前端,Html!][1],Css,JavaScript
grammar_cjkRuby: true

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

目录:

Html

Css

JavaScript
目录有空会更加完善。 # 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设计师和前端工程师。
- 交互效果，处理数据，页面改口为界面
- 技术更新特别快
- 前端三大块
  
  HTML：页面结构
  
  CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
  
  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="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 />是单标签：换行
-  与&emsp;空格实体和缩进实体
- 网页中写"<"或是">"会被转义，所以写做">“与”<“
- <span></span>行内标签，没有具体语义，表示一行内的一小段内容，在我看来span标签是div的儿子，但是两者没有可替代性。
- <div></div>标签是块级标签，是最常用的标签之一。表示一块内容，没有具体语义。
- 语义化标签：
  
  em标签行内元素，表示语气中的强调词
  
  i标签行内元素，原本没有语义，w3c强加了语义，表示专业词汇
  
  b标签行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
  
  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常用属性：
  
  border 定义表格的边框
  
  cellpadding 定义单元格内内容与边框的距离（内边距）
  
  cellspacing 定义单元格与单元格之间的距离(外边距)
  
  align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
  
  valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
  
  colspan 设置单元格水平合并
  
  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
- 命名规范的三点：
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

css: hover 选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
```
    a:hover
    { 
    background-color:yellow;
    }
    {# 这里的A标签在鼠标浮动其上之时，则会变色。#}
```
绝对定位与相对定位

前端页面收藏

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

相关阅读:
TimeSpan的操作
 List<T>的排序和筛选
 编程中的一些概念
 SVN返回版本
 语音播报
 优化编译器的局限性
 Inline Functions 与它的形式参数和局部变量
 函数的效能 & 指向 Member Functions 的指针与其效能
 虚拟继承下 Virtual Function 的语意
 多重继承下 Virtual Function 的语意

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

Web前端幻术（持续更新）

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

目录:

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

绝对定位与相对定位

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