开发学习网HTML基础标签全解析
原创HTML文档结构标签
1. <!DOCTYPE>
<!DOCTYPE>声明位于文档的最前面，告诉浏览器使用哪种HTML规范来解析页面。
<!DOCTYPE html>
2. <html>
<html>标签是HTML文档的根元素，包含整个HTML内容。
<html lang="zh-CN"> <!-- 整个HTML文档内容 --></html>
3. <head>
<head>元素包含了文档的元数据(meta)，如标题、字符编码、CSS链接等。
<head> <meta charset="UTF-8"> <title>我的网页</title> <link rel="stylesheet" href="styles.css"></head>
4. <body>
<body>元素包含了可见的页面内容。
<body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p></body>
文本内容标签
1. <h1>-<h6>
标题标签，<h1>定义最重要的标题，<h6>定义最不重要的标题。
<h1>主标题</h1><h3>副标题</h3><h3>小标题</h3>
2. <p>
段落标签，定义一个文本段落。
<p>这是一个段落。</p><p>这是另一个段落。</p>
3. <span>
行内容器标签，用于对文档中的行内元素进行组合。
<p>这是一段<span style="color:red">红色</span>的文字。</p>
4. <div>
块级容器标签，用于组合其他HTML元素。
<div style="background-color:lightblue"> <h3>这是一个标题</h3> <p>这是一个段落。</p></div>
链接与图像标签
1. <a>
超链接标签，用于创建链接。
<a href="https://www.example.com">访问示例网站</a><a href="#section2">跳转到第二节</a>
2. <img>
图像标签，用于嵌入图像。
<img src="image.jpg" alt="描述文本" width="200" height="100">
列表标签
1. <ul>和<li>
无序列表。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li></ul>
2. <ol>和<li>
有序列表。
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li></ol>
表格标签
1. <table>, <tr>, <th>, <td>
表格相关标签。
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr></table>
表单标签
1. <form>
表单标签，用于创建用户输入表单。
<form action="/submit" method="post"> <!-- 表单内容 --></form>
2. <input>
输入标签，有多种类型。
<input type="text" placeholder="文本输入"><input type="password" placeholder="密码输入"><input type="checkbox"> 复选框<input type="radio"> 单选按钮<input type="submit" value="提交">
3. <select>和<option>
下拉列表。
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option></select>
4. <textarea>
多行文本输入。
<textarea rows="4" cols="50">这里是多行文本输入的内容...</textarea>
语义化标签(HTML5)
1. <header>
定义文档或节的页眉。
<header> <h1>网站标题</h1></header>
2. <nav>
定义导航链接。
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a></nav>
3. <section>
定义文档中的节。
<section> <h3>章节标题</h3> <p>章节内容...</p></section>
4. <article>
定义独立的内容。
<article> <h3>文章标题</h3> <p>文章内容...</p></article>
5. <footer>
定义文档或节的页脚。
<footer> <p>版权信息</p></footer>
其他常用标签
1. <br>
换行标签。
<p>第一行<br>第二行</p>
2. <hr>
水平线标签。
<p>第一部分</p><hr><p>第二部分</p>
3. <strong>和<em>
强调文本。
<p><strong>重要文本</strong>和<em>强调文本</em></p>
以上是HTML中最基础也是最常用的标签，掌握这些标签及其用法是构建网页的基础。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)