概述
1 需求
HTML基础知识
- 基础标签：DOCTYPE标签、html标签、title标签、body标签、h1-h6标签、hr标签、br标签
- 格式标签：
- 链接标签：a标签
- 图像标签：img标签
- 列表标签：ol标签、ul标签、li标签
- 表格标签：table标签、tr标签、th标签、td标签
- 表单标签：form标签、input标签、button标签、select标签、option标签
- form标签：action属性、method属性、enctype属性
- input标签/button标签：id属性、class属性、name属性、value属性
- 样式标签：style标签
- 程序标签：script标签
2 语法
3 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
}
form {
border: 1px black solid;
margin: 0 auto;
width: 20%;
text-align: center;
}
</style>
</head>
<body>
<h1>标题（h1~h6标签）</h1>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr />
<h1>段落（p标签）</h1>
<p>段落1</p>
<p>段落2</p>
<hr />
<h1>换行（br标签）</h1>
第一行<br />
第二行
<hr />
<h1>格式（b标签、em标签、strong标签、i标签、del标签、u标签、small标签、sup标签、sub标签、pre标签）</h1>
<b>b：粗体文本</b><br />
<i>i：斜体文本</i><br />
<em>em：强调文本</em><br />
<strong>stong：语气更为强调的文本</strong><br />
<del>del：删除线</del><br />
<u>u：下划线</u><br />
<small>small：小号文本</small><br />
x<sup>2</sup><br />
x<sub>2</sub><br />
<pre>
1
2
3
</pre>
<hr />
<h1>图像（img标签、src属性、alt属性、title属性）</h1>
<img src="https://www.baidu.com/img/flexible/logo/pc/peak-result.png" alt="替代文本" title="提示文本"
style="background-color: black;" />
<hr />
<h1>链接（a标签、href属性、target属性）</h1>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<hr />
<h1>无序列表（ul标签、li标签）</h1>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<hr />
<h1>有序列表（ol标签、li标签）</h1>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<hr />
<h1>普通表格（table标签、tr标签、th标签、td标签、caption标签、thead标签、tbody标签、tfoot标签）</h1>
<table border="1">
<caption>表格标题</caption>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<hr />
<h1>跨行表格（rowspan属性）</h1>
<table border="1">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<!-- <td>21</td> -->
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<hr />
<h1>跨列表格（colspan属性）</h1>
<table border="1">
<tr>
<td colspan="2">11</td>
<!-- <td>12</td> -->
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<hr />
<h1>表单-登录框</h1>
<ul>
<li>form标签：action属性、method属性、enctype属性</li>
<li>input标签：type属性、id属性、class属性、name属性、value属性、placeholder属性</li>
<li>button标签：type标签、name标签</li>
</ul>
<form action="" method="" enctype="" onsubmit="">
<h6>用户登录</h6>
账号：<input type="text" id="" class="" name="" value="" placeholder="请输入用户名" /><br />
密码：<input type="" placeholder="请输入密码" /><br />
<button type="reset">重置</button>
<button type="submit">登录</button><br />
<a href="" target="_blank">忘记密码</a>
<a href="" target="_blank">立即注册</a>
</form>
<hr />
<h1>表单-文件上传</h1>
<form action="" method="" enctype="">
<input type="file" name="" />
<button type="submit">上传</button>
</form>
<hr />
<h1>表单-单选按钮</h1>
<form>
<input type="radio" name="gender" value="male" checked />男
<input type="radio" name="gender" value="female" />女
<button type="submit">提交</button>
</form>
<hr />
<h1>表单-复选按钮</h1>
<form>
<input type="checkbox" name="hobby[]" value="basketball" />篮球
<input type="checkbox" name="hobby[]" value="football" />足球
<input type="checkbox" name="hobby[]" value="pingpang" />乒乓球
<button type="submit">提交</button>
</form>
<hr />
<h1>表单-下拉列表（单选）</h1>
<form>
<select name="">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit">提交</button>
</form>
<hr />
<h1>表单-下拉列表（多选）</h1>
<form>
<select name="" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit">提交</button>
</form>
<hr />
<h1>表单-只读文本、禁用文本、必填文本</h1>
<form>
只读文本：<input type="text" value="只读文本" readonly /><br />
禁用文本：<input type="text" value="禁用文本" disabled /><br />
必填文本：<input type="text" required /><br />
<button type="submit">提交</button>
</form>
<hr />
</body>
</html>
4 参考资料
最后
以上就是高大薯片为你收集整理的Web开发技能树-HTML-标签列表（功能排序）的全部内容，希望文章能够帮你解决Web开发技能树-HTML-标签列表（功能排序）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复