HTML基础

HTML
前端 HTML
发布日期:   2022-04-19
更新日期:   2022-04-19
文章字数:   530
阅读时长:   2 分
阅读次数:   

## 标题(head)

```html
<h1>第一段</h1>
<h2>第二段</h2>
<h3>第三段</h3>
```

## 段落(paragraph)
浏览器会自动地在段落的前后添加空行。

```html
<p>duanluan</p>
```

## 链接(anchor锚点)

```html
<a href="www.baidu.com">百度</a>
```

## 图片
加载图片是需要时间的，所以慎用图片。
```html
<img src="source/images/b站嵌入代码.png" alt="图片">
```

## 换行(barter rabbet)
HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

```html
<br>
```

## 水平线(horizon rabbet)

```html
<hr>
```

## 注释(快捷键为ctrl+/)

```html
<!--这是注释-->
```

## 文本格式化标签

```html
<b>加粗(bold)</b>
<i>斜体(italic)</i>
<stro>强调(strong)</stro>
<em>强调</em>
<sub>下标</sub> <sup>上标</sup>
<ins>下划线</ins>
<del>删除字</del>
<small>小号字</small>
<big>大号字</big>
```

## 计算机输出标签

```html
<code>print("hello world")</code>
```

## CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:

* 内联样式- 在HTML元素中使用"style" 属性

### 背景颜色
```html
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
```

### 字体, 字体颜色 ，字体大小
```html
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
```

### 文本对齐方式
```html
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
```

* 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS

```html
<head>
<style type="text/css">
body &#123;background-color:yellow;&#125;
p &#123;color:blue;&#125;
</style>
</head>
```

* 外部引用 - 使用外部 CSS 文件

```html
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

## 分区(div)
```python
<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>
```
文章作者: BITBCI
文章链接: https://bitbci.github.io/2022/04/19/11-wang-zhan-kai-fa/html-ji-chu/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 BITBCI !
HTML
  目录