回顾
- 内容标题 h1-h6 独占一行 字体加粗 有上下边距 align=left/right/center
- 段落标签 p 独占一行 有上下边距
- 水平分割线 hr
- 换行 br
- 列表标签
- 无序列表 ul:type li
- 有序列表 ol:type start reversed li
- 定义列表 dl dt dd
- 列表嵌套 有序和无序可以任意无限嵌套
- 分区标签
- div: 独占一行
- span: 共占一行
- h5 新增 header article footer
- 标签分类
- 块级标签: 独占一行 包括:h1-h6 div hr p
- 行内标签: 共占一行 包括:span strong和b em和i del和s u
- 实体引用
- 图片标签 img
- src:路径 相对路径:访问站内资源 同目录直接写文件名,上级目录 …/文件名,下级目录 文件夹名/图片名 和绝对路径:访问站外资源 节省本站资源,有可能会访问不到图片
- alt:图片不能正常显示时 显示的文本
- title: 鼠标悬停时显示的文本
- width/height: 1.像素 2.上级元素的百分比
- 图片地图 map
- 属性 name 唯一标识
- 子元素 area: shape(rect/circle) coords坐标(矩形两个对角线点的坐标,圆形圆心坐标和半径) href:资源路径 页面资源和文件资源
day02
- 超链接a
- 如果不写href属性则是纯文本
- 有文本超链接和图片超链接
- target=_blank 在新的窗口中显示页面
- 页面内部跳转 ,目的地有标签则直接给标题添加id属性 如果没有标签则添加一个空的a标签作为锚
- 表格table
- 子元素 tr td th caption thead tbody tfoot
- 属性 table:border cellspacing:单元格与单元号的间距或单元格和表格边框的间距 cellpadding:单元格距内容的距离 td:rowspan跨行 colspan跨列
- 表单form
- 属性 action 提交地址
- 各种控件:
- 文本框: input type=text name value placeholder占位文本 maxlength最大长度 readonly只读
- 密码框: type=password name value placeholder占位文本 maxlength最大长度 readonly只读
- 单选框: type=radio name value checked id label
- 多选框: type=checkbox name value checked id label
- 日期: type=date name
- 文件: type=file name
- 隐藏域: type=hidden name value
- 下拉选: select:name option:value selected
- 文本域: textarea: name rows cols placeholder
- 提交按钮: type=submit value
- 重置按钮: type=reset value
- 自定义按钮: type=button value
CSS
- Casecading层叠 Style样式 Sheet表, 用于美化页面
CSS的引入方式
- 内联样式:在标签的内部添加style属性,在属性内部添加css样式代码,弊端:不能复用
- 内部样式:在head标签内部添加style标签,通过选择器给元素添加样式,好处可以复用 弊端:只能在当前页面复用
- 外部样式:在单独的css文件中通过选择器给元素添加样式,在html页面中通过link标签引入样式文件, 好处:可以多页面复用(外部引用:<link rel=“stylesheet” href=“first.css”>)
三种引入方式的优先级
- 内联优先级最高
- 内部和外部优先级相同,后执行覆盖先执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
color: blue; //color 是字体
}
h3{
background-color: green; //bg-color是背景
}
</style>
<!-- 引入css文件 -->
<link rel="stylesheet" href="first.css"> //除了<style>标签内 任何位置都可以写(甚至在html根标签外面)
</head>
<body>
<span>这是第三种引入方式</span>
<div>这是第二种引入方式</div>
<h3 style="color: red">今天是星期一</h3>
<h3 style="color: red">aaaa</h3>
<h3 style="color: red">bbbb</h3>
</body>
</html>
选择器
- 标签名选择器
- 格式: 标签名{样式代码}
- 选取页面中所有的指定标签
- id选择器
- 格式: #id{样式代码}
- 当需要选择页面中的某一个元素时使用id选择器
- class选择器
- 格式: .class{样式代码}
- 当需要选取页面中某一类元素(多个)时使用class选择器
- 属性选择器
- 格式: 标签名[属性名=‘属性值’]{样式代码}
- 通过标签的属性去选择元素
- 分组选择器
- 格式: div,#id,.class{样式代码}
- 将多个选择器合并成一个选择器
- 子孙后代选择器
- 格式: div span{样式代码}
- 选取div里面所有的span(包括子元素和所有后代元素)
- 子元素选择器
- 格式: div>span{样式代码}
- 选取div里面所有的子元素span
- 伪类选择器
- 用于选取元素的状态
- 未访问状态link/访问过状态visited/点击状态active/悬停状态hover
- 任意元素选择器
颜色赋值
- 三原色:rgb red green blue 红 绿 蓝 每个颜色的取值是0-255
- 通过6位16进制赋值 #ff0000
- 通过3位16进制赋值 #f00
- 通过3位10进制赋值 rgb(0-255,0-255,0-255)
- 通过4位10进制赋值 rgba(0-255,0-255,0-255,0-1) a=alpha 透明度 值越小越透明
背景图片
/* 设置背景图片 */
background-image: url("../imgs/a.jpg");
background-size: 100px 100px; //得设置大小 不然图片没位置放
/* 禁止重复 */
background-repeat: no-repeat;
/* 控制背景图片的位置
left right top bottom center*/
background-position: 10% 10%;
解决粘连问题:在上级元素的css中加上overflow: hidden;
盒子模型
盒子模型之宽高
- 两种赋值方式:
- 像素
- 上级元素的百分比
- 行内元素不能修改宽高 宽高由内容决定
盒子模型之外边距
- 什么是外边距:元素距上级元素或相邻兄弟元素的距离称为外边距
- 赋值方式:
margin-left/top/bottom/right:20px;
margin:10px; 四个方向10px
margin:10px 20px; 上下10 左右20
margin:0 auto; 水平居中
margin:10px 20px 30px 40px; 上右下左 顺时针 - 行内元素上下外边距无效
- 左右相邻相加 上下取最大
- 当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,在上级元素中添加overflow:hidden 解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 60px;
}
#d2{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
body{
margin: 0;
}
#s1{
margin-left: 20px;
margin-right: 20px;
}
#s2{
margin-left: 20px;
}
</style>
</head>
<body>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1">div1</div>
<div id="d2">div2</div>
</body>
</html>
回顾
- CSS 层叠样式表 作用:美化页面
- 三种引入方式:
- 内联:在标签中添加style属性 在属性值里面写样式代码, 弊端:不能复用
- 内部:在head标签中添加style标签 通过选择器给标签添加样式,可以当前页面复用不能多页面复用
- 外部:在单独的css文件中写样式代码,在html页面中通link标签引入css文件,可以多页面复用, 可以将css和html分离
- 引入方式的优先级:
- 选择器
- 标签名 div{}
- id #id{}
- class .class{}
- 属性 标签名[属性名=‘属性值’]{}
- 分组 div,#id{}
- 子孙后代 div span{}
- 子元素 div>span{}
- 伪类 未访问link 访问过visited 悬停hover 点击active
- 任意元素 *{}
- 颜色复制
- 颜色单词
- 6位16进制 #ff0000
- 3位16进制 #f00
- 3位10进制 rgb(255,0,0)
- 4位10进制 rgba(255,0,0,0-1)
- 背景图片
- background-image:url(“路径”)
- background-size:100px 200px;
- background-repeat:no-repeat;
- background-position: left/right/top/bottom/center 和 百分比
- 盒子模型= 外边距+边框+内边距+宽高
- 宽高 width/height 两种方式:1.像素 2.上级元素的百分比
行内元素不能修改宽高,由内容决定 - 外边距:元素距上级元素或相邻兄弟元素的距离
margin-left/right/top/bottom:
margin:10px;
margin:10px 20px; 上下10 左右20
margin:0 auto; 居中
margin:10px 20px 30px 40px; 上右下左
- 上下相邻取最大 左右相邻相加
- 行内元素上下外边距无效
- 粘连问题:当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,给上级元素添加overflow:hidden解决