本文主要是介绍html标签快速入门，案例详细，通俗易懂。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
安装软件：vscode
初识html
<!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></body>
</html>分析：
1.<html></html> 为网页的根标签 嵌套包含所有的标签。 一般情况标签分为开始标签和结束标签 开始标签中可以带有标签属性 格式：key="value" key="value" 结束标签带有 / 。 html标签里只存在两种标签 head 与 body
2.lang属性是HTML中用于指定文档语言的一个重要属性
3.<head></head> 头标签 用于编写网页的装饰内容，附加信息
4.<meta> 元标签 没有结束标签
5.<title></title> 网页标题
6.<body></body> 身体标签用于编写展示内容 用户可以看见 或者可以交互内容
第一批标签
<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
<h4></h4> 四级标题
<h5></h5> 五级标题
<h6></h6> 六级标题
hr 分割线
<br> 换行标签
<p></p>段落标签
<div></div>块标签
代码示例：
<!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><div style="background-color: aqua;">我是一块<h1>一级标题</h1><hr><h2>二级标题</h2><hr><h3>三级标题</h3><hr><h4>四级标题</h4><hr><h5>五级标题</h5><hr><h6>六级标题</h6><span style="color: blue;">普通文本</span><hr><p>段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 <br>单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距</p></body>
</html>第二批标签
字体相关标签
<b></b> <strong></strong> 粗体
<i></i> <em></em> 斜体
<u></u> 下划线
<del></del> 中划线
<sup></sup> 上标
<sub></sub> 下标
代码示例：
<!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><h2>字体相关标签</h2><p>粗体：<b>哈哈1</b>,<strong>哈哈2</strong><br>斜体:<i>html1</i>,<em>html2</em><br>下划线：<u>啊哈</u><br>中划线：<del>嘿嘿</del><br>上标： H<sup>+</sup><br>下标： H<sub>2</sub>O<br>2H<sub>2</sub>O = 4H<sup>+</sup>+ 2O<sup>2-</sup></p>
</body></html>第三批标签
列表标签
<ul>
<li></li>
</ul> 无序列表
<ol>
<li></li>
</ol> 有序列表
<dl>
<dt></dt>
<dd></dd>
</dl> 自定义列表
代码示例：
<!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><div><h2>无序列表</h2><!-- ul>li*3{无序列表$} --><ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul><h2>有序列表</h2><ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li></ol><h2>自定义列表</h2><dl><dt>项目1</dt><dd>自定义列表1</dd><dt>项目1</dt><dd>自定义列表2</dd><dt>项目1</dt><dd>自定义列表3</dd><dd>自定义列表4</dd><dd>自定义列表5</dd><dd>自定义列表6</dd></dl></div>
</body></html>第四批标签
表格
<tr>
<th>表头单元格</th>
<tr>
<tr>
<td>普通单元格</td>
</tr>
属性
cellpadding 用于设置单元格内容与单元格边框之间的距离
cellspacing 用于设置单元格之间的距离
colspan 用于合并表格中的单元格,合并同一行的不同列
rowspan 用于合并表格中的单元格,合并同一列的不同行
align 用于设置元素的水平对齐方式（左对齐、右对齐、居中）
width 用于设置元素的宽度
border 用于设置元素的边框
代码示例：
<!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><div><h2>表格</h2><table border="" cellpadding="5" cellspacing="3" align="center" width="900"><tr><th>表头单元格1</th><th>表头单元格2</th><th>表头单元格3</th></tr><tr style="text-align: center;"><td colspan="2">普通单元格1</td><td>普通单元格3</td></tr><tr><td style="text-align: center;">普通单元格1</td><td colspan="2" rowspan="2"><table border="" width="100%" cellpadding="10" cellspacing="0"><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr></table></td></tr><tr><td style="text-align: center;">普通单元格1</td></tr></table></div></body></html>第五批标签
视频 <video src=" "></video>
声音 <audio src=" "></audio>
图片 <img src=" ">
超链接 <a href="网址"></a>
代码示例：
<!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><div><p id="mmm">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h2>视频</h2><video src="./video/剑来03.mp4" controls="controls" width="500"></video></div><div><h2>音频</h2><audio src="./audio/background.mp3" controls="controls"></audio></div><div><h2>图片</h2><img src="./img/beautiful..jpg" alt="" width="500"></div><div><h2>超链接</h2><a href="www.baidu.com">百度</a><a href="https://blog.csdn.net/rank/list/force?type=city">CSDN排行榜</a><a href="#mmm">mmm的锚点</a></div></body>
</html>第六批标签
框架标签
<iframe></iframe>
代码示例：
<!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><h1>框架标签</h1><iframe src="https://www.baidu.com/" frameborder="1" width="100%" height="900">个人主页</iframe>
</body>
</html>第七批标签
表单
<form></form>
表单标签属性
action 指定表单数据提交到的URL
method 指定表单数据提交的方法（GET或POST）
表单域（输入单行文本）
（1）文本输入框（input）
type 指定输入框的类型（如
text、password、number等）name 指定输入框的名称，用于在提交表单时标识该输入框
value 指定输入框的默认值
（2）文本区域（textarea）
name 指定指定文本区域的名称，用于在提交rows时标识该输入框
rows 指定文本区域的行数
cols 指定文本区域的列数
（3）单选按钮（type="radio"）
name 指定单选按钮组的名称，同一组的单选按钮应具有相同的
namevalue 指定单选按钮的值
checked 指定默认选中的单选按钮
（4）复选框（type="checkbox"）
同上单选按钮属性
（5）下拉列表（select）
name 指定下拉列表的名称
（6）表单按钮
1.提交按钮（type="submit" value="提交"）
2.重置按钮（type="reset" value="重置"）
3.普通按钮（type="button" value="自定义按钮名字"）
代码示例：
<form action="https://httpbin.org/post" method="post"><!-- 表单标签，指定数据提交的URL和方法 --><div><!-- 账号输入框 --><label for="values">账号：</label><input name="zhanghao" id="values" required placeholder="请输入账号" type="text"><br><!-- name="zhanghao"：输入框的名称，用于服务器识别数据id="values"：输入框的唯一标识符，用于与label标签关联required：输入框为必填项placeholder="请输入账号"：输入框的提示文本type="text"：输入框类型为文本--><!-- 密码输入框 --><label for="password">密码：</label><input name="password" id="password" type="password"><!-- name="password"：输入框的名称，用于服务器识别数据id="password"：输入框的唯一标识符，用于与label标签关联type="password"：输入框类型为密码，输入内容会被隐藏--></div><div><!-- 性别选择 --><span>性别:</span><label for="man">男</label><input id="man" name="sex" value="man" checked type="radio"> <!-- id="man"：单选按钮的唯一标识符，用于与label标签关联name="sex"：单选按钮组的名称，同一组的单选按钮应具有相同的namevalue="man"：单选按钮的值，提交表单时发送的值checked：默认选中状态type="radio"：单选按钮类型--><label for="woman">女</label><input id="woman" name="sex" value="women" type="radio"><!-- id="woman"：单选按钮的唯一标识符，用于与label标签关联name="sex"：单选按钮组的名称，同一组的单选按钮应具有相同的namevalue="women"：单选按钮的值，提交表单时发送的值type="radio"：单选按钮类型--></div><div><!-- 爱好选择 --><span>爱好：</span><label for="football">足球</label><input name="hobby" value="football" id="football" type="checkbox"><!-- name="hobby"：复选框的名称，用于服务器识别数据value="football"：复选框的值，提交表单时发送的值id="football"：复选框的唯一标识符，用于与label标签关联type="checkbox"：复选框类型--><label for="basketball">篮球</label><input name="hobby" value="basketball" id="basketball" type="checkbox"><!-- name="hobby"：复选框的名称，用于服务器识别数据value="basketball"：复选框的值，提交表单时发送的值id="basketball"：复选框的唯一标识符，用于与label标签关联type="checkbox"：复选框类型--><label for="badminton">羽毛球</label><input name="hobby" value="badminton" id="badminton" checked type="checkbox"><!-- name="hobby"：复选框的名称，用于服务器识别数据value="badminton"：复选框的值，提交表单时发送的值id="badminton"：复选框的唯一标识符，用于与label标签关联checked：默认选中状态type="checkbox"：复选框类型--></div><div><!-- 年龄选择 --><label>年龄：</label><input type="range" name="age" min="1" max="110" step="1"><br><!-- type="range"：范围选择器类型name="age"：范围选择器的名称，用于服务器识别数据min="1"：范围选择器的最小值max="110"：范围选择器的最大值step="1"：范围选择器的步长--><!-- 日期选择 --><label>日期：</label><input type="datetime-local" name="datetime"><!-- type="datetime-local"：日期时间选择器类型name="datetime"：日期时间选择器的名称，用于服务器识别数据--></div><div><!-- 颜色选择 --><label>颜色：</label><input type="color" name="color"><!-- type="color"：颜色选择器类型name="color"：颜色选择器的名称，用于服务器识别数据--></div><div><!-- 附件上传 --><label>附件：</label><input type="file" name="fujian"><!-- type="file"：文件上传控件类型name="fujian"：文件上传控件的名称，用于服务器识别数据--></div><div><!-- 居住地址选择 --><label>居住地址</label><select name="address"><option name="南阳">南阳</option><option name="郑州" selected>郑州</option><option name="河南">河南</option></select><!-- name="address"：下拉列表的名称，用于服务器识别数据<option>：下拉列表的选项name="南阳"：选项的名称selected：默认选中状态--></div><div><!-- 留言框 --><label>留言：</label><textarea name="liuyan" cols="30" rows="10"></textarea><!-- name="liuyan"：文本区域的名称，用于服务器识别数据cols="30"：文本区域的列数rows="10"：文本区域的行数--></div><div><!-- 提交按钮 --><input type="submit" value="注册"><!-- type="submit"：提交按钮类型value="注册"：按钮上显示的文本--><!-- 重置按钮 --><input type="reset" value="清空"><!-- type="reset"：重置按钮类型value="清空"：按钮上显示的文本--></div>
</form>有疑问的小伙伴欢迎评论区留言！
这篇关于html标签快速入门，案例详细，通俗易懂。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
