版权声明：原创内容，欢迎转载 https://blog.csdn.net/weixin_43731793/article/details/91543411
1、基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
2、HTML 标题（Heading）……是<h1> - <h6>标签定义
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
3、HTML 段落（paragraph）……是标签 <p>来定义的.
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
4、HTML 链接 ……是标签 来定义的.
实例
<a href="http://www.runoob.com">这是一个链接</a>
5、HTML 图像……是通过标签 ![]()
来定义的.
实例
<img src="/images/logo.png" width="258" height="39" />
6、div 元素是用于分组 HTML 元素的块级元素。
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
7、HTML 布局 - 使用表格
使用 HTML
标签是创建布局的一种简单的方式。<table>123456</table>
8、Iframe - 设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
9、CSS Position(定位)
9.1、static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
9.2、fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
9.3、relative 定位
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
9.4、absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
9.5、sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。