- A+
HTML基础标签
<html>
定义HTML文档的根元素。
<!DOCTYPE html> <html> <head> <title>My Webpage</title> </head> <body> <!-- 页面内容 --> </body> </html>解释：<html>标签包含了整个HTML文档的内容，它是所有其他标签的父元素。
<head>
定义HTML文档的头部，包含了一些元数据和引用的外部资源。
<head> <title>My Webpage</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head>解释：<head>标签用于定义文档的头部，其中可以包含<title>标签定义页面标题，<link>标签引用外部样式表，<script>标签引用外部JavaScript文件等。
<body>
定义HTML文档的主体内容。
<body> <h1>Hello, World!</h1> <p>This is a paragraph.</p> <img src="image.jpg" alt="【技术积累】HTML+CSS+JavaScript中的基础知识【一】" alt="Image"> </body>解释：<body>标签用于定义文档的主体内容，其中可以包含各种其他标签，如标题标签<h1>、段落标签<p>和图像标签<img>等。
<h1>到<h6>
定义标题，从大到小依次表示不同级别的标题。
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>解释：<h1>到<h6>标签用于定义标题，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<p>
定义段落。
<p>This is a paragraph.</p>解释：<p>标签用于定义段落，其中的文本会自动换行。
<a>
定义超链接。
<a href="https://www.example.com">Visit Example</a>解释：<a>标签用于定义超链接，其中的href属性指定链接的目标URL。
<img>
定义图像。
<img src="image.jpg" alt="【技术积累】HTML+CSS+JavaScript中的基础知识【一】" alt="Image">解释：<img>标签用于定义图像，其中的src属性指定图像的URL，alt属性用于指定图像的替代文本。
<ul>和<li>
定义无序列表。
<ul> <li>Item 1</li> <li>Item 2</li> </ul>解释：<ul>标签用于定义无序列表，其中的每个列表项使用<li>标签表示。
<ol>和<li>
定义有序列表。
<ol> <li>Item 1</li> <li>Item 2</li> </ol>解释：<ol>标签用于定义有序列表，其中的每个列表项使用<li>标签表示。
<table>、<tr>和<td>
定义表格。
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table>解释：<table>标签用于定义表格，其中的<tr>标签定义表格的行，<td>标签定义表格的单元格。
这些是HTML的一些基础标签及其用法的详细介绍，每个标签都有不同的功能和用途，可以根据需要选择使用。以上是一些简单的示例，你可以根据自己的需求进行修改和扩展。
CSS中的基础样式
CSS（层叠样式表）是一种用于描述网页上元素样式的语言。下面是一些常见的基础样式及其代码示例：
字体样式
- font-family：设置字体系列。
css p { font-family: Arial, sans-serif; }这将使 <p> 元素中的文本使用 Arial 字体，如果 Arial 不可用，则使用 sans-serif 字体。
- font-size：设置字体大小。
h1 { font-size: 24px; }这将使 <h1> 元素中的文本大小为 24 像素。
- font-weight：设置字体粗细。
strong { font-weight: bold; }这将使 <strong> 元素中的文本加粗。
文本样式
- color：设置文本颜色。
p { color: blue; }这将使 <p> 元素中的文本颜色为蓝色。
- text-align：设置文本对齐方式。
h1 { text-align: center; }这将使 <h1> 元素中的文本居中对齐。
- text-decoration：设置文本装饰效果。
a { text-decoration: underline; }这将使 <a> 元素中的文本添加下划线。
背景样式
- background-color：设置背景颜色。
body { background-color: #f2f2f2; }这将使页面的背景颜色为浅灰色。
- background-image：设置背景图片。
div { background-image: url("image.jpg"); }这将使 <div> 元素的背景使用名为 "image.jpg" 的图片。
- background-size：设置背景图片大小。
div { background-size: cover; }这将使 <div> 元素的背景图片自适应填充整个元素。
边框样式
- border：设置边框样式。
div { border: 1px solid black; }这将使 <div> 元素的边框为 1 像素宽的黑色实线。
- border-radius：设置边框圆角。
button { border-radius: 5px; }这将使 <button> 元素的边框圆角为 5 像素。
- border-color：设置边框颜色。
input { border-color: red; }这将使 <input> 元素的边框颜色为红色。
盒模型样式
- width：设置元素的宽度。
.container { width: 300px; }这将使类名为 "container" 的元素宽度为 300 像素。
- height：设置元素的高度。
.box { height: 200px; }这将使类名为 "box" 的元素高度为 200 像素。
- padding：设置元素的内边距。
.content { padding: 10px; }这将使类名为 "content" 的元素内边距为 10 像素。
- margin：设置元素的外边距。
.section { margin: 20px; }这将使类名为 "section" 的元素外边距为 20 像素。
定位样式
- position：设置元素的定位方式。
.box { position: relative; }这将使类名为 "box" 的元素相对于其正常位置进行定位。
- top、right、bottom、left：设置元素相对于其定位父元素的偏移量。
.box { position: absolute; top: 10px; left: 20px; }这将使类名为 "box" 的元素相对于其定位父元素向下偏移 10 像素，向右偏移 20 像素。
显示样式
- display：设置元素的显示方式。
.box { display: inline-block; }这将使类名为 "box" 的元素以内联块级元素的方式显示。
- visibility：设置元素的可见性。
.hidden { visibility: hidden; }这将使类名为 "hidden" 的元素在页面上不可见，但仍占据空间。
