HTML入门学习-含代码和配套资料
原创置顶 fallwind_of_july 最后发布于2019-06-21 14:30:33 阅读数 10103 收藏
展开
前段时间学习了一下HTML和简单的网页制作,非常有意思,这里把笔记和代码梳理一下。无论是否看过配套视频的,都比较容易理解,供大家参考学习,文章末尾附上可以下载运行的代码,有兴趣的小伙伴请自行下载运行。
配套视频(星月教你做网站):
https://www.bilibili.com/video/av5862916/?p=1
建议的HTML学习网站:
https://www.runoob.com/html/html-intro.html
以下是简单笔记,很容易理解(详细的配套笔记请访问文章末尾链接进行查看,或下载):
一、第一个HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>MyFirstPage</title> 6 </head> 7 <body> 8 HelloWorld! 9 </body> 10 </html>
如何运行上面的代码:
新建一个文本文档,复制上面代码到txt文件,然后将txt后缀名改为html,点击即可运行
结果展示:
二、一些常用的简单元素,都是写在两个body标签之间的,建议自己动手写,玩一玩
1 换行: 2 <br> 3 4 一到六级标题: 5 <h1>一级标题</h1> 6 <h6>六级标题</h6> 7 8 超链接: 9 <a href="https://www.bilibili.com/">bilibili</a> 10 11 <a href="https://www.bilibili.com/" target="_blank">新建窗口跳转至链接</a> 12 13 <a href="https://www.bilibili.com/" target="_self">原窗口替换链接</a> 14 15 字体效果: 16 <em>斜体效果</em> 17 <br/><u>下划线效果</u> 18 <br/><s>删除效果</s> 19 <br/><b><em><u><s>粗体、斜体、下划线、删除效果叠加</s></u></em></b>
效果如下:
三、表格元素
1 <table></table>是表格标签;tr表示当前行;th表示当前行的元素; 2 3 <table border="1px" align="center"> 4 <thead> 5 <tr> 6 <th>名字</th> 7 <th>性别</th> 8 <th>密码</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr> 13 <td>Admin</td> 14 <td>男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td> 15 <td>123</td> 16 </tr> 17 <tr> 18 <td>Violet</td> 19 <td>女</td> 20 <td>456</td> 21 </tr> 22 <tr> 23 <td>Andy</td> 24 <td>男</td> 25 <td>xxx</td> 26 </tr> 27 </tbody> 28 <tfoot> 29 <tr> 30 <th>名字</th> 31 <th>性别</th> 32 <th>密码</th> 33 </tr> 34 </tfoot> 35 </table>
效果: