在HTML中常用标签有一下这么几种，分别是：1.注释标签 2.标题标签 3.段落标签 4.换行标签 5.格式化标签 6.图片标签 7.超链接标签 8.表格标签 9.列表标签 10.表单标签 ，小煜哥会在下文中详细的进行介绍各个标签的作用及用法。
1.注释标签
快捷键Ctrl + /可以快速注释（取消注释）
注释不会在界面上面显示，注释的目的是提高代码的可读性。
2.标题标签
标题标签有6个：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，标签的数字越大，字体越小
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>3.段落标签
段落标签用<p>来定义
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
</body>段落标签保证了每一个段落是存在在一行的，并且距离下一个段落中间会空一行的间距。
4.换行标签
换行标签用<br>来定义
<body>
第一行<br>
第二行<br>
第三行<br>
</body><br>和<p>是不一样的，<br>只能进行换行，不会分段是每段之间有一空行，且br标签是一个“单标签”，只有开始标签，没有结束标签。
HTML的转义字符
| 实际字符 | 转义字符 |
| 单引号（'） | ' |
| 双引号（"） | " |
| 小于号（<） | < |
| 大于号（>） | > |
| 与（&） | & |
| 空格 | |
HTML语法中的部分特殊字符需要转义才能够正确的显示出来，我们需要注意，eg：空格，并非我们在代码中输入几个空格页面就会显示几个空格，而HTML会把相邻的空格合并成一个空格。而我们需要使用转义字符 ，需要多少空格就输入多少 ,才能正确的显示出来自己需要的样式。
5.格式化标签
- 加粗：strong 标签 和 b 标签
- 倾斜：em 标签 和 i 标签
- 删除线：del 标签 和 s 标签
- 下划线：ins 标签 和 u 标签
<body> <strong>加粗</strong> <b>加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除</del> <s>删除</s> <ins>下划线</ins> <u>下划线</u> </body>这块需要注意的是：格式化标签是作用在文本上的。格式化标签不会像之前的标题标签一样会独占一行，而是作为行内元素直接作用在被标签包裹的文本上的。
6.图片标签
图片标签用<img>来表示的，img中的src属性就代表的图片的路径，同样图片的格式和样式也是有属性来决定的。
<body>
<img src="cat.png" alt="小猫咪">
</body>alt的作用：如果图片加载错误，会显示图片描述信息。
图片尺寸的设置：
<body>
<img src="cat.png" alt="小猫咪" title="这是一个可爱的小猫咪" width="200px" height="100px" border="2.5px">
</body>知识拓展：在设置图片尺寸的时候，涉及到一个重要的单位：px，“像素”；每个像素都能显示一个不同的颜色，像素点越多，图片尺寸越大；一般认为，显示器的像素越多，整体的显示效果越好。
7.超链接标签
超链接标签用<a></a>来表示，其中的href属性表示点击后会跳转到某个页面，target表示打开方式，默认为_self，在本标签也打开，如果设置为_blank，则用新的标签页打开。
超链接又分为：外部链接、内部链接、空连接、下载链接、锚点链接。
外部链接
<a href="http://baidu.com">这是百度的一个超链接，点击后跳转至百度</a>内部链接
<a href="login.html">点击后跳转至自己文件夹中的另一个html网页</a>空链接
<a href="#">这是一个空链接</a>空连接不会跳转，它一般用于项目开发中还没有确定好链接地址的一个占位标志。
下载链接
<a href="cat.zip">点击可以下载这个压缩包</a>锚点链接
锚点链接类似于目录，点击后会跳转到页面中的特定位置。
8.表格标签
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域
<body>
<style>
td{
text-align:center;
}
</style>
<table border="1px" width="400px" height="200px" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<th>张三</th>
<th>123456</th>
</tr>
<tr>
<th>王五</th>
<th>123457</th>
</tr>
<tr>
<th>李四</th>
<th>123450</th>
</tr>
</table>
</body>9.列表标签
<body>
<h3>无序列表</h3>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>前端小煜哥</dt>
<dd>张三</dd>
<dd>李四</dd>
<dd>王五</dd>
<dd>赵六</dd>
</dl>
</body>10.表单标签
表单标签是用户和页面交互的重要手段，是要让用户来“输入”的。
form标签
用<form></form>来创建一个表单标签，借助form就可以允许用户输入一些信息，并且可以提交到服务器上。
input标签
- type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等
- name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一
- value: input 中的默认值
- checked: 默认被选中. (用于单选按钮和多选按钮)
- maxlength: 设定最大长度
<body>
<input type="text"><p></p>
<input type="password"><p></p>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<p></p>
<input type="checkbox">HTML5
<input type="checkbox">CSS3
<input type="checkbox">JavaScript
</body>选择文件：
<body>
<input type="file">
</body>onclick
<body>
<input type="button" value="这就是一个按钮" onclick="alert('hello html')">
<button onclick="alert('hello html')">这是一个按钮</button>
</body>onclick表示在点击元素的时候触发，触发的内容就是 " " 里的代码， 会被浏览器直接执行。这里的 alert 就是弹出一个对话框。
label标签
每一个 html 标签，都可以设置一个唯一的 id，在一个页面中，id 的取值不能重复。
可以通过这个 id 属性，在 input 标签设置选中框操作上搭配 label 标签，实现通过点击文字，也能选中的效果。
<body>
<input type="radio" name="gender" id="male">
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>
</body>select标签
select标签可以实现一个下拉菜单
<body>
<select>
<option>--请选择年份--</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
</select>
</body>textarea 标签
textarea 标签是一个可以指定多行编辑框的标签
<body>
<textarea cols="20" rows="10"></textarea>
</body>到这里呢，前端小煜哥就将HTML中的一些常见的标签介绍完了，欢迎大家前来借鉴，希望大家能够指出前端小煜哥的不足。
2897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
