1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style>
7 p{background-color: green;
8 color: wheat;
9 width: 50px;
10 }
11 /* 独占1行 设置宽高有效display: block */
12 a{
13 background-color: #F5DEB3;
14 color: #008000;
15 display: block ;
16 width: 300px;
17 }
18 button{
19 width: 300px;
20 /* 隐藏：标签原本位置不保留 */
21 /* display: hidden; */
22 /* 隐藏：标签位置保留 */
23 /* visibility:hidden ; */
24 /* 设置透明度0.5半透明，*/
25 opacity: 0.5;
26 }
27 </style>>
28 </head>
29 <body>
30 <!--
31 HTML常用的标签
32
33 标签分类：block
34 块级标签：
35 特点：独占一行，宽度与父标签同宽，高度随着内容自适应的
36 设置宽高样式时有效
37 标题标签H1-H6
38 段落标签p
39 div标签
40 li标签
41
42 行内标签
43 特点：不会独占一行 宽高都是随着内容自适应的，设置宽高样式无效
44 标签代表：
45 span 普通文本标签
46 b 加粗字体标签
47 a 超链接标签
48 i 斜体标签
49
50 行内块级标签：inline-block
51 特点：不会独占一行，宽高都是随着内容自适应的，设置宽高样式有效的
52 标签代表：
53 img 图像标签
54 button
55 input
56 这些标签分类对应的就是样式属性display
57 block
58 inline
59 inline-block
60 none--隐藏标签
61 CSS常用选择器
62 常用的样式
63
64 盒子模型
65 -->
66 <p>测试</p>
67 <a href="www.baidu.com">百度一下</a>
68 <samp>明月几时有，把酒问青天/n不知天上宫阙，今夕是何年</samp>
69 <button type="button">点击一下 你就知道</button>
70
71 </body>
72 </html>