HTML入门笔记（附完整代码）

最新推荐文章于 2024-05-30 11:35:48 发布

微子细

最新推荐文章于 2024-05-30 11:35:48 发布

阅读量9.4k

点赞数 40

分类专栏： HTML 文章标签：前端 HTML 练习

本文链接：https://blog.csdn.net/qq_34243694/article/details/92805075

版权

本文笔记基于B站资源：千峰教育

1.写博客

初识HTML,了解一些常用的标签：

h1:标题；

p:段落；

i：斜体；

b：加粗；

br：换行；

hr：水平线；

&nbsp：空格；

编辑器建议VS code，常用快捷键：

Alt+b：调试；

Alt+shift+b：选择浏览器调试；

ctrl+/：注释；

ctrl+enter：换行；

end：跳转该行末尾；

home：跳转至该行头部。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <h1>论&nbsp;&nbsp;&nbsp;数学的重要性</h1>
    <i> 2019.10.30</i>
    <hr>
    <p>
        今天我打电话叫了个12寸的外卖披萨
    </p>
    <p>
       告诉我们，<br> <b>数学是多么重要！</b>
    </p>
</body>
</html>

结果显示：

2.新闻列表

目的是学习超链接、图片和列表的使用，另外，vs code编辑器使用代码补全功能，输入关键的标签，按下tab键即可，如：

超链接：a；图片：img；列表：ul、ol、li；然后按下tab键，其中列表可以ul*1>li*5然后tab键就可以列出5个无序列表：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度新闻列表</title>
</head>
<body>
    <h1>科技&nbsp;<img src="img/1.jpg" alt="" height="20"</h1>
    <hr>
    <ul>
        <li>
            <a href="http://baijiahao.baidu.com/s?id=1636103229447924224"><b>续航更强了？苹果新iPhone电池容量将增加5%</b></a>
        </li>
        <li>
            <a href="http://baijiahao.baidu.com/s?id=1636098962422707095">从中性笔到智能烟灶套装，一起来看琳琅满目的6大米家.</a>
        </li>
        <li>
            <a href="http://baijiahao.baidu.com/s?id=1636099665074643605">iPhone XR 2真香预警！续航更加无敌+后置..</a>
        </li>
    </ul>

    <ol>
        <li>
            <a href="http://baijiahao.baidu.com/s?id=1636103229447924224"><b>续航更强了？苹果新iPhone电池容量将增加5%</b></a>
        </li>
        <li>
            <a href="http://baijiahao.baidu.com/s?id=1636098962422707095">从中性笔到智能烟灶套装，一起来看琳琅满目的6大米家.</a>
        </li>
        <li>
            <a href="http://baijiahao.baidu.com/s?id=1636099665074643605">iPhone XR 2真香预警！续航更加无敌+后置..</a>
        </li>
    </ol>

</body>
</html>

3.图片的使用

图片的使用比较简单，设置的属性常用有宽度width，高度height，多图并排时建议使用其中一个，保持宽度或高度一样，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="imgs/1.jpg" alt=""  width="100px">
    <img src="imgs/2.jpg" alt=""  width="100px">
    <img src="imgs/3.jpg" alt=""  width="100px">
    <img src="imgs/4.jpg" alt=""  width="100px">
</body>
</html>

结果如下：

除了像素px单位以外，还有%的单位，即相对于浏览器的比例，若想要铺满整个浏览器则使用100%，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="imgs/t1.jpg" alt="" width="100%">
    <img src="imgs/t2.jpg" alt="" width="100%">
</body>
</html>

最低0.47元/天解锁文章

微子细

关注

40
点赞
踩
219

收藏

觉得还不错? 一键收藏
1
评论
HTML入门笔记（附完整代码）

本文笔记基于B站资源：千峰教育目录1.写博客2.新闻列表3.图片的使用4.超链接与图片的知识补充5.网盘的制作6.简单表格的制作7.个人简历8.个人简历补充9.登录表单10.get获取和post提交1.写博客初识HTML,了解一些常用的标签：h1:标题；p:段落；i：斜体；b：加粗；br：换行；hr：水平线；&a...
复制链接

扫一扫