HTML常用技术点合集
【摘要】 HTML 常用技术点的合集：<!DOCTYPE>声明：它是 HTML 文档的第一行，用于告诉浏览器该文档使用的 HTML 版本。例如，<!DOCTYPE html>表示文档使用 HTML5 标准，这有助于浏览器正确地渲染页面。<html>标签：是 HTML 页面的根标签，所有其他的 HTML 元素都应该包含在这个标签内部。它有两个主要的子标签<head>和<body>。
文档结构
<!DOCTYPE>声明：它是 HTML 文档的第一行，用于告诉浏览器该文档使用的 HTML 版本。例如，<!DOCTYPE html>表示文档使用 HTML5 标准，这有助于浏览器正确地渲染页面。
<html>标签：是 HTML 页面的根标签，所有其他的 HTML 元素都应该包含在这个标签内部。它有两个主要的子标签<head>和<body>。
<head>标签：包含了文档的元数据，如文档标题、样式表引用、脚本引用等。例如：
html
复制
<head>
<title>我的网页</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>标签：包含了在浏览器中可见的页面内容，如文本、图像、链接等。
文本格式化
标题标签：<h1> - <h6>用于定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。例如：
html
复制
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
段落标签：<p>用于定义段落，浏览器会自动在段落之间添加一些空白间距。例如：
html
复制
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
加粗和斜体：<b>标签用于加粗文本，<i>标签用于使文本倾斜。不过在 HTML5 中，更推荐使用<strong>表示重要的文本（通常显示为加粗）和<em>表示强调的文本（通常显示为斜体），因为它们在语义上更准确。例如：
html
复制
<strong>这是加粗的重要内容</strong>
<em>这是斜体的强调内容</em>
换行标签：<br>用于在不创建新段落的情况下进行换行。例如：
html
复制
第一行<br>第二行
链接
超链接标签：<a>用于创建超链接。它的href属性指定了链接的目标 URL。例如：
html
复制
<a href="https://www.example.com">访问示例网站</a>
内部链接：可以链接到同一网站内的其他页面。假设你的网站有一个about.html页面，你可以这样创建链接：
html
复制
<a href="about.html">关于我们</a>
链接到文档中的特定位置：可以通过在目标页面定义id属性，并在链接的href属性中使用#加上id值来实现。例如，在目标页面有一个元素<h2 id="section2">第二部分</h2>，链接可以写成<a href="page.html#section2">跳转到第二部分</a>。
图像
<img>标签：用于在网页中插入图像。它的src属性指定图像的来源路径，alt属性提供图像的替代文本（当图像无法显示时显示，或者用于屏幕阅读器帮助视障人士理解图像内容）。例如：
html
复制
<img src="image.jpg" alt="一张美丽的风景图">
列表
无序列表：使用<ul>标签，每个列表项使用<li>标签。例如：
html
复制
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
有序列表：使用<ol>标签，列表项同样使用<li>标签。例如：
html
复制
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
表格
<table>标签：用于创建表格。它包含<tr>（表格行）、<th>（表头单元格）和<td>（表格数据单元格）标签。例如：
html
复制
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
表单
<form>标签：用于创建表单，它的action属性指定表单提交的目标 URL，method属性指定提交方法（通常是get或post）。例如：
html
复制
<form action="submit.php" method="post">
<!-- 表单元素放在这里 -->
</form>
文本输入框：<input type="text">用于创建文本输入框，name属性用于在表单提交时标识该字段。例如：
html
复制
<input type="text" name="username">
密码输入框：<input type="password">用于创建密码输入框，输入的内容会以掩码形式显示。例如：
html
复制
<input type="password" name="password">
提交按钮：<input type="submit">用于创建提交按钮，当用户点击时会提交表单。例如：
html
复制
<input type="submit" value="提交">
HTML5 新特性
语义化标签：如<header>（页面头部）、<nav>（导航栏）、<article>（文章内容）、<section>（文档的一个部分）、<aside>（侧边栏内容）、<footer>（页面底部）等，这些标签使 HTML 代码更具语义，便于搜索引擎理解和代码维护。例如：
html
复制
<header>
<h1>网站标题</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">联系我们</a>
</nav>
本地存储：HTML5 提供了localStorage和sessionStorage，用于在客户端存储数据。localStorage存储的数据没有过期时间，sessionStorage的数据在会话结束（浏览器关闭）时就会被清除。例如，存储一个用户名：
javascript
复制
// 使用JavaScript在HTML中操作
localStorage.setItem('username', '张三');
音频和视频标签：<audio>标签用于嵌入音频，<video>标签用于嵌入视频。例如：
html
复制
<audio src="music.mp3" controls></audio>
<video src="video.mp4" controls></video>
其中controls属性用于显示播放控制按钮。
🏰 大屏可视化 带你体验酷炫大屏
💯 神秘个人简介 带你体验不一样得介绍
🎀 酷炫邀请函 带你体验高大上得邀请
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）