HTML页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Hello World</title><body><h1>Hello World</h1><p>This is a simple HTML document.</p><img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.qOVNXup8kQ0DZg7RTVN3ZwHaE8?w=289&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2" alt="Mountains"></body>
</html>
- html元素囊括了页面的其他元素，整个页面只需要一个被称之为根元素
- head包含的是那些不用于展现内容的元素，如 title,linkmeta等
- body元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素
HTML常见元素
文本元素
标题元素
<h1>至<h6>：用于定义不同层级的标题，<h1>级别最高，字体最大；<h6>级别最低，字体最小。- 示例：
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
...
<h6>这是六级标题</h6>段落与换行元素
<p>：定义段落，段落之间会自动添加空白。- 示例：
<p>这是一个段落内容。</p> <br>：强制换行，是一个空元素，没有闭合标签。- 示例：
这是第一行<br>这是第二行
文本格式元素
<strong>：表示文本的重要性，会将文本加粗显示。- 示例：
<p>这是<strong>重要的内容</strong></p> <em>：表示文本的强调，会将文本斜体显示。- 示例：
<p>这是<em>需要强调的内容</em></p> <u>：为文本添加下划线。- 示例：
<p>这是<u>带下划线的内容</u></p> <s>：为文本添加删除线。- 示例：
<p>这是<s>被删除的内容</s></p>
链接元素
<a>：用于创建超链接，通过href属性指定链接的目标地址。- 属性：
href：指定链接指向的URL，可以是网页、文件、邮箱地址等。target：指定链接打开的方式，_blank表示在新窗口打开。
- 示例：
<a href="https://www.example.com">访问示例网站</a>
<a href="https://www.example.com" target="_blank">在新窗口访问示例网站</a>
<a href="mailto:someone@example.com">发送邮件</a>列表元素
无序列表
<ul>：定义无序列表，列表项使用<li>标签。- 示例：
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>有序列表
<ol>：定义有序列表，列表项同样使用<li>标签，默认以数字编号。- 属性：
start可以指定列表的起始编号。 - 示例：
<ol start="3"><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>定义列表
<dl>：定义定义列表，<dt>用于定义术语，<dd>用于对术语进行解释。- 示例：
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd>
</dl>图像元素
<img>：用于在网页中插入图像，是一个空元素。- 属性：
src：指定图像的路径，可以是相对路径或绝对路径。alt：当图像无法显示时，显示的替代文本。width和height：指定图像的宽度和高度，单位可以是像素或百分比。
- 示例：
<img src="image.jpg" alt="示例图片" width="300" height="200">
表格元素
<table>：定义表格。<tr>：定义表格的行。<td>：定义表格的单元格。<th>：定义表格的表头单元格，文本会加粗居中显示。<thead>：定义表格的表头部分。<tbody>：定义表格的主体部分。<tfoot>：定义表格的页脚部分。- 示例：
<table border="1"><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>22</td></tr></tbody><tfoot><tr><td colspan="2">总计：2人</td></tr></tfoot>
</table>表单元素
表单容器
<form>：定义表单，用于收集用户输入的数据。- 属性：
action：指定表单数据提交的目标URL。method：指定表单数据的提交方式，常用的有get和post。enctype: 指定表单数据的编码类型。常用的值有：application/x-www-form-urlencoded: 默认值，适合发送简单的文本数据。application/json发送json格式的数据multipart/form-data: 适合发送包含文件上传的表单数据。target: 指定表单提交后，响应数据在哪个窗口或框架中显示。常用的值有_blank（新窗口）、_self（当前窗口）、_parent（父框架）、_top（顶层窗口）。
- 示例：
<form action="/submit-form" method="post"><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="email">邮箱:</label><input type="email" id="email" name="email" required><label for="message">留言:</label><textarea id="message" name="message" rows="4" cols="50" required></textarea><button type="submit">提交</button>
</form>
输入控件
<input>：用于创建各种输入控件，通过type属性指定控件类型。- 常见类型：
text：单行文本输入框。password：密码输入框，输入的内容会被隐藏。radio：单选按钮，多个单选按钮使用相同的name属性实现互斥。checkbox：复选框，允许选择多个选项。submit：提交按钮，用于提交表单数据。reset：重置按钮，用于重置表单数据。file：文件上传控件。
- 示例：
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="file" name="file">
其他表单控件
<select>：定义下拉列表，<option>定义下拉列表中的选项。- 示例：
<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option>
</select><textarea>：定义多行文本输入框。- 示例：
<textarea name="message" rows="5" cols="30"></textarea>
语义化标签
<header>：定义文档的头部区域，通常包含标题、导航等内容。<nav>：定义导航链接的部分。<main>：定义文档的主要内容区域。<article>：定义独立的文章内容，如博客文章、新闻报道等。<section>：定义文档中的一个区块，用于对内容进行分组。<aside>：定义侧边栏内容，通常与主要内容相关但又可以独立存在。<footer>：定义文档的页脚区域，通常包含版权信息、联系方式等。- 示例：
<header><h1>网站标题</h1><nav><a href="#">首页</a><a href="#">新闻</a></nav>
</header>
<main><article><h2>文章标题</h2><p>文章内容...</p></article><aside><h3>相关推荐</h3><ul><li><a href="#">推荐内容1</a></li></ul></aside>
</main>
<footer><p>版权信息</p>
</footer>