html语法大全-百问三三

html语法大全

HTML 语法大全

HTML（超文本标记语言，HyperText Markup Language）是用于创建网页和网上应用的标准标记语言。以下是一个全面的HTML语法指南，帮助你掌握HTML的基本元素、标签和属性。

一、基本结构

每个HTML文档都包含以下几个基本部分：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title>  </head> <body>  </body> </html>

<!DOCTYPE html>：声明文档类型，告知浏览器这是一个HTML5文档。
<html lang="zh-CN">：<html>标签定义整个HTML文档的根元素，lang属性指定文档的语言。
<head>：包含文档的元数据（metadata），如字符集、标题、样式表链接等。
<meta charset="UTF-8">：设置文档的字符编码为UTF-8。
<title>：定义文档的标题，显示在浏览器的标签栏或标题栏上。
<body>：包含页面的可见内容。

二、常用标签

1. 文本格式化标签

<h1> 到 <h6>：表示六个级别的标题，<h1>级别最高，<h6>级别最低。
<p>：段落标签，用于定义文本段落。
<br>：换行标签，插入一个简单的换行符。
<hr>：水平线标签，插入一条水平线分隔内容。
<strong> 或 <b>：加粗文本，<strong>有语义上的强调含义。
<em> 或 <i>：斜体文本，<em>有语义上的强调含义。
<u>：下划线文本。
<del>：删除线文本。
<mark>：高亮文本。
<small>：小号字体文本。
<sub>：下标文本。
<sup>：上标文本。

2. 列表标签

<ul>：无序列表（unordered list）。
- <li>：列表项（list item）。
<ol>：有序列表（ordered list）。
- <li>：列表项（list item）。
<dl>：描述列表（description list）。
- <dt>：描述术语（description term）。
- <dd>：描述详情（description detail）。

3. 链接与导航标签

<a href="URL" target="_blank">：超链接标签，href属性指定目标地址，target="_blank"在新窗口打开链接。
<nav>：导航栏标签，通常包含一组链接。
<link rel="stylesheet" href="CSS文件路径">：在<head>中引入外部CSS文件。

4. 图像与多媒体标签

<img src="图片路径" alt="替代文本">：图像标签，src属性指定图像路径，alt属性提供图像的替代文本。
<audio controls>：音频标签，controls属性显示播放控件。
- <source src="音频文件路径" type="音频格式">：指定音频文件的来源和格式。
<video controls>：视频标签，controls属性显示播放控件。
- <source src="视频文件路径" type="视频格式">：指定视频文件的来源和格式。
<track kind="subtitles" srclang="en" src="字幕文件路径" label="English Subtitles">：视频的字幕轨道。

5. 表单标签

<form action="提交地址" method="post/get">：表单标签，action属性指定表单提交的地址，method属性指定提交方式。
<input type="text/password/email/number/submit/reset/...">：输入字段，type属性指定输入类型。
<textarea rows="行数" cols="列数"></textarea>：多行文本输入区域。
<label for="inputId">标签文本</label>：为表单元素定义标签，for属性与表单元素的id属性关联。
<select>：下拉选择菜单。
- <option value="值">选项文本</option>：下拉选项。
<button type="button/submit/reset">按钮文本</button>：按钮标签，type属性指定按钮类型。
<fieldset>：将表单中的相关元素分组。
- <legend>分组标题</legend>：为<fieldset>定义标题。

6. 表格标签

<table>：表格标签。
- <tr>：表格行（table row）。
  - <th>：表头单元格（table header cell），默认居中且加粗。
  - <td>：表格数据单元格（table data cell）。
- <caption>：表格标题，位于表格上方。
- <thead>：表格头部，包含一行或多行表头。
- <tbody>：表格主体，包含一行或多行数据。
- <tfoot>：表格尾部，通常包含总结性数据。
- <col> 和 <colgroup>：定义表格列的属性和样式。

7. 分区与框架标签

<div>：块级容器标签，用于布局和样式化。
<span>：内联容器标签，用于文本的局部样式化。
<header>：页眉标签，通常包含导航栏、标志等。
<footer>：页脚标签，通常包含版权信息、联系信息等。
<section>：节标签，用于划分文档的不同部分。
<article>：文章标签，表示独立的内容块。
<aside>：侧边栏标签，表示与主要内容相关的辅助内容。
<main>：主内容标签，包含页面的主要内容。
<iframe src="URL" width="宽度" height="高度"></iframe>：内嵌框架标签，用于在当前页面中嵌入另一个页面。

三、全局属性

许多HTML标签支持以下全局属性：

class：为元素分配一个或多个类名（classname），用于CSS和JavaScript。
id：为元素分配唯一的ID标识符。
style：直接在元素上定义CSS样式。
title：为元素提供额外的说明信息，通常显示为工具提示。
data-*：自定义数据属性，以data-开头，存储额外信息。
hidden：隐藏元素，不占用空间。
tabindex：控制元素的焦点顺序。
accesskey：设置快捷键访问元素。
contenteditable：使元素可编辑。
spellcheck：启用或禁用拼写检查。
draggable：设置元素是否可拖动。
translate：设置元素或其子元素的文本是否需要翻译。

四、注释

HTML注释用于解释代码或在开发过程中临时移除某些代码段。注释不会在页面上显示。

五、实体引用

HTML中的一些特殊字符需要使用实体引用来表示，以避免被误认为是HTML标签或属性的一部分。

< 表示 <
> 表示 >
& 表示 &
" 表示 "
' 表示 '
¢ 表示 ¢
£ 表示 £
¥ 表示 ¥
€ 表示 €
  表示空格（non-breaking space）

六、最佳实践

语义化标签：使用具有语义的标签（如<header>、<footer>、<article>等），有助于SEO和提高可读性。
缩进与格式：保持一致的缩进和格式，提高代码的可读性和维护性。
避免内联样式：尽量将样式放在外部的CSS文件中，实现内容与样式的分离。
无障碍设计：确保网站对所有用户（包括视力障碍者）都是友好的，使用aria-*属性增强无障碍性。
响应式设计：使用媒体查询和其他技术，使网站在不同设备和屏幕尺寸上都能良好显示。

通过以上指南，你可以开始构建自己的HTML网页了！随着你对HTML的了解加深，还可以进一步学习CSS和JavaScript来丰富你的网页功能和样式。