HTML入门学习-含代码和配套资料

前段时间学习了一下HTML和简单的网页制作，非常有意思，这里把笔记和代码梳理一下。无论是否看过配套视频的，都比较容易理解，供大家参考学习，文章末尾附上可以下载运行的代码，有兴趣的小伙伴请自行下载运行。

配套视频(星月教你做网站)：
https://www.bilibili.com/video/av5862916/?p=1

建议的HTML学习网站：
https://www.runoob.com/html/html-intro.html

以下是简单笔记，很容易理解(详细的配套笔记请访问文章末尾链接进行查看，或下载)：

一、第一个HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyFirstPage</title>
</head>
<body>HelloWorld!
</body>
</html>

如何运行上面的代码：
新建一个文本文档，复制上面代码到txt文件，然后将txt后缀名改为html，点击即可运行

结果展示：

二、一些常用的简单元素，都是写在两个body标签之间的，建议自己动手写，玩一玩

换行：
<br>一到六级标题：
<h1>一级标题</h1>
<h6>六级标题</h6>超链接：
<a href="https://www.bilibili.com/">bilibili</a><a href="https://www.bilibili.com/" target="_blank">新建窗口跳转至链接</a><a href="https://www.bilibili.com/" target="_self">原窗口替换链接</a>字体效果：
<em>斜体效果</em>
<br/><u>下划线效果</u>
<br/><s>删除效果</s>
<br/><b><em><u><s>粗体、斜体、下划线、删除效果叠加</s></u></em></b>

三、表格元素

<table></table>是表格标签;tr表示当前行；th表示当前行的元素；<table border="1px" align="center"><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>

以上代码效果展示：

四、列表

分为有序列表和无序列表
有序列表标签：<ol></ol>
代码：<ol><li>a</li><li>b</li><li>c</li></ol><br><ol reversed><li>a</li><li>b</li><li>c</li></ol><ol type="a"><li>sdfs</li><li>sdfs</li><li>sdfs</li></ol>无序列表标签：<ul><li>a</li><li>b</li><li>c</li></ul>

效果展示：

五、表单元素

表单元素标签：<form></form>
代码示例：
<br/><input type="index" placeholder="输入账号"><!--不占位-->
<br><input type="index" placeholder="输入密码">单选：
程序员中最帅的一个人是谁<br>
<input type="radio" name="a" checked>我
<input type="radio" name="a">是我
<input type="radio" name="a">还是我下拉选择：
<select><option>苹果</option><option>香脚</option><option>西瓜</option>
</select>
<br>

效果展示：

六、插入图片

<img src="viole.jpg" width="128px" alt="薇尔莉特"><!--alt在找不到文件时备用-->插入可以跳转至链接的图片：
<a href="https://www.bilibili.com/bangumi/media/md8892/?from=search&seid=14554523757864175862" target="_blank"><img src="violet.jpg" width="128px" alt="薇尔莉特">
</a>

效果展示：

七、插入视频

<video src="gameplay.mp4" controls preload="auto" poster="violet.jpg"></video>

八、插入音频

视频地址：
https://www.bilibili.com/video/av4295775?from=search&seid=3425090210645317563

<audio src="FlowerFire.mp3" controls></audio>

效果展示：

最后给上配套视频的源代码及笔记，在我的github里面，欢迎访问。大家有兴趣也可以注册一下github，以后工作都能用到，面试时也是一个加分项。
相信该资料会对大家有所帮助，感兴趣的可以下载来玩一玩或者学一学。

https://github.com/AndyofJuly/HTML_Study

该网页中右上角Star代表点赞，Fork代表拷贝到自己的github仓库，而右侧的绿色部分可以直接迅雷下载。

如果觉得不错的小伙伴本页右上角可以点个赞，赠人玫瑰，手有余香，感谢支持！
CSS和JS的相关代码和资料请见个人中心，或者以下链接：
CSS：https://blog.csdn.net/fallwind_of_july/article/details/93333763
JS：https://blog.csdn.net/fallwind_of_july/article/details/93335821