2020-12-29 html标签的用法和作用

最新推荐文章于 2024-07-09 19:16:57 发布

Magical__Thing

最新推荐文章于 2024-07-09 19:16:57 发布

阅读量223

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_47073236/article/details/111920083

版权

1.HTML  标签

<!DOCTYPE html>
<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>,<div>

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>,<span>

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

列如：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

【1】单边内边距也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

【2】边框的样式

边框定义为 outset，使之看上去像是“凸起按钮”：

p.aside {border-style: solid dotted dashed double;}

边框单边样式：

边框宽度：

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

没有边框：

p {border-style: none; border-width: 50px;}

定义边框颜色：

【3】.CSS margin 属性（外边距）

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

h1 {margin : 0.25in;}   h1 {margin : 10px 0px 15px 5px;}

与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

margin: top right bottom left

如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：

p {margin: auto auto auto 20px;}

单边外边距属性：

【4】.外边距合并：

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

关注