HTML学习大纲

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。了解HTML是进行网络爬虫、网页开发等活动的基础。下面是一些基本但重要的HTML知识点：

元素和标签:
- 元素: HTML元素是从开始标签到结束标签的所有内容。
- 标签: HTML标签是用于定义HTML元素的关键字，放在尖括号中。
```
<tagname>Content goes here...</tagname>
```
属性:
- HTML元素可以具有属性，属性提供有关元素的额外信息，始终包含在开始标签中。
```
<tagname attribute="value">Content goes here...</tagname>
```
文档结构:
- <!DOCTYPE html>: 定义文档类型。
- <html>: HTML文档的根元素。
- <head>: 包含元数据（如<title>、<link>、<meta>等）。
- <body>: 包含页面的可见内容（如<h1>、<p>、<img>等）。
```
<!DOCTYPE html>
<html><head><title>Page Title</title></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body>
</html>
```
标题和段落:
- <h1>到<h6>: 定义标题，<h1>是最高级别的标题。
- <p>: 定义段落。
```
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
```

链接和图片:

<a>: 定义超链接。
<img>: 定义图像。

<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="An image">

列表:
- <ul>: 定义无序列表。
- <ol>: 定义有序列表。
- <li>: 定义列表项。
```
<ul><li>Item 1</li><li>Item 2</li>
</ul>
```
表格:
- <table>: 定义表格。
- <tr>: 定义表格行。
- <th>: 定义表头单元格。
- <td>: 定义表格单元格。
```
<table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td></tr>
</table>
```
表单:
- <form>: 定义表单。
- <input>: 定义输入字段。
- <textarea>: 定义多行文本输入字段。
- <button>: 定义按钮。
```
<form><input type="text" name="name"><textarea name="comment"></textarea><button type="submit">Submit</button>
</form>
```

CSS与JavaScript:

CSS (Cascading Style Sheets): 用于样式化HTML元素。
JavaScript: 用于为网页添加交互性。

<head><style>body {font-family: Arial, sans-serif;}</style><script>function myFunction() {alert("Hello World!");}</script>
</head>

Div和Span标签:

<div>: 是一个块级元素，常用于组合块级元素，并通过CSS样式化。
<span>: 是一个内联元素，常用于组合文本，并通过CSS样式化。

<div style="background-color:lightblue"><h3>This is a heading in a div element</h3><p>This is some text in a div element.</p>
</div><span style="color:blue">This text is in blue color</span>

ID和Class属性:
- id属性提供唯一标识，每个HTML文档中的id值都应该是唯一的。
- class属性用于定义元素的类名，可以将相同的样式应用于具有相同class值的多个元素。
```
<div id="uniqueElement">This element has a unique ID</div>
<p class="styled-text">This text has a specific style.</p>
<p class="styled-text">This text has the same style.</p>
```

HTML5新标签:

<header>, <footer>, <nav>, <section>, <article>等是HTML5中引入的新标签，用于更具语义化的组织内容。

<header><h1>Site Title</h1><nav><ul><li><a href="#home">Home</a></li><li><a href="#services">Services</a></li></ul></nav>
</header>
<section><article><h2>Article Title</h2><p>Article Content</p></article>
</section>
<footer><p>Copyright © 2023</p>
</footer>

嵌入内容:

<iframe>: 可以嵌入另一个HTML页面。
<video>和<audio>: HTML5新增的标签，用于嵌入视频和音频内容。

<iframe src="https://www.example.com" width="600" height="400"></iframe><video controls><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.
</video><audio controls><source src="sound.mp3" type="audio/mp3">Your browser does not support the audio tag.
</audio>

表单输入类型:
- HTML5引入了一些新的输入类型如<input type="email">, <input type="date">, <input type="range">, <input type="color">等，以支持更多的用户输入选项。
```
<input type="date" name="birthdate">
<input type="email" name="email" placeholder="Enter your email">
```
数据属性 (data-*):
- 自定义数据属性，以存储页面或应用程序的私有自定义数据，以data-为前缀。
```
<div data-role="page" data-theme="a">This div has some data attributes</div>
```
响应式设计相关标签和属性:
- 如<meta name="viewport" content="width=device-width, initial-scale=1">，用于控制页面在不同设备上的呈现。