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

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

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

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

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

一、第一个HTML代码

    
    


	HelloWorld!

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

结果展示：

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

换行：



一到六级标题：
一级标题
六级标题

超链接：
bilibili

新建窗口跳转至链接

原窗口替换链接

字体效果：
斜体效果

下划线效果

删除效果

粗体、斜体、下划线、删除效果叠加

三、表格元素

是表格标签;tr表示当前行；th表示当前行的元素；


		

            

                
名字
                
性别
                
密码
            
        
        

            

                
Admin
                
男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
                
123
            
            

                
Violet
                
女
                
456
            
            

                
Andy
                
男
                
xxx
            
        
        

            

                
名字
                
性别
                
密码
            
        
    

以上代码效果展示：

四、列表

分为有序列表和无序列表
有序列表标签：

代码：
		

            
a
            
b
            
c
        
    

        

            
a
            
b
            
c
        
        

            
sdfs
            
sdfs
            
sdfs
        

无序列表标签：
	

        
a
        
b
        
c
    

效果展示：

五、表单元素

表单元素标签：

代码示例：


    


    

单选：
程序员中最帅的一个人是谁

我
是我
还是我

下拉选择：

    苹果
    香脚
    西瓜

效果展示：

六、插入图片

插入可以跳转至链接的图片：

    

效果展示：

七、插入视频

八、插入音频

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

效果展示：

最后给上配套视频的源代码及笔记，在我的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