html标签语法总结
满花楼 2024-08-28 10:33:02 阅读 72
HTML（超文本标记语言）是用于创建网页的标准标记语言。以下是 HTML 的基本语法格式：
文档声明
位于 HTML 文件的开头，告知浏览器使用的 HTML 版本，常见的有：
<!DOCTYPE html> 表示 HTML5 文档类型。
<html> 标签
这是 HTML 文档的根标签，所有其他的 HTML 元素都必须嵌套在 <html> 标签内。
<head> 标签
包含文档的元数据和相关的配置信息
<title>
定义网页的标题，显示在浏览器的标题栏或标签页上。<title>网页名称</title>
<meta>
用于提供关于文档的元数据，常见的属性如 charset 用于指定字符编码，name 和 content 用于定义各种描述信息，如页面描述、关键词等，以利于搜索引擎优化。
字符编码：<meta charset="UTF-8">
页面描述：<meta name="description" content="这是一个关于网页内容的简短描述">
关键词：<meta name="keywords" content="html, 网页开发, 示例">
<link>
用于链接外部资源，如 CSS 样式表、图标等。
链接 CSS 样式表：<link rel="stylesheet" type="text/css" href="styles.css">
<script>
可以嵌入或链接 JavaScript 脚本。
嵌入脚本：<script>console.log('Hello World!');</script>
引用外部脚本：<script src="script.js"></script>
<style> ：用于在 HTML 文档中直接编写 CSS 样式。
<style>h1 { color: red; }</style>
<body> 标签
分区标签
<div>：用于划分页面区域，进行布局。
<code>div class="header">code>
<h1>网页标题</h1>
</div>
<div class="main-content">code>
<p>这是主要内容区域。</p>
</div>
<div class="sidebar">code>
<ul>
<li>侧边栏项目 1</li>
<li>侧边栏项目 2</li>
</ul>
</div>
<div class="footer">code>
<p>版权信息</p>
</div>
文本相关标签
1. <code><p> 标签（段落标签）：用于定义一个段落。
示例：<p>这是一个段落的文本。</p>
2. <h1> 到 <h6> 标签（标题标签）：用于定义不同级别的标题，<h1> 是最大的标题，<h6> 是最小的标题。
示例：<h1>一级标题</h1> <h2>二级标题</h2>
3. <span> 标签：用于对行内的文本进行样式设置或操作。
示例：<p>这是一段文本 <span style="color:red;">其中这部分是红色的</span></p>code>
4. <b> 标签（加粗标签）：使文本加粗显示。
示例：<b>这部分文本加粗</b>
5. <i> 标签（斜体标签）：使文本以斜体显示。
示例：<i>这部分文本是斜体</i>
6. <u> 标签（下划线标签）：为文本添加下划线。
示例：<u>这部分文本有下划线</u>
7. <strong> 标签（强调标签）：通常表示文本的重要性，效果类似于 <b> 但语义更强调重要性。
示例：<strong>这是重要的文本</strong>
8. <em> 标签（强调标签）：用于强调文本，效果类似于 <i> 但语义更强调语气。
示例：<em>这是需要强调的文本</em>
9. <blockquote> 标签（引用块标签）：用于引用大块的文本。
示例：<blockquote>这是一段引用的大段文本。</blockquote>
10. <pre> 标签（预格式化文本标签）：保留文本中的空格、换行等格式。
示例：<pre> 这是 预格式化 的文本 </pre>
<p>这是一个段落的文本。</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一段文本 <span style="color:red;">其中这部分是红色的</span></p>code>
<b>这部分文本加粗</b>
<i>这部分文本是斜体</i>
<u>这部分文本有下划线</u>
<strong>这是重要的文本</strong><p>
<em>这是需要强调的文本</em>
<blockquote>这是一段引用的大段文本。</blockquote>
<pre> 这是 预格式化 的文本 </pre>
列表标签
<ul>（无序列表）和 <li>（列表项）。
<code><ul>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
<ol>（有序列表）和 <li>（列表项）。
<code><ol>
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ol>
图像标签
<img>：用于插入图片。
<code>src ：指定图像的路径，可以是相对路径或绝对路径，也可以是网络 URL 。
例如：<img src="image.jpg">code>alt ：当图像无法显示时，显示的替代文本，对于可访问性很重要。
例如：<img src="image.jpg" alt="图片无法显示">code>width 和 height ：设置图像的宽度和高度，可以是像素值或百分比。
例如：<img src="image.jpg" width="300" height="200">code> 或 <img src="image.jpg" width="50%" height="50%">code>
超链接标签
<a>：创建链接到其他页面或资源的超链接。
href ：指定链接的目标地址，可以是网页、文件、电子邮件地址等。
例如：<a href="https://www.example.com">访问示例网站</a>code>target ：指定链接打开的方式，常见的值有 _self （在当前窗口或标签页中打开，默认值）、 _blank （在新的窗口或标签页中打开）。
例如：<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>code>
表格标签
<table> ：定义表格。<tr> ：定义表格的行。<td> ：定义表格的数据单元格。<th> ：定义表格的表头单元格，通常表头单元格中的内容会加粗并居中显示。
<!DOCTYPE html>
<html>
<body>
<table border="1">code>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
</body>
</html>
表单标签
<form>：用于定义表单区域。
<code>action 属性：指定表单数据提交的目标 URL。method 属性：指定提交表单数据的方法，常见的值有 GET 和 POST
<input>：用于创建输入字段，类型多样。
type 属性：决定输入字段的类型，如 text （文本输入）、 password （密码输入）、 radio （单选按钮）、 checkbox （复选框）、 submit （提交按钮）、 reset （重置按钮）等。
<input type="text" name="username">code>
<input type="password" name="password">code>
<input type="radio" name="gender" value="male"> 男code>
<input type="radio" name="gender" value="female"> 女code>
<input type="checkbox" name="hobby" value="reading"> 阅读code>
<input type="submit" value="提交">code>
<textarea>：用于创建多行文本输入区域。
<code>rows 和 cols 属性：分别指定行数和列数。
<textarea name="description" rows="5" cols="30"></textarea>code>
<select> 和 <option>：下拉列表。
<code> <select name="country">code>
<option value="china">中国</option>code>
<option value="usa">美国</option>code>
<option value="uk">英国</option>code>
</select>
<label> ：为表单元素添加标签，提高可访问性。
<code><label for="username">用户名：</label>code>
<input type="text" id="username">code>
标题标签
<h1> 到 <h6>：不同级别的标题。
<code><body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
注释
注释以 <!-- 开头，以 --> 结束。
例如：<!-- 这是一段注释 -->
上一篇： 【Web APIs】JavaScript 操作多个元素 ② ( 动态换肤效果 | 取消内外边距样式 | 设置背景 | 取消 li 默认样式 | 改变界面样式 | 精确计算布局宽度 )
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。