这篇HTML教程介绍了基础的标签元素，如超链接、字体样式，并展示了如何创建表格、列表和表单。通过示例代码，解释了不同属性如`target`、`align`、`readonly`等的用途，还涵盖了表单中的输入类型，如文本框、按钮、选择框、多行文本等，以及图片和视频的插入。
(下面源代码来自网络，应该是某位GITHUB主的HTML入门教程中出现的，得知是谁后我会补充这一块内容，侵删）
本html部分将分为若干章节，对下面HTML源代码中出现的内容有选择地进行注释。
推荐您在学习HTML的时候关注效果展示
获得效果展示的方法：复制下面HTML源码，存为html文件，浏览器中打开即可看到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node_of_HTML</title>
</head>
<body>
<h1 align="center">提醒：学习时右键查看源代码</h1>
<br />
<!--换行-->
<h2>第一部分-简单标签元素</h2>
<a href="https://www.bilibili.com">1.超链接（默认替换链接）</a>
<br /><br />
<a href="https://www.bilibili.com" target="_blank">2.新建窗口跳转至链接</a>
<br /><br />
<a href="https://www.bilibili.com" target="_self">3.原窗口替换链接</a>
<br /><br />
4.这一行是没有粗体、斜体时的效果，对比下面
<br /><br />
<b>5.这个是粗体</b>
<br /><br />
<em>6.斜体效果</em>
<br /><br />
<u>7.下划线效果</u>
<br /><br />
<s>8.删除效果</s>
<br /><br />
<b><em><u><s>9.粗体、斜体、下划线、删除效果叠加</s></u></em></b>
<br /><br />
<h2>第二部分-表格------------------------华丽的分割线---------------------------------</h2>
<br /><br /><b>1.普通表格</b><br />
<br />
<table border="1px" align="center">
<!-- <tr>
<td>名字</td>
<td>性别</td>
<td>密码</td>
</tr>-->
<thead>
<tr>
<th>名字</th>
<th>性别</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Admin</td>
<td>男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
<td>123</td>
</tr>
<tr>
<td>Violet</td>
<td>女</td>
<td>456</td>
</tr>
<tr>
<td>Andy</td>
<td>男</td>
<td>xxx</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>名字</th>
<th>性别</th>
<th>密码</th>
</tr>
</tfoot>
</table>
<br />
<br /><br /><b>2.合并表格</b><br />
<table border="1px" align="center">
<tr>
<th rowspan="2">aaa</th>
<th>aaa</th>
<th>aaa</th>
<th>aaa</th>
</tr>
<tr>
<!--<td>aaa</td>-->
<td colspan="2">aaa</td>
<td>aaa</td>
<!--<td>aaa</td>-->
<!--合并的时候，把多的单元格注释掉-->
</tr>
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
<br /><br /><b>3.列表-分别为顺序、倒序和英文字母顺序排列</b><br />
<br />
<b>(1)顺序排列</b>
<ol>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<br>
<b>(2)倒序排列</b>
<ol reversed>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<br>
<b>(3)英文字母顺序排列</b>
<ol type="a">
<li>你好</li>
<li>我好</li>
<li>大家好</li>
</ol>
<br /><br /><b>4.列表嵌套</b><br />
<ol>
<li>图像处理</li>
<ol type="a">
<li>java</li>
<li>python</li>
<li>PHP</li>
</ol>
<li>大数据处理</li>
<ol type="a">
<li>java</li>
<li>python</li>
<li>PHP</li>
</ol>
<li>自然语言处理</li>
<ol type="a">
<li>java</li>
<li>python</li>
<li>PHP</li>
</ol>
</ol>
<br /><br /><b>5.无序标签</b><br />
<br />
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<br /><br />
<h2>第三部分-表单------------------------华丽的分割线---------------------------------</h2>
<form>
<br /><br /><b>1.普通文本框（可以输入信息）</b><br />
<input>
<!--文本框-->
<input type="index">
<!--同上面效果-->
<br /><br /><b>2.含占位符的文本框</b><br />
<input type="index" value="java天下第一">
<!--占位符-->
<br /><br /><b>3.不含占位符的文本框（有提示）</b><br />
<input type="index" placeholder="输入账号">
<!--不占位-->
<br>
<input type="index" placeholder="输入密码">
<br /><br /><b>4.限定输入字符数大小的文本框</b><br />
<input type="index" placeholder="maxlength" maxlength="5">
<!--最大能输入的字符-->
<br /><br /><b>5.拓宽了的的文本框</b><br />
<input type="index" placeholder="输入密码" size="50">
<!--拓宽单行文本框-->
<br /><br /><b>6.只读的文本框</b><br />
<input type="index" value="你删不了我哈哈" readonly>
<!--只读-->
<br /><br /><b>7.密码隐藏的文本框</b><br />
<input type="password" placeholder="输入密码">
<br /><br /><b>8.多行表单，任意拉伸</b><br />
<textarea rows="20">
投我以木瓜，报之以琼琚。匪报也，永以为好也！投我以木桃，报之以琼瑶。匪报也，永以为好也！投我以木李，报之以琼玖。匪报也，永以为好也！《木瓜》是先秦时期卫国的一首描述爱情的民歌，是通过赠答表达深厚情意的诗作，传诵极广。成语“投桃报李”便出自这里。礼尚往来是中华民族的传统美德，不止友人，恋人之间也是如此。礼物本身的价值已不重要，象征意义更加突出，以示两心相许，两情相悦</textarea>
<br /><br /><b>9.按钮</b><br />
<input type=button value="按钮1">
<br>
<button>按钮2</button>
<!--js合作并且作为绑定事件的-->
<br>
<input type="submit" value="提交">
<!--提交表单-->
<br /><br /><b>10.范围选择</b><br />
<input type="range" min="-100" max="100">
<input type="range" min="-200" max="200" step="100">
<input type="range" min="-200" max="200" step="100" value="-200">
<!--数字滑动-->
<br />
<input type="number" min="-100" max="100" value="0">
<!--上下调值-->
<br /><br /><b>11.选择框</b><br />
<input type="checkbox">选择
<br /><br /><b>12.单选框</b><br />
那个语言天下第一<br>
<input type="radio" name="a" checked>java
<input type="radio" name="a">PHP
<input type="radio" name="a">JavaScript
<br /><br /><b>12.下拉选择表单</b><br />
你最喜欢的手机品牌是什么
<br>
<select>
<option>华为</option>
<option>荣耀</option>
<option>苹果</option>
</select>
<br /><br /><b>13.下拉选择表单及手动输入</b><br />
<input type="text" placeholder="其他水果请输入" list="datalist1">
<datalist id="datalist1">
<option>苹果</option>
<option>香脚</option>
<option>西瓜</option>
</datalist>
<br /><br /><b>14.邮件、电话、url、日期颜色等</b><br />
<input type="email">
<input type="tel">
<input type="url">
<input type="date">
<!--获取日期-->
<input type="color">
<!--获取颜色-->
<br /><br /><b>15.隐藏表单</b><br />
<input type="hidden" value="123">
<!--浏览器上不显示，被隐藏起来了-->
<br /><br /><b>16.图片按钮及选择文件</b><br />
薇尔莉特永远喜欢我！<br>
<input type="image" src="violet.jpg" width="20%">
<!--图片按钮-->
<br>
<input type="file" multiple>
<!--可以选择一个文件，或者用multiple选择多个文件-->
</form>
<br /><br />
<h2>第四部分-插入图片------------------------华丽的分割线---------------------------------</h2>
<br /><br /><b>1.创建图片</b><br />
<!--<img src="violet.jpg">-->
<img src="violet.jpg" width="128px" alt="薇尔莉特">
<br /><br /><b>2.找不到图片时</b><br />
<img src="viole.jpg" width="128px" alt="薇尔莉特">
<!--alt在找不到文件时备用-->
<br /><br /><b>3.点击图片跳转到某个网站</b><br />
<a href="https://www.bilibili.com/bangumi/media/md8892/?from=search&seid=14554523757864175862" target="_blank">
<img src="violet.jpg" width="128px" alt="薇尔莉特">
</a>
<br /><br />
<h2>第五部分-插入视频------------------------华丽的分割线---------------------------------</h2>
<br /><br /><b>点击进行播放</b><br />
<!--<video src="gameplay.mp4" autoplay></video>-->
<video src="gameplay.mp4" controls preload="auto" poster="violet.jpg"></video>
<h2>第六部分-插入音频------------------------华丽的分割线---------------------------------</h2>
<br /><br /><b>提醒：调节好音量后点击进行播放</b><br />
<!--<audio src="FlowerFire.mp3" autoplay controls></audio>-->
<!--自动播放-->
<audio src="FlowerFire.mp3" controls></audio>
</body>
</html>下面是对此源代码第一部分进行批注：
简单标签元素
1 lang
<html lang="en">这一行的代码是告诉搜索引擎自己这个是英文网站还是中文网站，对HTML内容本身不会产生任何影响。也就是说，你可以写lang = en 然后在html里面写中文，这是不会产生影响的。
其中的LANG代表的是language，en代表是ENGLISH即英文网站，如果是zh就代表是中文网站。
2 align
<h1 align="center">align这个单词本身意思是对准，校直
下面给出了align的几个常见的值以及对应的内容(这里严重吐槽知乎不支持表格！！在markdown里面的表格就显示不出来了！！)
3 <a> 标签以及target
<a> 的用法
<a href = "目标网址">这里填入描述 </a>
例如
<a href="https://www.bilibili.com">1.超链接（默认替换链接）</a>
target 属性规定在何处打开链接文档
用法是 <a target="value”>
value代表你输入的值。常见的值有两种，一种是_blank 代表新建窗口跳转至链接一，另一种是_self代表原窗口替换链接。
如果没有自己加入target的值，那么默认就是原窗口替换链接
4 字体样式元素
<b>需要改变样式的文本 </b> 加粗
<em>需要改变样式的文本 </em> 斜体
<u>需要改变样式的文本 </u>下划线
<s>需要改变样式的文本 </s>删除线
这些部分是可以叠加的
喜欢请点个赞，谢谢您！
CREATE BY 摸鱼的柠檬子
扫一扫
5343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
