

首页  思维导图  详情



html前端

2018-11-12 12:02:14   127  举报





AI智能生成

html

前端开发

模版推荐

作者其他创作

大纲/内容

HTML

body部分

字体标签

h1-h6标签

粗体标签：<b>

下划线标签：<u>

斜体标签：<em>

特殊字符 

空格：&nbsp

小于号：&lt

大于号：&gt

版权：&copy

排版标签

行级标签

段落标签： <p>

p标签是一个文本级标签，里面只能放文字、图片、表单元素

<span>

span标签是一个文本级标签，里面只能放文字、图片、表单元素

超链接

<a>

外部链接 <a href="new.html">点击进入新网页</a>

跳转顶部： <a href="#">跳转顶部</a>

a标签的属性

href: 目标URL

title: 鼠标悬停文本

name: 设置锚点名称

target：设置浏览器用什么方式打开目标页面

_self:在同一个网页打开(默认）

_blank:在新窗口打开

_parent:在父窗口打开

_top：在顶级窗口显示

a标签是一个文本级标签

一般是p包含a

图片标签: <img>

src属性

块级标签

<div>

<ul> 无序列表标签

ul的儿子是li<br>li只能在包裹在ul里面

<ol> 有序列表标签

ol的儿子只能是li

<table> 表格标签

th定义表头

tr定义表行

td定义表单元格式数据

form表单标签

action

定义表单被提交时发生的动作<br>提交给服务器处理程序的地址

method

作用：定义表单提交数据时的方式

取值

get

默认值，明文提交，所提交的数据可以显示在地址上，安全性低

提交数据大小有限制，最大为2KB

post

隐式提交-所提交的内容不会显示到地址栏上，安全性高

无大小限制

enctype

编码类型，即表单数据进行编码的方式<br>允许表单将什么样的数据提交给服务器

取值：1.application/x-www-form-urlencoded<br> 默认。允许将普通字符，特殊字符，都提交给服务器，不允许提交文件<br>

2.multipart/form-data，允许被将文件提交给服务器<br>

3.text/plain 只允许提交普通字符。特殊字符，文件等都无法提交<br>

注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data<br>

表达控件分类

textarea 文本区域

作用：允许用户录入多行数据到表单控件中

属性

cols 指定文本区域列数，变相设置元素的宽度

rows 指定文本区域的行数，变相设置当前元素的高度

select和option选项框

select属性

size 取值大于1的话则为滚动列表<br>否则就是下拉选项框

multiple 设置多选

option属性

value 选项的值

selected 预选中<br>如果没有设置selected属性的话，那默认会是选项框中的第一项

input 组元素

type

button

普通按钮，与form表单没有任何关系

text 明文显示用户输入的数据

password 密文显示用户输入的数据

radio 单选按钮 checkbox复选按钮

checked设置值后被选中

submit 负责将表中的表单控件提交给服务器

file 上传文件所用

value 控件的值

head部分

title

在浏览器标签中显示的标题名字

meta

http-equiv属性

重定向：几秒后跳转对应的网址

指定文档内容类型和编码类型

IE浏览器以最高级模式渲染当前网页

name属性

name属性主要是给搜索引擎看的，设置以后搜索引擎更容易搜索到

link

定义文档与外部资源的关系

style

定义内部样式与网页的关系

声明部分

HTML4.01

XHTML1.0

CSS

css引入方式

内嵌式  <div style="font-size:10px;color:yellwo">

内联式 <br><style type="text/css"<br>.box {<br>font-size:30px;<br>color:yellow;<br>}<br></style><br><br>

外链式 <br><link rel="stylesheet" type="text/css" hrel="./css/index.css">

选择器

基础选择器

标签选择器

统配符选择器

ID选择器

类选择器

高级选择器

ul>li 子代选择器

只能选中儿子，而不能选中孙子以后的

ul a 后代选择器

可以选中所有后代，包括儿子孙子

li+a 相邻选择器

选择到紧贴li标签后的一个a标签，注意！必须是紧挨着，中间隔了其他标签就不行

li~a 兄弟选择器

选中li标签后的所有兄弟级别的a标签

属性选择器

E[attr]

具有attr属性的E元素

E[attr="val"]

具有attr属性且属性等于val的元素

伪类选择器

E:link

a标签在未访问是的样式

E:visited

a标签在访问过后的样式

E:hover

a标签在鼠标悬停的时候样式

E:active

a标签在访问时的样式（鼠标点击与释放之间）

伪元素选择器

E:before

设置在对象前发生的内容，必须定义content属性

E:after

设置在对象后发生的内容，必须定义content属性

选择器的权重

行内样式1000>ID选择器100>类选择器10>标签选择器1

字体font

font-style

指定文本样式

normail 正常字体

italic 斜体字体

font-weight

指定文本字体的粗细

normal 正常字体 400

bold 粗体 700

bolder 更粗

font-size

指定字体的大小

font-family

指定字体

颜色 color

文本 text

text-align

left 左对齐

center 居中

right 右对齐

justify 两端对齐

text-indent

文本的缩进

text-decoration

none 文字无装饰

underline 下划线

overline 上划线

line-through 删除线

line-height

设置行高=盒子的高度即垂直居中

列表 ul ol

list-style

列表样式

circle 空心圆

none  无样式

square 正方形

lower-lation 英文abc

背景 background

盒模型

width

height

border边框

border-width

设置边框的线宽

border-style

设置边框线的种类

border-color

设置边框颜色

border-radius

设置边框圆形

border-radius:50%;

padding 内边框

内容区域(content)到边框(border)的距离

margin 外边距

注意margin塌陷问题

浮动

浮动效果

float:left

float:right

浮动产生的问题

浮动的特性

浮动的元素脱标

脱离标准流，飘起来了。、

浮动的元素互相贴靠

浮动的元素字围效果

收缩的效果

定位

z-index

display

display:block

将内联标签设置为块级标签

display:inline

将块级标签设置为内联标签

display:inline-block

设置成内联块级标签，在一行内显示又可以设置长宽

display:none

隐藏标签

visibility:none

隐藏标签

javascript

ECMAscript5基础语法

数据类型

基本数据类型

number

string

boolean

null

undefined

引用数据类型

Function

Object

Arrary

String

Date

运算符

赋值运算

算数运算

加法

减法

乘法

除法

取余

自增

自减

比较运算

等于

===

等同于（值和类型都相等）

不等于

!===

不等同于（值和类型有一个不相等，或者都不相等）

数据类型转换

将数字转换成字符串

String()

toString()

将字符串转换成数字

Number()

parseInt()

解析成数字

parseFloat()

流程控制

if-else

&& ||

&& 需要两个条件都符合

|| 只需要有一个符合即可

switch

while

1、初始化循环变量

2、判断循环条件

3、更新循环变量

for

常用内置对象

Arry 数组

concat()

把几个数组合并

join()

将数组用指定字符串连接起来

pop()

移除数组最后一个元素

shift()

移除数组第一个元素

unshift()

数组开头添加一个元素

slice(start,end)

类似于切片

push()

向数组最后追求一个元素

reverse()

将数组反转

sort

对数组排序

isArray()

判断是否为数组

String 字符串

chartAt()

返回指定索引位置的字符

concat()

字符串拼接

replace(a,b)

替换字符串a和b

indexof()

返回字符串的索引，没有字符串就返回-1

slice(start, end)

切片

split("a", 1)

toLowerCase()

转小写

toUpperCase()

转大写

Date

getDate()

Date()

Math

Math.ceil()

向上取整

Math.floor

向下取整

Math.max(a,b)

取最大值

Math.min(a,b)

取最小值

Math.random()

取随机数

function

json

类型

对象

数组

序列化、反序列化

JSON.parse()

JSON.stringify()

DOM

什么是HTML DOM

文档对象模型

定义了访问和操作html文档的标准方法

DOM节点

节点类型

文档节点 document

整个文档

元素节点 element

每个html标签

属性节点 attribute

html属性

文本节点 text

html元素中的文本

节点查找

直接查找节点

按ID查找

document.getElementById('idname')

按类名查找

document.getElementsByClassName('classname')

得到一个符合条件的数组

按标签查找

document.getElementByTagName('tagname')

得到一个符合条件的数组

导航查找(通过一个标签的位置去查找另一个标签)

parentElement

父节点标签元素

children

所有子标签

firstElementChildren

第一个子标签元素

lastElementChildren

最后一个子标签元素

nextElementSibling

下一个兄弟标签元素

previousElementSibling

上一个兄弟标签元素

节点操作

创造节点

document.createElement(标签名)

例子：var tag=document.createElement(“input")

添加节点

父节点.appendChild(子标签)

父节点.insertBefore(子标签名,目标标签名)

插入到目标标签前面

删除节点

父节点.removeChild

替换节点

somenode.replaceChild(newnode, 某个节点);

文本节点值的操作

innerText

innerHTML

value

input

select

textarea

节点属性的操作

elementNode.setAttribute(name,value)

设置属性

elementNode.getAttribute(属性名)

查询属性

elementNode.removeAttribute(“属性名”);

删除属性

节点类名的操作

elementNode.className

查询类名

elementNode.classList.add('增加的类名')

增加类名

elementNode.classList.remove('增加的类名')

节点样式操作

elementNode.style.color="blue";

节点事件

onclick

鼠标点击

ondblclick

鼠标双击

onfocus

鼠标聚焦

onblur

鼠标失去聚焦

onchange

区域内容被改变(表单元素)

onkeydown

键盘被按下

onkeypress

键盘按下并松开

onkeyup

键盘松开

onload

页面或图片加载完成

onmouseover

鼠标悬停

onmouseout

鼠标离开

onsubmit 

表单提交事件

BOM

window.localtion

window.reload()

window.open()

 Collect

Get Started

html转换流程

 Collect

Get Started

HTML基础

 Collect

Get Started

第十六章 HTML5脚本编程

 Collect

Get Started

HTML





0 条评论

下一页