1. html
body属性
属性 | 值 | 说明 |
---|---|---|
text | rgb(r,g,b) rgb(%r,%g,%b) #rrggbb #rgb colorname | 文本颜色 |
bgcolor | 背景颜色 | |
alink | 活动链接颜色 | |
link | 为访问链接默认颜色 | |
vlink | 一访问链接颜色 | |
background | url | 背景图像 |
topmargin | px | 上边距大小 |
leftmargin | px | 左边距大小 |
HTML常用特殊字符
HTML原代码 显示结果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
空格
1.1. 块级标签
前后断行显示,默认状态下占用一整行
具有一定的宽度和高度,可以通过设置块级标签的width、height 属性来控制
块级标签常用作容器.即可以再容纳其他块级标签或行级标签。
1.1.1. 标题标签
一级标题
h1-h6,可使用 align属性对齐
1.1.2. 段落标签
有勇气就会有奇迹。
可使用 align属性对齐
1.1.3. 水平线标签
【标签】
【属性】
size:尺寸,取值单位为 px(像素),可以省略
width:宽度,取值单位为px(像素)可以省略或百分比
color:颜色,取值自然颜色值
align:水平对齐方式,取值:left/center/right
1.1.4. 列表
有序列表
【属性】
type:指定列表项标志的类型,默认为数字排列
取值:1(默认值)/a/A/i/I(顺序标号为数字、英文字母、罗马字母)
start:定义起始值(数字),默认从1开始
取值:数字
无序列表
【属性】
type:指定无序列表的列表项标识
取值: disc,默认,实心圆/ circle空心圆/ square实心矩形 none,不显示标识
定义列表
- 列表中的标题内容
- 列表中的数据
使用场合:图文混排时使用
1.1.5. 表格
由元素定义。
【标签】
【属性】
width :设置表格的宽度
height:设置表格的高度
align:设置表格的对齐方式,取值: left/center/right
border:设置表格边框宽度
cellpadding:内边距(单元格边框与内容之间的距离)
cellspacing:外边距(单元格之间的距离)
bgcolor:设置表格的背景颜色
table中的子元素
【标签】 (创建表行)
【属性】
align:该行内容水平对齐方式,取值: left/center/right
valign:该行内容的垂直对齐方式,取值: top/middle/bottom
bgcolor:设置表格的背景颜色
【标签】 (创建单元格)
【属性】
align:内容水平对齐方式
valign:内容垂直对齐方式
width :宽度
height :高度
colspan=值(数字,合并单元格的个数);
rowspan=值(数字,合并单元格的个数);
【标签】 (表格标题)
【标签】 (表头,即列标题)
行标题或列标题,字体有加粗的效果,放在tr中
【标签】 (表头)
【标签】 表主体)
【标签】 (表尾)
其他运用
(1)不规则表格
- 跨列:从指定单元格位置处,横向向右合并几个(包含自己)单元格
属性:colspan=值(数字,合并单元格的个数);
- 跨行:从指定单元格位置处,纵向向下合并几个(包含自己)单元格
属性:rowspan=值(数字,合并单元格的个数);
(2)表格的嵌套
在单元格中去嵌套另一个表格,但嵌套的表格必须要放在td中
1.1.6. 表单
由
【表单控件主要属性】
type:根据不同的type属性值可以创建各种类型的输入字段
value:最终提交给服务器的值
name:控件的名称,提供给服务器使用,没有name,控件则无法提交
id:唯一标识,只能在当前页面使用,服务器不能用
disabled:禁用,不能被提交
常用的表单控件:
基本格式:
(1)文本框:
(2)密码框:
【专有属性】
maxlength:限制输入的字符数,取值:数字
readonly:设置文本控件只读
(3)单选按钮:
name相同表示同一组
(4)复选框:
【专有属性】
checked,设置默认被选中
(5)提交按钮:
(6)重置按钮:
(7)普通按钮:
属性:onclick 值:事件代码
(8)图片按钮:
(9)隐藏域:
(10)文件选择框:
**下拉选择框****select** **和** **option**
(11)多行文本框
只读和禁用属性
readonly:希望某个框内的内容只允许用户看,不能修改
disabled:因没达到使用的条件,限制用户使用
1.1.7. 分区元素
(1)块分区元素:
【特点】独立成行
【作用】页面布局
(2)行内分区元素:
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式
1.2. 行级标签
不会换行,多个元素会在一行内显示
可以嵌套行级标签
1.2.1. 文本样式
斜体:
粗体:
删除线:
下划线:
上标:
下标:
1.2.2. 换行元素
【标签】
1.2.3. 图像
【标签】
【属性】
src:图片地址(绝对/相对)
alt: 替代文本
title:提示文字
width:图像宽度
height:图像高度
border:边框宽度
1.2.4. 行范围标签span
1.2.5. font
【标签】
【属性】
size: 字号-1 ~+7
color:值rgb(r,g,b),#rrggbb,colorname
face:字体
1.2.6. 内容居中
文字、图片、其他对象
1.2.7. 滚动文字,图片 marquee
[标签]
1.2.8. pre预格式化
预格式化文本
1.2.9. 链接
【标签】
【属性】
href:链接地址(要跳转到的页面的地址)
target:目标,打开新网页的形式
取值:
_blank:在新标签页中打开
_self:在自身页面中打开(默认值)
frameName:在指定框架中打开链接
title:鼠标放到链接上的提示
锚链接:
1、定义标记(锚):目标位置的
or 目标位置的
2、设置链接到标记位置:当前位置
框架
frameset框架集
框架窗口见的跳转:
属性
值
描述
frameborder
0 1
HTML5 不支持。规定是否显示框架周围的边框。
longdesc
URL
HTML5 不支持。规定一个包含有关框架内容的长描述的页面。
marginheight
pixels
HTML5 不支持。规定框架的上方和下方的边距。
marginwidth
pixels
HTML5 不支持。规定框架的左侧和右侧的边距。
name
name
HTML5 不支持。规定框架的名称。
noresize
noresize
HTML5 不支持。规定无法调整框架的大小。
scrolling
yes no auto
HTML5 不支持。规定是否在框架中显示滚动条。
src
URL
HTML5 不支持。规定在框架中显示的文档的 URL。
iframe
和不同,放在标签内
属性
值
描述
frameborder
0 1
HTML5 不支持。规定是否显示框架周围的边框。
marginheight
pixels
HTML5 不支持。规定框架的上方和下方的边距。
marginwidth
pixels
HTML5 不支持。规定框架的左侧和右侧的边距。
name
name
规定框架的名称。
scrolling
yes no auto
HTML5 不支持。规定是否在框架中显示滚动条。
src
*URL
规定在框架中显示的文档的 URL。
align
left,top,bottom,middle
不赞成使用,请用样式
height
px %
设置框架高度
width
2 CSS
基本语法结构
1.标签选择器
标签名{ 属性名1: 属性值1;
属性名2: 属性值2;
}
2.类选择器
类选择器是定义某类样式,让多个HTML 元素共享,这些样式是可以共享和代码复用的。
(1)定义样式:
.类名{ 属性名1: 属性值1;
属性名2: 属性值2;
}
(2)应用样式:
<标签名 class=“类名1 类名2">标签内容标签名>
注意:定义时类名前有个点号,应用样式时则不需要点号
嵌套选择器:
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
3.ID选择器
ID选择器用于修饰某个指定的页面元素或区块,这些样式是对应ID标识的HTML 元素所独占的
(1)定义样式
#ID标识名{ 属性名1: 属性值1;
属性名2: 属性值2;
}
(2)应用样式
<标签名 id=“ID标识名">标签内容标签名>
注意:定义ID选择器时有个井号,但给HTML 标签设置ID 属性时不需要
4.伪类选择器
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
##当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
CSS 中规定样式的优先级规则为:
行内样式表> 内部样式表> 外部样式表
ID 选择器 > 类选择器 > 标签选择器
插入样式表
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和字体。
这是一个段落。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
1)链接外部样式表
2)外部样式表
浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
属性
文本和字体属性
属性
含义
color
颜色
line-height
行高(即行间距),常用取值为25px、28px
text-align
对齐方式,常用取值为left、 center、 right
letter-spacing
字符间距,常用取值3px、8px
text-decoration
文本修饰,line style color的复合,常用取值underline(下划线) line-through(删除线)none(默认)
font
"font-style font-variant font-weight font-size/line-height font-family" font-size和font-family的值是必需的。
font-family
font-size和font-family的值是必需的。字体 宋体、隶书、楷体、黑体
font-size
大小 small、medium、large
font-weight
粗细 normal bold bolder lighter 100~900
font-style
正常、斜体 normal、italic
背景属性
属性
含义
background-color
背景颜色
background-image
背景图片 值: url(“路径”)
background-repeat
背景平铺方式 no-repeat、 repeat-x、 repeat-y、 repeat()
background-attachment
scroll背景图片随着页面的滚动而滚动,默认的fixed背景图片不随着页面的滚动
background-position
偏移位置 x%,y% or x,y or left right top bottom
列表属性
属性
含义
list-style-type
值 none disc实心圆默认 circle圈 square实心方块 decimal数字
list-style-position
inside、outside(默认)
list-style-image
url(“路径”)
list-style
按 type position image 顺序,可以缺省
盒子属性
属性
含义
margin
设置外边距,顺序是上下左右,可以缺省,值可以是 px、%,auto(默认)
margin-(top|right|bottom|left)
单独设置一边的外边距
border-color
属性用于设置边框的颜色
border-width
可以指定长度值,也可用thick 、medium(默认值) 和 thin。
border-style
none无 dashed虚线 solid实线 double双线 inset陷入 outset突出 可以单独设置某一边 例 border-top-style:dashed
border-radius
设置外边框圆角。使用一个半径时确定一个圆形,使用两个半径时确定一个椭圆。
border
按width style color顺序设置复合边框,可缺省。
outline-width outline-style outline-color outline
元素周围轮廓线
padding
设置内边距,顺序是上下左右,可以缺省,值可以是 px、%,auto(默认)
padding-(top|right|bottom|left)
单独设置一边的内边距
尺寸
属性
含义
height
元素高度,该属性不包括填充,边框和页边距 值:auto, px, %
width
line-height
行高
max-height
最大高度
cursor
移动到该项时光标的形状:url auto crosshair十字 pointer手 move移动 text文本 wait沙漏 help问号
overflow
设置当元素的内容溢出其区域时发生的事情。auto hidden scroll visible
display
none此元素不会被显示且不占空间 block显示为块级元素,此元素前后会带有换行符。inline显示为内联元素,元素前后没有换行符。
请把鼠标移动到单词上,可以看到鼠标指针发生变化:
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
DIV+CSS布局
属性
含义
float
指定一个盒子(元素)是否可以浮动。值: left right none
clear
如果前一个元素存在左浮动或右浮动,则换行以区隔 值: right left both none
浮动的三大显著特征:
- DIV块元素失去“块状”换行显示特征,变为行内元素
- 紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
- 占据行内元素的空间,导致行内元素围绕显示
div设置width height (%)嵌套 进行布局
三行两列模式
div+css布局
3. JavaScript
基本语法
与html结合方式
1. 内部JS:
* 定义
btn
function fun(){
}
document.getElementById("btn").onclick = fun;
//可以使用匿名函数
document.getElementById("btn").onclick = function (){};
addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。
element.addEventListener(event, function, useCapture*);
element.removeEventListener("mousemove", myFunction);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。默认值为 false, 即冒泡传递,
在冒泡中,内部元素的事件会先被触发;当值为 true 时, 事件使用捕获传递。
使用示例:
document.getElementById("myDiv").addEventListener("mouseover", myFunction);
注册事件一般使用
window.onload=function(){
document.getElementById("btn").onclick = function (){
//鼠标点滴事件
};
}
btn
手动触发事件
元素.事件();
document.getElementById("text").blur();//手动让文本框失去焦点
创建新的 HTML 元素 (节点) - appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。
这是一个段落。
这是另外一个段落。
以上的实例我们使用了 appendChild() 方法,它用于添加新元素到尾部。
如果我们需要将新元素添加到特殊,可以使用 insertBefore() 方法:
这是一个段落。
这是另外一个段落。
移除已存在的元素
parent.removeChild(child);
替换 HTML 元素
parent.replaceChild(new_child, child);//在parent容器中用new_child取代child
案例
键盘按下——捕获回车键
复选框的全选和取消全选
音乐
电影
运动
表单提交验证
其他用法
跳转页面
1. 浏览器地址栏直接写url
2. 超链接
3. 提交表单
4. window.open(url,target)
5. window.location.href=url window.location=url
document.location.href=url document.location=url
你可能感兴趣的:(2022-03-05)