HTML 简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>
元素解释:
声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。元素：元素描述了文档的标题 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落 </p></h1>
标签元素
元素定义了整个 HTML 文档。标签元素
元素定义了 HTML 文档的主体。-
标签元素
从1-6大小依次递减
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
标签元素
声明一个段落
<!--style设置样式-->
<p style="color:red;" >哈哈哈哈</p>
标签元素
定义水平线
<p style="color:red;" >哈哈哈哈</p><hr>
<p style="color:red;" >哈哈哈哈2</p>
标签元素
换行
文本格式化标签元素
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本 |
| em | 定义着重文字 |
| i | 定义斜体字 |
| small | 定义小号字 |
| strong | 定义加重语气 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字 |
| del | 定义删除字 |
标签元素
src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics7.baidu.com%2Ffeed%2F2cf5e0fe9925bc31a19293177f1058bbc9137048.jpeg%3Ftoken%3D92e90a207b6a41c3ea25055686f26d32&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1661274000&t=e0ada1a2a7ec9d4626ed370549f3ef84" alt="new" width="304" height="228">
标签元素
HTML 链接是通过标签 来定义的。
<a href="https://www.baidu.com">百度一下</a>
a 元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
a标签的锚点链接
<a href="#ti">跳转到标题</a>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<h1 id="ti">我是标题</h1>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
a元素和img元素结合
<a href="www.baidu.com">
<img src="">
</a>
span标签元素
用于对文档中的行内元素进行组合。一般是对普通文本进行操作
<span class="haha" style="color: blue; font-size: 30px;">
<p>哈哈哈哈2</p>
<p>哈哈哈哈2</p>
<p>哈哈哈哈2</p>
</span>
div标签元素
实现对一块内容元素的样式变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightly-HTML-Project</title>
<style>
.box1{
float: left;
}
.box2{
float: right;
}
</style>
</head>
<body>
<div class="box1">
<h1>sssss</h1>
<p>xixixi2</p>
</div>
<div class="box2">
<h3>dddd</h1>
<p>呵呵呵</p>
</div>
</body>
</html>