*******************************标签*****************************************************************************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<!-- 块属性标签 支持设置宽高 上下排列 （独占一行）-->
<div>用来划分区域</div>
<!-- 段落 用来放置文字 -->
<p>啦啦啦，啦啦啦，我是卖报的小行家</p>
<!-- 标题 h1~h6 h1标签只能写一个-->
<h1>大牡丹婚庆网</h1>
<h2>大牡丹婚庆网</h2>
<h3>大牡丹婚庆网</h3>
<!-- 列表标签 -->
<!-- 无序列表 -->
<ul>
<li>金陵十二钗</li>
<li>插图版金瓶梅</li>
<li>精装版金瓶梅</li>
<li>水浒传</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>我的女神刘亦菲 </li>
<li>歌声天籁人又靓</li>
<li>小拳长锤我胸口</li>
<li>吹完就把我带走</li>
</ol>
<!-- 行属性标签 不可以设置宽高 自动排成一行（左右排列）-->
<!-- 超链接 href中写要连接到的地址-->
<a href="http://www.baidu.com">
未满十八周岁禁止点击
</a>
<!-- 放置文字 -->
<span style="100px;height: 100px;background-color: green;">宝强</span>
<span style="100px;height: 100px;background-color: green;">陈羽凡</span>
<!-- 行块属性标签 既支持宽高 又可以排成一行-->
<!-- ../ 返回上一级目录 img标签中的scr中写图片的绝对路径或者图片的服务器路径（网络地址） -->
<img style="width: 450px;height: 600px;" src="img/timg.jpg">
<img style="width: 450px;height: 600px;" src="img/2.jpg" alt="图片飞走了">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1548448769,1982815204&fm=26&gp=0.jpg">
</body>
</html>
************选择器****************************************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/*
标签选择器
语法：标签名{样式}
*/
div{
width: 200px;
height: 400px;
background-color: yellow;
}
/*
class选择器
语法： "."+class名{样式}
1.class选择器优先级比标签选择器高
2.不同标签可以使用相同的class名、
3.一个标签可以使用多个class名 ， 设置时用空格隔开
*/
.blue_div{
background-color: blue;
}
.big_div{
width: 500px;
height: 500px;
}
.father{
width: 200px;
height: 200px;
background-color: gray;
}
/*
后代选择器
语法：父选择器 子选择器{样式}
class 选择器权重10
标签选择器权重1
后代选择器权重由父选择器和子选择器的权重相加
*/
.father div{
background-color: yellow;
}
.father .son{
width: 100px;
height: 100px;
background-color: black;
}
/*
10个div 135是黄色，其他都是绿色，2 3 4宽高200px其他都是100px；
*/
</style>
</head>
<body><!--
<div>我是一个特别随便的div</div>
<div class="blue_div big_div">我是小二</div>
<div class="blue_div">我手机哦</div>
-->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
补充：
<!-- 声明下面所有代码的规范 使用的是HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- 设置编码格式 -->
<meta charset="utf-8">
<!-- 标题 -->
<title>不可描述的网站</title>
</head>
<body>
<!-- div 标签 最常用的标签 无语义 ，常用来划分区域 -->
<div></div>
<div style="width: 300px;height: 400px;">
<div style="width: 300px;height: 30px;background-color: yellow;">
我是导航条</div>
<div style="width: 300px;height: 370px;background-color: pink;">我是内容</div>
</div>
</body>
</html>
标签补充：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>补充</title>
<style type="text/css">
p{
/*字体颜色*/
color: red;
/*字体的大小 默认是16px*/
font-size:20px;
}
div{
width: 500px;
height: 700px;
/*背景图片*/
background-image: url(img/2.jpg);
/*背景图片尺寸*/
background-size: 100% 100%;
}
</style>
</head>
<body>
<div>
<p>英雄总是悲迟暮</p>
<p>自古红颜多薄命</p>
<p>那一抹风情</p>
<p>时光后，撩拨人心</p>
</div>
<!-- br 标签：换行 -->
<p>
久旱逢甘霖（一滴）
<br>
他乡遇故知（前女友）
<br>
同房花烛夜 （人妖）
<br>
金榜题名时（重名）
</p>
</body>
</html>
今天的分享到这，里面如有错误、等请大家积极留言，我会在第一时间与大家交流改错。
| 
转播
