什么叫 HTML
HTML是HyperText Markup Language简写
中文名：超文本标记语言
标记
标记/标签:</>
标记分类: 单标签 双标签
标记的特点:大小写不敏感、有属性、有块级行级之分、要闭合
单标记语法:<标记名 属性名="属性值" />
双标记语法:<前标记名 属性名="属性值"></后标记名>
html 模板
1.版本控制
2.html 文档区域
3.文档包含头部(head)和身体(body)
4.头部包含编码格式(meta UTF-8)和标题(title)
他不是标记,他是告知浏览器用最新的 Html 版本解析文档
html5标准网页声明
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面
<!DOCTYPE html>
html 标记是创建文档区域
此元素可告知浏览器其自身是一个 HTML 文档
<html lang="en">
所有头部元素的容器,可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等
<head>
定义文档的标题
<title></title>
主体
<body>
文本格式必须以 .html 后缀
浏览器的种类
主流浏览器
遵从行业标准 w3c,行业规范支持网页开发相关技术
Chrome(webkit)
Safari
Firefox
Opera
IE(9~11,edge)
非主流浏览器
遨游
猎豹
QQ
搜狗
360(IE 内核,webkit 内核,双内核浏览器)
百度
标签
div 标签
区域的意思,也有盒子的概念,是一个双标记,块级标签,独立成一行
span 标签
区域的意思,也有盒子的感念,是一个双标记,行级标签,可以和其他行级并排
样式
边界
border: 给当前标记设置边界(默认上下左右)
border-left: 给当前标记设置左边界
border-right: 给当前标记设置右边界
border-top: 给当前标记设置上边界
border-bottom: 给当前标记设置下边界
border-width: 给当前标记设置粗细
border-left-width: 给当前标记设置左边界粗细
border-right-width: 给当前标记设置右边界粗细
border-top-width: 给当前标记设置上边界粗细
border-bottom-width: 给当前标记设置下边界粗细
border-color: 给当前标记设置边界颜色
border-left-color: 给当前标记设置左边界颜色
border-right-color: 给当前标记设置右边界颜色
border-top-color: 给当前标记设置上边界颜色
border-bottom-color: 给当前标记设置下边界颜色
border-style: 给当前标记设置边界的类型
solid 实线
dotted 点状线
dashed 虚线
border-left-style: 给当前标记设置左边界的类型
border-right-style: 给当前标记设置右边界的类型
border-top-style: 给当前标记设置上边界的类型
border-bottom-style: 给当前标记设置下边界的类型
组合写法:
border:border-width border-color border-style
<span style="border: 10px gold solid;">金色的实线</span>
<div style="border: 5px red dashed;">红色的虚线</div>
<span style="border: 5px blue dotted;">蓝色的点状线</span>
css
css:层叠样式表单
css 语法:
样式名称:样式值
选择器
style 标记实在 HTML 文档中创建一块书写 css 的
标签选择器
基础选择器-标签选择器
标签名{
}
优点:不需要给标签起名称(打标记),保证标签的纯净性
缺点:样式影响面太广,容易干扰其他标签
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
div{
border: 1px red solid;
}
span{
border: 2px blue solid;
}
</style>
</head>
<body>
body 内部只允许包含标签
<div>div</div>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
id 选择器
基础选择器-id选择器
#id 名称{
}
特点:唯一性
优点:可以逐个控制标记,互相的样式不影响
缺点:唯一性,冗余代码多
使用场景: JS 钩子
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#id1{
border: 3px red solid;
}
#id2{
border: 10px black dashed;
}
#id3{
border: 6px gold dotted;
}
</style>
</head>
<body>
<div id="id1">div</div>
<div id="id2">div</div>
<div id="id3">div</div>
id 一定只有一个
</body>
类选择器
基础选择器- 类选择器
.class名称{
}
一个标记可以起多个 class 名,建议不超过7个
优点: 可以减少代码冗余,把相同样式的标记总结在一起
缺点: 会略微的破坏 html 结构
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
div{
border: 3px red solid;
}
.blue{
border-color: blue;
}
.dotted{
border-style: dotted;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<div class="blue dotted">div</div>
<div>div</div>
</body>
后代选择器
基础选择器-后代选择器
语法:
选择器 选择器 ...{
}
body div{
border: 1px red solid;
}
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
body .div5{
border: 1px blue solid;
}
</style>
</head>
<body>
<div>第一层
<div>第二层
<div>第三层</div>
</div>
</div>
<div>第一层
<div class="div5">第二层
<div>第三层</div>
</div>
</div>
</body>
选择器优先级
1: 标签(名)选择器
2: id 选择器
3: class 选择器
4: 后代选择器
优先级
1: 相同选择器,样式冲突的情况下,后面覆盖前面
标签(名)选择器优先级是1
类选择器优先级是10
id 选择器的优先级是100
style 行间样式的优先级是1000
文本样式
文本颜色 color: 颜色值;
文本位置 text-align: left(靠左对齐,默认) | right(靠右对齐) | center(居中对齐)
字号大小 font-size: 单位是 px
文字修饰 text-decoration: underline(下划线) | line-through(中划线) | none(取消修饰)
css 样式:
div{
border: 1px red solid;
width: 400px;
height: 400px;
color: blue;
text-align: center;
font-size: 24px;
text-decoration: underline;
}
背景样式
背景样式 background
背景颜色 background-color: 颜色值;
背景图片 background-image:url("图片路径")
背景图片平铺 backround-repeat: repeat-x(沿着 x 轴平铺) | repeat-y(沿着 y 轴平铺) | no-repeat(不平铺);
背景图片定位 background-position: x y;
x 轴:支持 left center right 支持百分比
y 轴:支持 top center bottom 支持百分比
背景图片尺寸 background-size: x y | cover(把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中) |
contain(把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域);
background: 复合写法
background: background-color background-image background-position background-repeat
<head>
<meta charset="UTF-8">
<title>背景设置</title>
<style type="text/css">
div{
width: 800px;
height: 600px;
border: 1px red solid;
/*background-color: gold;
background-image: url("Test.jpg"), url("Test1.jpg");
background-repeat: no-repeat, no-repeat;
background-position: left, right;*/
/*background-size: contain, contain;*/
background:url("Test1.jpg") no-repeat 0px 0px/500px 444px, url("Test.jpg") no-repeat right;
</style>
}
</head>
<body>
<div>春眠不觉晓,处处闻啼鸟</div>
</body>
六环
<head>
<meta charset="UTF-8">
<title>六环</title>
<style type="text/css">
.one{
width: 600px;
height: 554px;
border: 1px black dashed;
padding-top: 46px;
margin: 0 auto;
}
.two{
width: 500px;
height: 475px;
border: 4px lightblue solid;
background: gray;
margin: 0 auto;
padding-top: 25px;
}
.three{
width: 450px;
height: 425px;
background: pink;
margin: 0 auto;
padding-top: 25px;
}
.four{
width: 400px;
height: 373px;
border: 1px white dotted;
margin: 0 auto;
padding-top: 10px;
}
.five{
width: 380px;
height: 280px;
border: 1px white dashed;
margin: 0 auto;
padding-top: 80px;
}
.six{
width: 180px;
height: 180px;
border: 5px yellow solid;
background: green;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="five">
<div class="six"></div>
</div>
</div>
</div>
</div>
</div>
</body>
外边距
外边距 margin
左边距 margin-left: 数值 | auto
右边距 margin-right: 数值 | auto
上边距 margin-top
下边距 margin-bottom
外边距 复合写法
1: margin: 0 (上) 0 (右) 0 (下) 0 (左)
2: margin: 0 (上) 0 (左右) 0 (下)
3: margin: 0 (上下边距) 0 (左右边距)
4: margin: 0 (上下左右边距都是0px)
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
}
.div1{
margin-left: 100px;
margin-top: 100px;
margin-bottom: 100px;
}
.div2{
background: blue;
/*
margin-left: 300px;
margin-top: -300px;
*/
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
外边距的 bug
1: 同级结构下,外边距冲突时,谁的数值大,就采用谁的数值
2: 父子结构下,父级与子级存在都设置上边距的情况下,父级没有设置 border...时,子级的外边距会引出"塌陷"的问题
<head>
<meta charset="UTF-8">
<title>外边距的bug</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
margin-bottom: 50px;
}
.div2{
margin-top: 51px;
background-color: blue;
}
.div3{
width: 300px;
height: 300px;
border: 4px red solid;
}
.div4{
width: 200px;
height: 200px;
background: blue;
margin-top: 60px;
}
.div5{
width: 100px;
height: 100px;
background: gold;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="div4">
<div class="div5"></div>
</div>
</div>
</body>
盒模型: 构成: 容器尺寸 + padding + border + margin
内边距
内边距 padding
左内距 padding-left: 数值
右内距 padding-right: 数值
上内距 padding-top
下内距 padding-bottom
内边距 复合写法
1: padding: 0 (上) 0 (右) 0 (下) 0 (左)
2: padding: 0 (上) 0 (左右) 0 (下)
3: padding: 0 (上下边距) 0 (左右边距)
4: padding: 0 (上下左右边距都是0px)
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
div{
height: 200px;
background: red;
padding-left: 100px;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div>div1</div>
</body>
浮动布局
浮动布局 float: left | right | none
清除浮动 clear: left | right | both
clear 的使用要点1: 只能清除同级标签的浮动影响
clear 的使用要点2: 只能清除既是同级又在它上面的标签的浮动影响
浮动会造成的问题
1.父级元素没有设置高度的情况下,会造成高度"塌陷"
解决方法1: 设置一个空的 div, 设置高度为0,清除浮动即可(不推荐使用)
解决方法2: 给父级标签设置 overflow: hidden; (只能解决高度"塌陷"的问题)
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
