HTML的标签、属性；css标签（长期更新19-9-5）

最新推荐文章于 2024-07-10 16:15:48 发布

旧爱学长

最新推荐文章于 2024-07-10 16:15:48 发布

阅读量171

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_43324273/article/details/99691778

版权

html 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

文章目录

一、HTML的标签：tag

1.<body> </body>         身体

2.<html> </html>           网页

3.<head> </head>         头部

4.<meat   />            元素可提供有关页面的元信息

5.<img src="   "/>            插入图片

6.<title> </title>             标识当前网页的标题，只能有一个

7.<h1~h6> </h1~h6>       标题从最大到最小

8.<p>  </p>                        段落

9.<iframe> </iframe>       内联框架,是在一个页面中嵌入另一个页面

10.<link> </link>             链接外部样式表

11.<u>  </u>          下划线

12.<i、em>  </u、em>           斜体

13.<s>  </s>                 中间删除线，一个是格式.

14.<del>  </del>               中间删除线,一个是标记

15.<b、strong>  </b、strong>        加粗

16.<span>  </span>               行元素，代表网页中放入小块内容的容器，不会改变结构（加入背景尺寸不会改变结构）内联标签

17.<div>  </div>               代表网页中放置大块内容的容器（快级标签）

18.<a>  </a>                    超链接标签

19.<ul> </ul>                   无序标签

20.<li> </li>       列表项

21.<ol> </ol>      有序标签

22.<dl> </dl>  定义列表

23.<dt> </dt>  定义术语

24.<dd> </dd>        定义描述

25.<style  >            内联定义css样式

26.<header>  </header>      头部

27.<nav> </nav>        导航

28.<section>  </<section>     身体

29.<footer>  </footer>       页脚

30.<scripe> </scripe>      用于定义客户端脚本，script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

31.<br>  分割线

二、HTML的属性：attr

1.src="1.jpg"           源文件插入图片路径

2.alt="这是图片"            替代文本

3.title="图片"                        对图片起到说明的作用

4.width="500px"                        宽

5.height="500px"                       高

6.charset="utf-8"                    字符集=“万国码”

7.rel="stylesheet"       指示被链接的文档是一个样式表，属性规定当前文档与被链接文档之间的关系。

8.type="text/css"           文件的类型

9.href="index.css"                        表示路径，也可以表示连接
                               
10.class="别名 "          规定元素的类名

11.target="_blank/new/_self"        规定在何处打开链接文档

12.style="css样式"                            行内定义css样式

13.title=“图片”         额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本

三、css属性：

1.color:#f00;                     颜色

2.font-size:16px;           字号

3.font-family:"宋体";         字体

4.text-indent:40px;                段前间距

5.font-weigth:bold/bolder/normal/100/200/300/400......900;         字体粗细程度

6.background:#0f0               背景颜色
   background：url(1.jpg) no-repeat/repeat-y/repeat-x;         插入背景图片（不重复/沿着y，x轴重复）
   background-size:cover;
   
7.width:500px;                    宽

8.height:500px;                   高

 9.list-style:none、square、circle、dist;    ul标签去掉前面的符号 \ square 方形  \circle空心圆 \  默认就是实心圆dist

10.display：inline/block/inline-block/none 变成行/块/内联块/让物体消失

11.border: 4px solid #0f0;             边框：大小  实线   颜色

12.text-decoration:none   去掉a标签的下划线

13.text-align: center、left、right;文本居中、左、右

14.margin:0 auto;  外边距上下为0，左右自动居中

15.line-heigt:50px;当行高与高相等时，文本就会垂直居中，行高是包括文本的。

16.box-sizing:border-size  通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;      
    
17.margin-left: 80px;   左外边距
    margin-right：80px;右外边距
	margin-top:100px;  上外边距
	margin:100px 0 0 80px;
	                上  右下 左（顺时针）
	margin:100px 200px 80px;
	                 上    左右   下
	margin:100px 200px;
	              上下   左右
    margin:100px;上下左右都是100px
	padding:100px 0 0 80px; （外边距   同理）
	
18.opacity:0-1；透明（0完全透明）
   
19.float：left/right；左浮动/右浮动
   
20.a:link {color: #FF0000}	/* 未访问的链接 /
     a:visited {color: #00FF00}	/ 已访问的链接 /
     a:hover {color: #FF00FF}	/ 鼠标移动到链接上 /
     a:active {color: #0000FF}	/ 选定的链接 */   选定的瞬间
     
21.text-decoration:none //默认，定义标准的文本，没有任何样式，正常显示
     text-decoration:underline //定义文本下的一条线
     text-decoration:overline //定义文本上的一条线
     text-decoration:line-through //定义文本中间的一条线
     
22. position：位置     absolute;    relative;      fixed;         static;
                                 绝对定位   相对定位   固定定位  静态定位

32.letter-spacing:30px;文字之间的间距
     word-spacing:30px;字母之间的间距

33.overflow：visible/hidden/scroll/auto/inherit；防止溢出（默认/隐藏溢出/添加滚动条/添加滚动条如果有内容被修剪/参与父级的方式）