前端知识

前端知识框架

HTML

超文本标记语言，一种规范，标准，<标签></标签尾>

分为两个部分：头（head，网页信息）,网页主体（body，页面当中显示的内容）

Head：

<title></title>

<meta> 网页元信息，关键字，文字编码

<base>:基本信息，配置网页相对路径的根目录

<style>

<script>

 

Body:

文本标签：<b>,<i>,<h1>….<h6>

文本布局：<p>,<br>,<ul>,<li>,<ol>,<li>

图像标签：<img src=””>

超链接：<a href=”” title=”” target=”” >

页面布局：<table><tr><td>   ,  <div>

表单标签：<form action=”” method=””><input type=”text,checkbox,radio,password,hidden”><select name><option value=”ss”>shshs</option>

<textarea>

 

CSS

级联样式表，定义标签样式

样式规则：

样式1：样式值;样式2：样式值2;

语法：

选择符{样式1：样式值;样式2：样式值2}

选择符---对应某个或者某些标签

 

六大选择符：

通配选择符，*

类型选择符，p{样式1：样式值;样式2：样式值2}

类选择符，对应标签的class属性  .class名{样式1：样式值;样式2：样式值2}

ID选择符,对应标签的ID属性    #ID名{样式1：样式值;样式2：样式值2}

包含选择符 table tr #a{样式1：样式值;样式2：样式值2}

分组选择符  a,p,table{样式1：样式值;样式2：样式值2}

选择符优先级：ID>类选择符>类型>通配

 

应用位置：

内嵌样式、行内样式、外联样式

就近原则

 

常用属性：

字体大小，字体单位（查）

 

布局属性：

margin（外边距） border（边框大小） padding（内边距）

 

背景属性：

background

表单样式

 

Div+css：
根据盒子模型，标签类别定义网页布局

 

标签分类：

内联元素（只占用盒子模型的空间），块状元素（占满父元素的一整行）

普通文本标签+超链接标签都是内联元素

块状元素：div，p，table，h

 

网页布局用定位

Position样式：

relative：仍然占用原来的位置（普通流定位），在原来的位置的基础上偏移

absolute:不占用普通流位置，偏移按照使用了position属性的父元素的位置进行偏移，如果父元素没有使用position，则按照浏览器窗口进行偏移

 

浮动：块状元素横向排列，float，不占用普通流位置，如果想保留原位置，清除浮动（<div style="clear:both"></div>）

 

JS

 

概念：

运行在浏览器当中的脚本语言

 

目的：

网页交互，数据验证

 

特征：

脚本语言（不能独立运行的语言，没有main函数）

解释性语言（逐条解释执行，运行的时候再翻译然后再执行）

弱类型（没有类型的概念，所有变量的定义都用var）

事件驱动执行（标签响应事件，键盘鼠标响应事件）

基于对象：String，Math，Date，Array

DOM（Document Object Model）编程：document对象下所有属性及方法，操作的是文档所有元素

BOM编程

 

应用位置：

head，body，外联js，行内事件

 

运行：

事件驱动执行，自动执行

 

语法：

变量定义用var 运算符和表达式同Java

从dom中获取的内容都是字符串，运算时可以使用类型转换parseInt，parseFloat等

 

Js自定义函数：

function 函数名（[参数列表]）{

执行代码;

[return]

}

 

获取网页内容

网页对象可以通过document对象提供的函数获取，获取到对象可以操作网页对象的属性

表单标签获取内容：document.getElementById("t1").value

普通标签获取内容：document.getElementById("t1").innerText或者innerHTML

innerHTML可以解析html标签

 

 

Jquery