当前位置：首页 > news >正文

传统前端入门 HTML

news 2025/11/26 10:43:51

HTML（HyperText Markup Language）是一种标记语言，用于创建和结构化网页及其内容。它是构建网页的基础标准语言。

常见标签

文档的结构标签：

<html>：定义整个 HTML 文档。
<head>：包含文档的元数据（例如标题、字符集、链接到样式表）。
<title>：定义文档的标题，在浏览器的标签栏中显示。

<body>：包含网页的内容部分，如文本、图像、链接等。

<!-- 注释 -->
<!-- DOCTYPE 表名本文档属于html5标准每个html标准都会收纳对应的标签
-->
<!DOCTYPE html>
<!--html为网页的根标签 嵌套包含所有标签一般情况：标签分为开始标签和结束标签，开始标签可以带有标签页的属性，结束标签一般带有/-->
<html lang="en"><!-- 头标签 -->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 主题 就是网页的名字 --><title>hello world</title>
</head>
<!-- 身体标签 -->
<body></body></html>

文本格式化标签

<h1> 到 <h6>：定义标题，<h1> 为最大标题，<h6> 为最小标题。
<p>：定义段落。
<b> 和 <strong>：加粗文本，<strong> 语义上更强。
<i> 和 <em>：斜体文本，<em> 语义上更强。

<sup> 和<sub>：上标和下标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>尝试</title>
</head>
<body><div><h1>一级块一级标题<span>span隔离标签</span></h1><p>段落</p><div><!-- <hr>水平分割线 --><hr><h1>二级块的一级标题</h1><p>段落段落段落<br>段落段落</p></div><b>粗体b    </b><strong>     粗体strong</strong><br><i>斜体i    </i><em>     斜体em</em><br><u>下划线u</u><br><del>删除线del</del><br><sup>上标</sup>文本sup文本sub<sub>下标</sub>co<sub>3</sub><sup>2-</sup></div>
</body>
</html>

列表

<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。

<dd>：有缩进、<dt>：没有缩进。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul><ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><dl><dt>与dd的等级是并列的但没有缩进</dt><dd>有缩进的自定义列表1</dd><dd>有缩进的自定义列表2</dd><dd>有缩进的自定义列表3</dd></dl>
</body>
</html>

图片、声音、视频和超链接

<a>：定义超链接，用于创建指向其他网页或资源的链接。
<img>：插入图像，需要 src 属性指定图像源 URL。
<audio>：插入声音。

<video>：插入视频。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span id="111">第一锚点</span><div><hr><hr><hr><span id="222">第二锚点</span><hr><hr><hr></div><div><video src="./video/9.乌龟绘图.mp4" controls width="300">视频</video></div><div><audio src="./audio/bg.mp3" controls width="300">声音</audio></div><div><img src="./img/1.png" alt="" width="300"></div><div><a href="http://www.baidu.com" title="百度" target="_blank">百度</a><a href="./第一批标签.html" target="_blank">打开第一批标签</a><a href="./第二批标签.html" target="_blank">打开第二批标签</a><a href="#111">回到第一锚点</a><a href="#222">回到第二锚点</a></div>
</body>
</html>

表格

<table>：定义表格。
<tr>：定义表格行。
<td>：定义表格单元格（数据）。

<th>：定义表格标题单元格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>表1</td><td>表2</td><td>表3</td></tr></table></body>
</html>

表单

<form>：定义表单，用于收集用户输入。
<input>：定义输入字段。
<textarea>：定义多行文本区域。
<button>：定义按钮。
<option>：定义选项。

<multiple>：多个选择。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form method="post" action="http://httpbin.org/post"><div><label for="username">用户名 <input name="用户名" required placeholder="请输入" type="text" id="username"></label></div><div><label for="password">密码 <input name="密码" required placeholder="请输入" type="password" id="password"></label></div><div><span>性别</span><label for="man">男 <input name="sex" value="man" type="radio" id="man"></label><label for="wemon">女 <input name="sex" value="wemon" checked type="radio" id="wemon"></label></div><div><span>年龄</span><input  type="range" min="0" max="100" step="1" name="age" value="range" ></label></div><div><span>兴趣</span><label for="backetball">篮球 <input name="new" value="backetball" type="checkbox" id="backetball" ></label><label for="fultball">足球 <input name="new" value="fultball"  type="checkbox" id="fultball" ></label><label for="ganlan">橄榄球 <input name="new" value="ganlan"  type="checkbox" id="ganlan"></label></div><div><span>颜色</span><input type="color" name="color" value="color" ></div><div><span>附件</span><input type="file"></div><div><span>户籍地</span><select name="shengfen" id="1"><option value="henan">河南</option><option value="shanxi1">陕西</option><option value="shanxi2">山西</option></select></div><div><span>多选</span><select name="duoxuan" id="" multiple size="4"><option value="henan1">河南</option><option value="shanxi1">陕西</option><option value="shanxi2">山西</option></select></div><div><span>输入</span><textarea name="text" id="" cols="50" rows="1" placeholder="请输入"></textarea></div><div><input type="submit" value="注册"><input type="reset" value="清空"></div></form>
</body>
</html>