html前端
2018-11-12 12:02:14 127 举报AI智能生成
html
作者其他创作
大纲/内容
HTML
body部分
字体标签
h1-h6标签
粗体标签：<b>
下划线标签：<u>
斜体标签：<em>
特殊字符
空格： 
小于号：<
大于号：>
版权：©
排版标签
行级标签
段落标签： <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
li只能在包裹在ul里面
li只能在包裹在ul里面
<ol> 有序列表标签
ol的儿子只能是li
<table> 表格标签
th定义表头
tr定义表行
td定义表单元格式数据
form表单标签
action
定义表单被提交时发生的动作
提交给服务器处理程序的地址
提交给服务器处理程序的地址
method
作用：定义表单提交数据时的方式
取值
get
默认值，明文提交，所提交的数据可以显示在地址上，安全性低
提交数据大小有限制，最大为2KB
post
隐式提交-所提交的内容不会显示到地址栏上，安全性高
无大小限制
enctype
编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器
允许表单将什么样的数据提交给服务器
取值：1.application/x-www-form-urlencoded
默认。 允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
默认。 允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件
2.multipart/form-data，允许被将文件提交给服务器
3.text/plain 只允许提交普通字符。特殊字符，文件等都无法提交
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
表达控件分类
textarea 文本区域
作用：允许用户录入多行数据到表单控件中
属性
cols 指定文本区域列数，变相设置元素的宽度
rows 指定文本区域的行数，变相设置当前元素的高度
select和option选项框
select属性
size 取值大于1的话 则为滚动列表
否则就是下拉选项框
否则就是下拉选项框
multiple 设置多选
option属性
value 选项的值
selected 预选中
如果没有设置selected属性的话，那默认会是选项框中的第一项
如果没有设置selected属性的话，那默认会是选项框中的第一项
input 组元素
type
button
普通按钮，与form表单没有任何关系
text 明文显示用户输入的数据
<input type="text">
password 密文显示用户输入的数据
<input type="password">
radio 单选按钮 checkbox复选按钮
checked设置值后被选中
submit 负责将表中的表单控件提交给服务器
file 上传文件所用
value 控件的值
head部分
title
在浏览器标签中显示的标题名字
meta
http-equiv属性
重定向：几秒后跳转对应的网址
<meta http-equiv='refresh' content='2,url=https://www.baidu.com
指定文档内容类型和编码类型
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
IE浏览器以最高级模式渲染当前网页
<meta http-equiv="x-ua-compatible" content="IE=edge">
name属性
name属性主要是给搜索引擎看的，设置以后搜索引擎更容易搜索到
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
link
定义文档与外部资源的关系
style
定义内部样式与网页的关系
<link rel='定义文档与链接文档之间的关系' type='被链接文档类型' href='被链接文档位置'>
声明部分
HTML4.01
XHTML1.0
CSS
css引入方式
内嵌式 <div style="font-size:10px;color:yellwo">
内联式
<style type="text/css"
.box {
font-size:30px;
color:yellow;
}
</style>
<style type="text/css"
.box {
font-size:30px;
color:yellow;
}
</style>
外链式
<link rel="stylesheet" type="text/css" hrel="./css/index.css">
<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()
收藏
职业：暂无
0 条评论
下一页
为你推荐
查看更多
