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

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 
 2 "en">
 3 
 4     "UTF-8">
 5     
 6 
 7 
 8     HelloWorld!
 9 
10 

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

结果展示：

 

 

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

 1 换行：
 2 

 3 
 4 一到六级标题：
 5 
一级标题
 6 
六级标题
 7 
 8 超链接：
 9 "https://www.bilibili.com/">bilibili
10 
11 "https://www.bilibili.com/" target="_blank">新建窗口跳转至链接
12 
13 "https://www.bilibili.com/" target="_self">原窗口替换链接
14 
15 字体效果：
16 斜体效果
17 
下划线效果
18 
删除效果
19 
粗体、斜体、下划线、删除效果叠加

效果如下：

三、表格元素

 1 是表格标签;tr表示当前行；th表示当前行的元素；
 2 
 3 "1px" align="center">
 4 5 6 7 8 91011121314151617181920212223242526272829303132333435
         

             

                 
名字
                 
性别
                 
密码
             
         
         

             

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

                 
Violet
                 
女
                 
456
             
             

                 
Andy
                 
男
                 
xxx
             
         
         

             

                 
名字
                 
性别
                 
密码
             
         
     

效果：