在vscode里写html简单页面（页面效果+实现步骤）

amiable
307 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

用html编写简单页面的步骤（使用vscode）

image.png 这张图片就是一个使用简单的html标签就可以实现的页面，想要实现这样的页面首先要了解一些简单的html知识：

1.创建一个html基本结构

新建一个文件，利用快捷键!+enter键创建一个html文件的基本结构

使用!+enter键创建html结构注意事项：

  • 新建的文件名必须以.html为后缀名
  • !+enter键的!应该为英文状态下的标点符号
    得到一个html的基本框架：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

了解标签种类

html中的标签分为两种：单标签和双标签

  • 单标签写法：<标签名/>单标签在书写的时候标签名后面的斜杠可以省略，
  • 双标签写法：<标签名></标签名>双标签的开始标签和结束标签需要成对出现
    <标签名>双标签开始的标志，表示开始使用这个标签，该项内容之后的部分要按照这个标签名的含义进行展示；
    </标签名>双标签结束的标志，表示当前标签结束使用，此后的内容恢复默认状态；
    当我们需要改变页面中一部分内容的样式（使文本加粗、变成斜体等等），给要改变样式的内容前后加上双标签的开始标志和结束标志即可。
例如：``<strong>让这段文字加粗</strong>``    
    
就能得到一段有加粗效果的文字

image.png

可以看到代码中有以下几个比较重要的双标签：
<html> </html>：之间包裹了整个html文件的结构。
<head> </head>：这个标签之间的内容在打开页面之后不能被用户看到。
<body> </body>：之间的内容最终会展示在页面中，是整个html文件中主要在编辑的部分，想要最终展示在页面里的内容就可以编辑在这个双标签之内。想要实现本文开头图片效果只需在该部分内编写即可。

2.了解几个html标签

写法含义
<h1></h1>被这个标签包裹的内容会变成标题一，字体会默认加粗变大，并且独占一行，有默认的行间距,将1换成2~3， 分别可以表示标题二~标题六，标题一~标题六的字体大小会逐渐减小（类似Microsoft word里的各级标题）
<p></p>被这个标签包裹的内容会自动形成一个段落，这个段落每行之间有一个默认的行间距
<strong></strong> <b></b>使文本内容加粗
<em></em> <i></i>使文本内容倾斜
<del></del> <s></s>使文本内容有删除线
<sup></sup>使文本变成上标，处于其他文字的右上角
<sub></sub>使文本变成下标，出于其他文字右下角
<hr/>分割线，一条线独占一行，默认情况下该分割线会有一部分阴影
<br/>强制换行符，文本内容在vscode界面的换行不会作用于最终展示的界面，要实现对文本换行时，换行的文字之间应添加该单标签

3.实现页面效果

了解了上述几个标签就基本可以实现图片中的页面了

获取文本内容

页面的文本内容来自于百度百科词条内容，可以自行百度HTML5或直接点击链接HTML5_百度百科 (baidu.com) ，图中内容均摘自百度百科，也可选择其他任意文本内容进行编辑。

注意事项

  • 图片中能看到的HTML5 Html5新特性 HTML5 智能表单 多媒体，均独占一行，是标题标签。
    • HTML5 是标题一
    • Html5新特性 略小，是标题二
    • 其余为标题三
  • 用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式部分内容加粗且倾斜，即运用了两个双标签，确保格式规范。

实现页面的过程中可以参考代码

avatar
文章
阅读
粉丝