【HTML】学习笔记 1 - 元素、标题、拆行

# HTML 元素和属性
从开始标签（start tag）到结束标签（end tag） 的所有代码

| 开始标签（start tag）         | 元素内容                | 结束标签（end tag）  |
| ----------------------- | ------------------- | -------------- |
| < p >（实际无空格）            | This is a paragraph | < / p >（实际无空格） |
| <a href="default.html > | This is             | < / a>（实际无空格）  |
| <br / >（实际无空格）          |                     |                |

```html
<!DOCTYPE HTML>
<html>
<body>

<h1>我的第一个标题 Hello World</h1>
<h2>This is a heading2</h2>
<h3>This is a heading3</h3>

<p>我的第一个段落 hello world</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
```

效果：
![image](https://cdn-imagehost.xyzttt.xyz/image/2025/06/18/ipfnmp.webp)
HTML 链接由 < a > 标签定义，链接的地址在 href 属性中指定：
```html
<a href="https://xyzttt.xyz" > This is a link.</a>
```

## 内容属性
```html
对齐
<h1>定义标题的开始
<h1 align="center"> 
<h1 align="left"> 左对齐
<h1 align="right"> 右对齐

背景颜色
<body bgcolor="yellow"> 背景颜色的附加信息

表格边框
<table border="1"> 表格边框的附加信息
```

## 引号
属性值应该被包含在引号内，双引号较为常用，单引号也不是不行。
但如果属性值本身就含有引号，比如 "HelloWorld"，那么这样的属性值就必须被包含在单引号内：
```html
name='Bill "HelloWorld" Gates'
```

## 其他属性参考
- [标签参考手册](https://www.w3school.com.cn/tags/html_ref_byfunc.asp)

# 标题
浏览器会自动地在标题的前后添加空行

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

！！请确保 HTML heading 标签只用于标题。不仅仅是为了产生粗体嚯打好的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

## HTML 水平线
< hr / > 标签在 HTML 页面中创建水平线。 hr 元素可用于分割内容。
```html
<p>This is a parph.</p>
<hr />
```
效果：
![image](https://cdn-imagehost.xyzttt.xyz/image/2025/06/18/skhmgz.webp)

提示：使用水平线 (<hr / > 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

# HTML 注释
```html

```

开始括号之后（左边的括号）需要紧跟一个叹号，但是结束括号之前（右边的括号）不需要。

# HTML 折行
希望在不产生一个新段落的情况下换行（新行），使用 < br /> 标签

```html
<p>This is <br />a para<br />graph with line breaks.</p>
```
效果：
![image](https://cdn-imagehost.xyzttt.xyz/image/2025/06/18/sxjesi.webp)

# References
- [w3school 在线教程](https://www.w3school.com.cn/)