[学习交流] 【石家庄校区】Web基础知识梳理

本帖最后由小石姐姐于 2018-5-4 10:17 编辑

【石家庄校区】WEB基础知识梳理

1、HTML

HTML--超文本标记语言，作用：用于静态页面的制作。

通过一组标签的形式描述事务的一门语言。

文件扩展名是.html或者.htm

整体结构

HTML常用标签及各个标签对应的常用属性

<font></font>标签--字体标签--用于设置文字

属性：size---设置字体的大小----1~7

color----设置字体颜色---可以用英文单词或者16进制数设置#00000~#FFFFFF #000~#FFF

face-----设置字体样式

h标签:<h1>~<h6>---标题标签---独占一行

p标签：<p></p>----段落标签

b标签：<b></b>----加粗标签

i标签：<i></i>-------斜体标签

u标签：<u></u>-----下划线标签

居中标签：<center></center>

水平线标签：<hr />

原生标签：<pre></pre>

图片引入标签：<img />

img标签的属性：src :图片来源路径

width ：图片宽度

height ：图片高度

alt :当图片无法显示时提示的内容

超链接标签：<a></a>

属性：href :超链接跳转的路径

target:打开方式---（_self或者_blank）

列表标签：有序列表<ol><li></li></ol>---属性：type

无序列表<ul><li></li></ul>---属性：type

表格标签：<table>

</table>

<td>合并单元格属性：colspan="列数" rowspan="行数"

表单标签： <form></form>

属性：action：提交的路径---默认提交到当前页

method：请求的方式---get和post两种----默认get方式

<input type="text" /> :文本输入框---属性：name/value/size/maxlength/readonly

<input type="password" /> :密码输入框---属性：name/value/size/maxlength

<input type="radio" /> :单选框----属性：name/value/checked

<input type=“checkbox”/> :复选框---属性：name/value/checked

<input type="button" /> 普通按钮

<input type="submit" /> 提交按钮

<input type="reset" /> 重置按钮

<input type="file" /> 文件上传

<input type="hidden" /> 隐藏字段

<input type="image" /> 图片按钮

<select><option></option></select>下拉列表

<textarea></textarea>文本域

<input type="email"/>邮箱

<input type="date" />时间

<input type="number" />数字

<input type="color" />颜色

框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.

属性: rows cols

使用<frame>标签，frame代表切分的每个部分.<frame></frame>标签的重要属性 src 和 name

2、CSS

<div></div> :默认一个div独占一行.-----浮动属性：fload --------清除浮动：clear

<span></span> :默认在同一行.

CSS的基本语法:

CSS的基本语法通常包含两个部分：一个是选择器，一个声明.

选择器{属性:属性值;属性:属性值...}

CSS的引入的方式:

行内样式：直接在HTML的元素上使用style属性设置CSS.

页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.

外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.

选择器：

元素选择器、id选择器、类选择器

盒子模型：

border

margin

padding

3、JS

ECMASCRIPT:语法
记跟java语法不一致的地方：
   弱变量类型的语言：
      体现在变量的声明上:var
      ===：全等：类型和值都相等的时候才为true
  内置对象：
   Date：
      new Date().getTime():毫秒值/缓存
  js中的事件：以on开头
   鼠标类：
      onclick:单击
      ondblclick:双击
      onmouseover:鼠标在某个元素上面
      onmousemove:移动
      onmouseout:离开
键盘类：
      onkeyup:弹起
焦点类：
      onfocus:获得焦点
      onblur:失去焦点
表单提交：
      onsubmit
页面的加载：
      onload
下拉列表的改变：
      onchange
BOM：浏览器对象模型
   window:
         setInterval()/clearInterval()
         setTimeout()/clearTimeout()
         alert()：一般做调试用
         confirm()：确认框
         prompt()：可输入的对话框
         open():打开一个小窗口
   history:
      history.go(-1)/history.back()
location:
      location.href="":可以用作页面的跳转
DOM：文档对象模型
   document:
      整个html文档加载到内存中可以用document对象表示
element: 标签
attribute:标签上的属性
text:文本
  获得页面的元素：
   document.getElemenById():只能获得到一个元素
   document.getElementsByName();获得的是元素的一个集合
  创建元素：
   document.createElement():创建元素
   document.createTextNode():创建文本
  添加元素：
   element.appendChild()
  移除元素：
   element.removeChild()

4、JQueury

$(function(){

});

选择器：

id选择器

* 用法:$(“#id”)

类选择器

* 用法:$(“.类名”)

元素选择器

* 用法:$(“元素名称”)

通配符选择器

* 用法:$(“*”)

并列选择器

* 用法:$(“选择器,选择器,选择器”)

后代选择器：使用空格所有后代包含孙子及以下的元素

子元素选择器：使用> 第一层的元素（儿子）

下一个元素 : 使用+ 下一个同辈元素

兄弟元素 : 使用~ 后面所有的同辈元素

遍历的方式一：

* $.each(objects,function(i,n){

});

遍历的方式二:

* $(“”).each(function(i,n){

});

事件------与CSS功能相同，只不过写法上把on去掉

5、Bootstrap

响应式

栅格系统

使用.row样式定义栅格的行.

定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n

引入方式

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【石家庄校区】Web基础知识梳理

0 个回复