05 HTML & CSS
2019-03-12 09:31:25 16 举报
AI智能生成
HTML & CSS
作者其他创作
大纲/内容
HTML
定义和编写
1.不是编程语言,是一种标记语言;
2.HTML使用标记标签来描述网页;
2.HTML使用标记标签来描述网页;
1.使用记事本编写
2.使用专门开发网页的工具
2.使用专门开发网页的工具
基本语法
结构
图片1
注释
<!--注释内容-->
定义标签
HTML标签必须成对存在
HTML开始标签和结束标签中间是标签内容。标签内容可以是文本,也可以是其他标签;
标签名对大小写不敏感
标签名是固定的,不能够任意修改
常用标签
基本标签
字符实体
格式化标签
HTML属性
属性值应该使用引号引起来,单引号和双引号都可以
一个标签可以指定零个或多个属性,多个属性之间使用空格隔开
属性名和属性值对大小写不敏感,但是,建议使用小写
列表标签
<ul></ul>
<ol></ol>
<dl></dl>
自定义列表以<dl></dl>开始和结束
其中的每一项以<dt></dt>开始和结束
每一项的定义以<dd></dd>开始和结束
超链接标签
定义和作用
HTML使用超链接连接网络上的其他资源,可以是一个HTML页面,一幅图像,一个声音或视频文件等等
target属性
target属性用于指定资源的打开方式
锚点定位
定义锚点
将#符号和锚名称添加到URL末端,这样就可以跳转到锚位置
图像标签
src属性
src属性用于指定图像的源位置
alt属性
alt属性用来为图像定义一串预备的可替换的文本
制作热点图
我们可以把一张图片划分为不同的区域,当用户点击某一个区域,就会链接到指定的资源
表格标签
表格边框属性
border
设置表格边框的宽度。默认情况下,如果没有指定显示边框,表格将不会显示边框
cellspacing
设置单元格与单元格之间的距离
跨行和跨列
rowspan:跨行,即指定单元格向下合并
colspan:跨列,即指定单元格向右合并
框架标签
标签
frameset
定义一个框架集,可以包含多个frame
frame
一个frame代表一个页面
frameset标签属性
rows
指定每个frame的宽度。如果指定了rows属性,那么就按照行进行切割。
它的值可以是像素px、百分比或星号*
它的值可以是像素px、百分比或星号*
cols
指定每一个frame的宽度。如果指定了cols属性,那么就按照列进行切割。
它的值可以是像素px、百分比或星号*
它的值可以是像素px、百分比或星号*
注意
framset标签不能够包含在body标签里面
表单标签
常用表单标签
form
所有表单标签的根标签
input
type="text"
type="password"
type="radio"
type="checkbox"
type="button"
type="date"
type="submit"
textarea
文本域
select
下拉列表框
option
下拉列表框
form标签的属性
action
指定提交地址
method
指定表单的提交方式,例如:Get和Post
enctype
指定表单数据在发送到服务器之前应该如何编码
表单标签的基本属性
id
指定元素的唯一标识
name
指定元素的名字
style
指定元素的内联样式
class
指定元素的类名
title
指定提示文本
placeholder
指定输入框提示信息
事件属性
窗口事件
窗口事件仅在body和frameset标签中才有效
表单元素事件
表单元素事件仅在表单元素中才有效
鼠标事件
注意:键盘事件和鼠标事件在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、
meta、param、script、style 以及 title 元素
meta、param、script、style 以及 title 元素
键盘事件
CSS
定义和编写
Cascading Style Sheets
是一种用来美化网页的计算机语言
1.使得网页内容与网页表现分离;
2.可以同时对一个或多个元素进行样式化,极大提高工作效率;
2.可以同时对一个或多个元素进行样式化,极大提高工作效率;
编写
在style标签中编写CSS
引入外部CSS文件
新建一个CSS文件;
在CSS文件中编写CSS代码
在HTML中引入CSS文件
在元素的style属性中编写CSS
样式优先级
浏览器缺省设置
1
外部样式表
2
内部样式表(位于<head>标签内部)
3
内联样式表(位于HTML元素内部)
4
css注释
/*注释内容*/
CSS选择器(selector)
标签选择器
tagName {}
类选择器
.tagName {}
ID选择器
#tagName {}
交集选择器
parentTag childTag {}
并集选择器
parentTag, childTag {}
通用选择器
* {}
伪类选择器
元素状态
:link
未访问状态,只对a标签有效
:visited
已访问状态,只对a标签有效
:hover
鼠标滑过时候的状态
:active
鼠标选的时候的状态
tbody tr:hover {}
CSS属性(property)与值(value)
CSS背景属性
background-repeat
repeat-x
图像在水平方向上重复
repeat-y
图像在垂直方向上重复
no-repeat
不允许图像在任何方向上重复(平铺)
background-position
可以是长度值,例如:50px 100px(图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上)
可以是百分比,例如:50% 50%(图像的左上角放置在元素内边距的中心)
CSS字体和文本属性
相关属性
font-size
设置字体的大小
font-weight
设置字体的重量,例如:字体加粗bold
text-indent
设置文本缩进的距离,它的值可以像素px、字体的尺寸em或百分比
text-align
设置文本的对齐方式;它的值可以是:left(左对齐)、居中(center)、右对齐(right)、两端对齐(justify)
text-decoration
设置文本修饰
letter-spacing
设置文本内容的距离
text-transform
处理文本的大小写,它的值可以是:none、uppercase(大写)、lowercase(小写)、capitalize(驼峰)
font-size
font-weight
text-indent
text-align
left 左对齐
right 右对齐
center 居中对齐
justify 水平两边对齐
text-decoration
注意:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。IE、Chrome 或 Safari 不支持 "blink" 属性值
letter-spacing
letter-spacing用于修改字符或字母之间的间隔。正数代表增加间隔,负数代表减少间隔
CSS表格样式
注意:border-collapse和border-spacing属性不能够同时存在
CSS边框样式
主要属性
border-width
设置元素的边框的宽度
border-color
设置元素边框的颜色
border-style
设置元素边框的风格,它的值有:solid(实线)、dotted(点线)、dashed(虚线)、double(双线)
对各条边框设置样式
border-left-width/color/style
border-right-width/color/style
border-top-width/color/style
border-bottom-width/color/style
四条边框样式相同
border: 2px solid red;
CSS盒子模型
内边距padding
内边距就是内容与边框之间的距离,内边距的边缘是边框
padding
设置内边距
padding-left
设置左内边距
padding-right
设置右内边距
padding-top
设置上内边距
padding-bottom
设置下内边距
外边距margin
margin-left
margin-right
margin-top
margin-bottom
注意:外边距可以是正数,也可以是负数
CSS定位属性
指定元素的定位类型的CSS属性
position
指定定位类型。它的值有:absolute(绝对定位)、
relative(相对定位)、fixed(固定定位)
relative(相对定位)、fixed(固定定位)
left
指定元素左上角的横坐标
top
指定元素左上角的纵坐标
absolute
绝对定位使元素的位置与文档流无关,因此不占据空间
2为绝对定位,left为30像素,top为20像素。由于使用绝对定位,框2原来的位置被删除,
因此框3会移动到框1后面
因此框3会移动到框1后面
relative
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,
可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动
可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动
在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会
导致它覆盖其它框
导致它覆盖其它框
fixed
与绝对定位一样,使用固定定位的元素在页面中也不占据空间。但是,固定定位不会随着页面的滚动而滚动
float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,
所以文档的普通流中的块框表现得就像浮动框不存在一样
所以文档的普通流中的块框表现得就像浮动框不存在一样
把框1向右浮动。所以可以看到,右图的框2和框3会向上移动,占据框1原先的空间
0 条评论
下一页