前端HTML(1)（VS code）

最新推荐文章于 2024-08-26 16:38:21 发布

小白一枚2号

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量120

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/2303_79590957/article/details/134232770

版权

HTML的基本骨架

使用!(英文）+enter自动生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    给用户看的内容
</body>
</html>

标签的关系

标签关系分为父子关系（嵌套）和兄弟关系（并列），父级与子级要换行和缩进，见下面代码

<html>
    <head>
        <title>标签的关系</title>
    </head>
    <body>
        <strong>嗨嗨嗨，我TM来了！</strong>
        <hr>
        <hr>
        <hr>
        <hr>
    </body>
</html>

如代码，html与head,body为父子关系，head和body为兄弟关系，其中title为网页标题标签，strong与hr标签将在下文揭晓

注释标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 这是文字，能看见吗？ -->
    <!-- <strong>strong 加粗</strong> -->
</body>
</html>

如上，就成功将“叽里呱啦”注释掉，在VS code中，按ctrl+/即自动生成

标题，段落，换行与水平线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

注意！！！一级标题只能使用一次，其他标题无限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>勾八！吃我一戟！</h1>
    <hr>
    <p>你这勾八，跳来跳去，实在是无耻至极，还跳！吃我一戟！</p>
    111111111 <br>
    <p>你这勾八，跳来跳去，实在是无耻至极，还跳！吃我一戟！</p>
</body>
</html>

<hr>, 为少有的单标签，作用分别为下滑线和换行

为段落标签，有自动换行的效果

文本格式化标签

加粗倾斜下划线删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- strong  b  加粗 -->
    <!-- em  i  倾斜 -->
    <!-- ins  u  下划线 -->
    <!-- del  s  删除线 -->
    <p><strong><em>strong+em  加粗+倾斜</em></strong></p>
    <p><b>b 加粗</b></p>
    <p><em>em 倾斜</em></p>
    <p><i>i 倾斜 incline</i></p>
    <ins>ins 下划线</ins>
    <p><u>u 下划线 underline</u></p>
    <p><del>del 删除线 delete</del></p>
    <p><s>s 删除线 </s></p>
</body>
</html>

strong b 为加粗标签

em i 为倾斜标签

ins u 为下划线标签

del s 为删除线标签

其中字母多的比字母少的更具强调作用，表现效果相同，~~至于强调作用强调在那，我也不知道~~

ok，前端（1）就到这里了，感兴趣的小伙伴可以期待前端（2）

那么，拜拜

小白一枚2号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端HTML(1)（VS code）

如代码，html与head,body为父子关系，head和body为兄弟关系，其中title为网页标题标签，strong与hr标签将在下文揭晓。--叽里呱啦-->就成功将“叽里呱啦”注释掉，在VS code中，按ctrl+/即自动生成。标签关系分为父子关系（嵌套）和兄弟关系（并列），父级与子级要换行和缩进，见下面代码。ok，前端（1）就到这里了，感兴趣的小伙伴可以期待前端（2）<hr>, 为少有的单标签，作用分别为下滑线和换行。为段落标签，有自动换行的效果。em i 为倾斜标签。
复制链接

扫一扫