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 条评论
下一页
