html样式总结,html标签自带样式总结(示例代码)
时间: 2023-09-09 18:13:35 浏览: 131
HTML 标签自带样式总结:
1. `<h1>` - `<h6>` 标签:自带字体大小和加粗样式。
```
<h1>这是一个h1标签</h1>
<h2>这是一个h2标签</h2>
<h3>这是一个h3标签</h3>
<h4>这是一个h4标签</h4>
<h5>这是一个h5标签</h5>
<h6>这是一个h6标签</h6>
```
2. `<p>` 标签:自带行间距和首行缩进样式。
```
<p>这是一个段落。</p>
```
3. `<a>` 标签:自带链接样式。
```
<a href="https://www.example.com">这是一个链接</a>
```
4. `<ul>` 和 `<ol>` 标签:自带列表样式。
```
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
```
5. `<img>` 标签:自带图片样式。
```
<img src="example.jpg" alt="示例图片">
```
6. `<strong>` 和 `<em>` 标签:自带加粗和斜体样式。
```
<strong>这是一个加粗文本。</strong>
<em>这是一个斜体文本。</em>
```
7. `<blockquote>` 标签:自带缩进和引用样式。
```
<blockquote>
<p>这是一个引用文本。</p>
</blockquote>
```
8. `<pre>` 标签:自带等宽字体和行间距样式。
```
<pre>
这是一个预格式化文本。
</pre>
```
HTML 样式总结:
1. 内联样式:使用 `style` 属性来定义样式。
```
<p style="color: red; font-size: 18px;">这是一个红色的段落。</p>
```
2. 内部样式表:使用 `<style>` 标签来定义样式。
```
<head>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
```
3. 外部样式表:使用外部 CSS 文件来定义样式。
```
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="red">这是一个红色的段落。</p>
</body>
```
其中,`styles.css` 文件内容为:
```
p {
color: red;
font-size: 18px;
}
.red {
color: red;
}
```
阅读全文