前进后退 ctrl+y ctrl+z
缩进 tab shift+tab
注释 ctrl + /
保存 ctrl + s属性="值"<!DOCTYPE html><!-- ！声明 document 文档 type类型 为html（html5） -->
<!-- 无论什么符号都是英文半角下输入的 不能有任何的中文符号 -->
<html><!-- html根标签 -->
<head><!-- 头部标签 与网页相关 但是用户不能之间看到的东西 -->
<meta charset="utf-8" /><!-- 编码格式的申明 utf-8-国际编码格式 gbk-中文简体 gb2312-中文繁体 -->
<title>大家好！</title><!-- 网页标题 -->
<meta name="Keywords" content=" " /><!-- 网页关键字 -->
<meta name="Description" content=" " /><!-- 网页描述 -->
</head>
<body><!-- 主体标签 用户可以直接看到的东西 -->
<!-- 规范
1. 子级相对父级tab缩进一个
2. 所有的标签名字统一小写字母输入（除开文档申明）
3. 头部四要素
-->
</body>
</html>
初级标签
<body><!-- 主体标签 用户可以直接看到的东西 -->
<a href="模板.html" target="_blank">帅！！！！</a>
<a href="mailto:898888@qq.com" target="_blank">跳转到邮箱</a>
<!--
超链接： 可以跳转到网络地址;也可以跳转到我们的本地文件
属性：
href 需要跳转的地址
mailto:898888@qq.com 打开本地的邮箱软件
target 规定跳转的窗口
_self 当前窗口 默认
_blank 新窗口
默认的特性：
1. 默认的下划线 2. 默认的颜色
-->
<hr /><!-- 分割线标签 -->
<h1>我是ｈ１标签</h1>
<h2>我是ｈ２标签</h2>
<h3>我是ｈ３标签</h3>
<h4>我是ｈ４标签</h4>
<h5>我是ｈ５标签</h5>
<h6>我是ｈ６标签</h6>
<!-- 标题标签
文章标题的语义化意思
特性:
1. 文字默认加粗
2. h1~h6字体大小一次递减
3. h1核心标题，一个网页只能出现一次
4. 默认的外边距
-->
<hr />
<font color="#ff6633" size="100">小小的树</font><font>小小的树</font>
<!-- 字体标签
属性：
color 字体颜色
值: 1. 颜色值的关键字 green red 2. 16进制的颜色值 #ff6633 = #f63
size 字体大小
值：取值范围 1~7 没有单位
-->
<hr />
<p>我是p标签</p>
<p>我是p标签</p>
<!-- 段落标签
表示一个段落
特性:
1. 默认的外边距
-->
<hr />
<pre>
小胖
小胖
小胖
</pre>
<!-- 域格式化文本标签
代码里面的文本格式直接全部解析 换行 空格 tab
-->
<hr />
<em>我是ｅｍ标签</em>
<i>我是ｉ标签</i>
我是ｉ标签
<!-- 斜体标签
ｅｍ 是有强调的语义
ｉ 没有语义单纯的斜体
-->
<hr />
<strong>我是strong标签</strong>
<b>我是b标签</b>
我是b标签
<em>
<strong>我是ｅｍ标签</strong>
</em>
<!-- 加粗文本
strong 是有强调的语义 强调意义比em强烈
b 没有语义单纯的加粗
-->
<hr />
<del>我是del标签删除线标签</del>
<ins>我是ins标签下划线标签</ins>
H<sub>2</sub>O
H<sup>2</sup>O
<!--
sub 下标标签
sup 上标标签
-->
<hr />
我是span标签我是span标签<span>我是span标签</span>我是span标签我是span标签我是span标签我是span标签我是span标签我是span标签我是span标签我是span标签我是span标签
<div>我是div标签</div>我是div标签 div+css
<!-- 没有任何特性 -->
div 标签<br />作为容器 划分区域
<!-- <br/> 强制换行标签 -->
</body>图片 路径 列表标签
<body style="background:red;"><!-- 主体标签 用户可以直接看到的东西 -->
<img src="01.jpg" alt="" />
<img src="common.png" alt="" />
<img src="timg.gif" alt="" />
</body><body><!-- 主体标签 用户可以直接看到的东西 -->
<a href="http://www.baidu.com"><img src="01.jpg" width="500" height="300" alt="吃苹果的小妹妹" title="吃苹果的小妹妹!!!!!!" /></a>
<!-- 图片你的属性
src 图片路径 引用哪个图片
width/height 设置图片的 宽度/高度
值：固定的数值 px:像素
1. 当没有设置宽度和高度时候宽度和高度是一个本身的宽度高度
2. 当你只设置其中的一个值的时候，另外一个值等比缩放
alt 图片的描述
当图片没有正常加载的时候，会显示alt里面的内容
title 图片标题
图片四要素 必须写
-->
</body><body><!-- 主体标签 用户可以直接看到的东西 -->
绝对路径<br />
<img src="D:/Windows 7 Documents/Desktop/02-图片-路径-列表标签/课件/images/01.jpg" alt="吃苹果的小妹妹" title="吃苹果的小妹妹!!!!!!" /><br />
相对路径<br />
<img src="../images2/01.jpg" alt="吃苹果的小妹妹" title="吃苹果的小妹妹!!!!!!" />
<!-- 绝对路径
1. 从根目录出发一个一个文件夹向内直到找到文件
2. 路径符号统一使用 /
-->
<!-- 相对路径
./ 当前目录
../ 上级目录
-->
<!-- D:Windows 7 DocumentsDesktop02-图片-路径-列表标签课件 -->
</body><body><!-- 主体标签 用户可以直接看到的东西 -->
<!-- 无序列表 列表项的顺序排列没有要求
li 列表项
1. 默认的列表样式（前面的点）
2. ul有默认的内边距
3. 块级特性
type
disc 黑原点 默认的
circle 空心圆
square 方块
规范
列表直接的下一级只能够放对应的列表项 不能放其他的任何东西
li里可以放任何东西
-->
<ul type="disc">
<li>手机/云隐觞/办公</li>
<li>家电数码</li>
<li>手机/云隐觞/办公</li>
<li>家电数码</li>
<li>手机/云隐觞/办公</li>
<li>家电数码</li>
<li>
<ul>
<li>1111111</li>
<li>1111111</li>
</ul>
</li>
<!-- <div></div> -->
</ul>
<!-- 有序列表 列表项按照一定的顺序排列
-->
<ol type="i">
<li>手机/云隐觞/办公</li>
<li>家电数码</li>
<li>手机/云隐觞/办公</li>
<li>家电数码</li>
<li>手机/云隐觞/办公</li>
<li>家电数码</li>
<li>
<ol>
<li>1111111</li>
<li>1111111</li>
</ol>
</li>
</ol>
<!-- 自定义列表
1. 列表项有 dt 列表标题 和dd 列表内容组成
2. 默认的内边距
-->
<dl>
<dt>列表标题</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dd>列表内容3</dd>
<dd>列表内容4</dd>
<dt>咏鹅</dt>
<dd>鹅鹅鹅</dd>
<dd>曲项向天歌</dd>
<dd>白毛浮绿水</dd>
<dd>红掌波清波</dd>
</dl>
</body>CSS样式
<head>
<!-- rel="stylesheet" 告诉浏览引用的文件是做什么的 必须设置的属性属性值 -->
<link rel="stylesheet" type="text/css" href="index.css" />
<style type="text/css">
/* @import url("index.css"); *//* 引用css样式 只能写在style标签里面 只能写在最上面 */
ul{/* 找到要设置样式的元素（标签） */
border:1px solid red;
}
li{
}
</style>
<!-- 样式书写的位置
1. head 头部的 style标签里面 （头部样式，内联样式）
2. 写在标签的 style 属性里面（行内样式）
3. 写在单独的css文件里面 通过link标签 或者 @import 引用进来（外部样式，外联样式）
结构 样式 行为分离 方便维护和优化
-->
</head>
<body>
<ul>
<li style="border:1px solid blue;">111</li>
<li class="goudan">2222</li>
</ul>
</body><head>
<style type="text/css">
ul{
/* 属性名:属性值; */
/* border:1px solid red; *//* 边框:边框的宽度 边框的风格 边框的颜色 */
/* 复合属性 ：把多个属性合并在一起 */
/* border-width:10px;
border-style:outset; */
/*
solid : 实线
dashed : 虚线
*/
/* border-color:blue; */
border-left:10px solid red;
border-top:10px solid blue;
border-right:10px solid green;
border-bottom:10px solid pink;
border-left-width:30px;
border-left-color:red;
border-left-style:solid;
border-width:10px 20px 30px 40px;
border-color:black yellow;
/*
border-left-width
border-right-width
border-top-width
border-bottom-width
顺时针的匹配规则
一个值:四个方向
两个值:上下 左右
三个值:上 左右 下
四个值:上 右 下 左
*/
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>2222</li>
</ul>
</body>宽度、高度、内外边距
<head>
<style>
a{text-decoration:none;}
div{
width:50%;/* 宽度 */
height:200px;/* 高度 */
font-size:20px;/* 字体大小 */
padding-left:50px;
/*
px ： 固定的像素值
% ：基于父级宽度的比例
em ：1em = 字体大小的像素值
谷歌默认的字体大小为 16px 最小为12px
*/
border:10px solid black;
/* padding-top:10px;
padding-left:20px;
padding-right:10px;
padding-bottom:20px;
padding:10px 20px 40px; */
/* 内边距（填充）
1. 一个元素与它的内容的距离
2. 内边距会计算在元素的最终宽度/高度之内
% : 基于父级的宽度
*/
}
div div{/* 找到内部的div */
width:10em;/* 宽度 */
/* height:50%; *//* 高度 */
margin-top:20px;
height:50px;
border:none;
/* padding-top:10%; */
background-color:deeppink;/* 背景颜色 */
}
span{
width:100px;
height:50px;
border:1px solid blue;
}
.box2{/* 外层div里面的第二个div */
background-color:blue;
margin-left:10px;/* 左外边距 */
margin-top:-10px;
}
/* 外边距
元素与外部的其他元素之间的距离
外边距的 正负值 只代表一个方向
*/
</style>
</head>
margin-auto
<head>
<style>
.box{
width:200px;
height:200px;
border:1px solid red;
margin:0 auto;/* 块级元素 左右自适应居中 */
/* margin-left:auto;
margin-right:auto; */
}
.box div{
width:100px;
height:100px;
border:1px solid blue;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div>
1111111
</div>
</div>
</body>样式初始化
<head>
<link rel="stylesheet" href="reset.css" />
<style>
/* *{margin:0;padding:0;} *//* * 选择全部的标签 */
/* body{
margin:0;
}
p{
margin:0;
}
h1{
margin:0;
} */
p{
width:100px;
height:100px;
border:1px solid red;
}
</style>
</head>
<body style="color:red;">
<div>111111</div>
<div>
<p>22222</p>
</div>
<a href="">a标签</a>
<i>我是i标签</i>
<em>我是em</em>
<b>我是b标签</b>
<strong>我是strong</strong>
<div style="border:1px solid red;">
<img src="../../images/1.jpg" alt="" />
</div>
</body>行级和块级
<head>
<style type="text/css">
*{ margin:0;padding:0; }
a,b,span{
border:1px solid red;
width:5000px;
height:5000px;
}
b{
margin:100000px 10px;
padding:0px 20px;
}
.b1{
padding-bottom:10px;
}
div,p,h1{
width:600px;
height:50px;
border:1px solid blue;
/* margin:0 30px; */
}
p{
/* margin:20px;
padding:20px; */
}
body{
width:500px;
border:5px solid black;
/* padding:0 50px; */
}
hr{
margin:50px 0;
}
</style>
</head>
<body>
<!-- <div style="width:100px;height:100px; float:right;"></div> -->
<!-- 行内标签
1. 可以和其他元素在同一行显示
2. 不支持设置宽度高度,宽度高度由内容撑开
3. 标签之间换行会有 字体大小一半 的默认的距离
4. 只支持左右的外边距，不支持上下的外边距
5. 只支持左右的内边距,上下的内边距不能作用于其他元素
-->
<a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><a href="">我是a标签我是a标签</a><b class="b1">我是b标签我是b标签我是b标签</b><span>我是span标签</span><br />
<a href="">我是a标签我是a标签</a><b style="border:none;">我是b标签我是b标签我是b标签</b><span>我是span标签</span>
<hr />
<!-- 块级标签
1. 单独占据一行 与宽度没有关系
2. 支持设置宽高，默认情况下宽度自适应,高度由内容撑开
3. 支持所有内外边距
-->
<div>我是div</div>
<p>我是p</p>
<h1>我是h1</h1>
</body>
行级块级之间的转换
<head>
<style>
div{
width:100px;
height:100px;
border:1px solid red;
/* display:inline; */
display:none;
/* visibility:hidden; */
/*
display 转换元素的特性
block 转换成块级特性
inline 转换成行内元素
none 完全隐藏元素 不占据位置
*/
/* visibility:hidden;
隐藏元素 但是占据原来的位置
hidden （ 隐藏 ）
visible （ 显示 ）
*/
}
div{
display:inline;
}
</style>
</head>
<body>
<span>11111</span>
<div>22222</div>
333333
</body>
行块元素
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
li{list-style:none;}
ul{
border:5px solid red;
width:800px;
margin:20px auto;
/* text-align:center; */
}
li{
width:100px;
height:100px;
border:1px solid blue;
display:inline-block;
vertical-align:bottom;
/*
top
middle
bottom
*/
margin:0 auto;
/*
1. 可以设置宽度高度，内外边距，并且在一行显示（结合了块级和行内的部分特性）
2. 换行会产生间距
3. 默认会和父级元素的下边有一个距离
4. 当父级宽度不够的时候会在下一行继续排列
5. margin:auto; 失效
6. 对文字的样式生效
7. 行块元素默认用自身的底部和父级的文字去对齐
*/
}
.item2{
height:300px;
}
</style>
</head>
<body>
<ul>11111
<li>22222</li>
<li class="item2"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
外边距的溢出
<head>
<style type="text/css">
*{margin:0;padding:0;}
div{
width:300px;
height:300px;
background-color:pink;
margin:0 auto;
/* border:1px solid red; */
/* padding-top:1px; */
/* overflow:hidden; *//* 隐藏超出元素的内容 */
}
p{
width:100px;
height:100px;
border:1px solid black;
}
.box1{
margin-top:10px;
}
.box1 p{margin-top:50px;}
.box2 p{
margin:30px 0;
}
.box2 .p1{
margin-bottom:50px;
}
.box3 .p1{
width:0;
height:0;
border:none;
margin:30px;
}
/*
1. 外边距的传递
默认情况下 子级元素的 上外边 距会传递给父级 而不是作用于父级
阻止传递的情况
1. 父级有边框的情况
2. 父级有上内边距的情况
3. 父级oveflow:hidden;
4. 父级 浮动 的时候
5. 父级 定位 的时候
2. 外边距的合并
1. 两个上下相邻元素 上边元素的下外边距 和下边元素的上外边距会进行合并 取两者的最大值
2. 一个没有任何属性的空的元素设置上下外边距的时候上下外边距同样会进行合并
3.
*/
</style>
</head>
<body style="padding-bottom:50px;">
<div class="box1">
<p></p>
</div>
<hr />
<div class="box2">
<p class="p1"></p>
<p></p>
</div>
<hr />
<div class="box3">
<p></p>
<p class="p1"></p>
<p></p>
</div>
</body>嵌套的规范
<body>
<p>
<span style="display:block;"></span>
</p>
行内元素 不能嵌套块级元素 除开a标签
a 标签不能嵌套 a标签
</body>图片描述demo
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;/* 强制继承 */}
div{
width:300px;
padding:40px;
background-color:#ddd;
margin:0 auto;
box-shadow:0 0 10px black;
}
dl{
width:280px;
padding:10px;
background-color:#fff;
}
</style>
</head>
<body>
<!--
1. 思考使用什么特性的标签
2. 经量使用语义贴近标签
-->
<div>
<dl>
<dt><a href="#"><img src="02-列表-作业/01.jpg" width="280" height="auto" alt="" /></a></dt>
<dd>
<a href="#">【sahie萤】滋润补水</a><!-- > -->
</dd>
<dd>
<a href="#">【sahie萤】滋润补水</a>
</dd>
<dd>
<a href="#">【sahie萤】滋润补水</a>
</dd>
</dl>
</div>
</body>
</html>新闻列表demo
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;}
div{
width:350px;
border:1px solid red;
margin:30px auto;
}
h3{
background-color:#ddd;
font-size:16px;
padding-left:10px;
/* padding:6px 10px; */
line-height:30px;
}
ul{
font-size:14px;
padding:10px 0 10px 10px;
}
ul li{
margin:5px 0;
}
/* .item-title,font{margin-right:8px;} */
.item-title{
border-right:1px solid red;
color:red;
margin-right:10px;
padding-right:10px;
line-height:12px;
display:inline-block;
}
</style>
</head>
<body>
<div>
<h3><a href="#">腾讯新闻</a></h3>
<ul><!--
<li>
<font color="#ff9933"><a href="#" class="item-title">新闻</a>|</font><a href="#">债转股17年后在度启动 ..........</a>
</li> -->
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
<li>
<a href="#" class="item-title">新闻</a><a href="#">债转股17年后在度启动 ..........</a>
</li>
</ul>
</div>
</body>
</html>
三角形demo
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
div{
width:0;
border:100px solid transparent;
border-right-color:yellow;
/* border-color:red transparent transparent transparent; */
/* transparent 透明色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
