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

最新推荐文章于 2023-04-06 20:08:09 发布

云之巢

最新推荐文章于 2023-04-06 20:08:09 发布

阅读量348

点赞数 1

本文链接：https://blog.csdn.net/weixin_38154393/article/details/104788734

版权

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>

效果：

云之巢

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习-含代码和配套资料

HTML入门学习-含代码和配套资料原创置顶 fallwind_of_july 最后发布于2019-06-21 14:30:33 阅读数 10103 收藏展开前段时间学习了一下HTML和简单的网页制作，非常有意思，这里把笔记和代码梳理一下。无论是否看过配套视频的，都比较容易理解，供大家参考学习，文章末尾附上可以下载运行的代码，有兴趣的小伙伴请自行下载运行。配套视频(星月教你做网站)...
复制链接

扫一扫