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

最新推荐文章于 2024-05-06 23:58:02 发布

置顶 fallwind_of_july

最新推荐文章于 2024-05-06 23:58:02 发布

阅读量1.4w

点赞数 76

分类专栏： javaWeb 文章标签： HTML

本文链接：https://blog.csdn.net/fallwind_of_july/article/details/93187621

版权

javaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前段时间学习了一下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

fallwind_of_july

关注

76
点赞
踩
246

收藏

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

前段时间学习了一下HTML和简单的网页制作，非常有意思，这里把笔记和代码梳理一下。无论是否看过配套视频的，都比较容易理解，供大家参考学习，文章末尾附上可以下载运行的代码，有兴趣的小伙伴请自行下载运行。配套视频(星月教你做网站)：https://www.bilibili.com/video/av5862916/?p=1建议的HTML学习网站：https://www.runoob.com/ht...
复制链接

扫一扫

专栏目录