静态网页入门讲解，制作属于你自己的网页（二）

写在开始

本次的博客主要是针对上一篇博客的知识点提供一些范例，如果没有看过上一篇博客的小伙伴，可以先去学习下上一篇博客中提到的知识点。链接为：静态网页入门讲解，制作属于你自己的网页（一）

VS Code下载

在讲范例之前，我们先把编辑器的下载讲一下，要实战了怎么能连武器都没有呢？是不是？

博主使用的是VS Code，如果有习惯使用其他编辑器的小伙伴也不要紧，毕竟什么型号的武器不重要，用的顺手才是最关键的！

首先，前往VS Code的官网VS Code的官网
在这里插入图片描述
安装过程毫无难度，一路next，直接安装。

VS Code最精髓的就是安装插件啦，为了让编写代码更加流畅，插件必不可少啦！

列举几个比较常用的VS Code插件：

1.Chinese (Simplified) Language Pack for Visual Studio Code
这个是俗称的汉化包，毕竟中文界面更直观对不对！

2.open in browser
在浏览器中打开html，快捷键Alt+b

3.Beautify
格式化代码，让代码更加美观！

4.auto Rename tag
同步修改配对的首尾标记

5.Bracket Pair Colorizer
用颜色标识匹配的括号

6.Auto Close Tag
自动添加尾标记

7.HTML Snippets
支持HTML5标签提示

那么可能小伙伴就会问了，怎么下载插件呢？

别急，接下来就一步一步地跟你说！
在这里插入图片描述
比如说，我想下载open in browser 这个插件，直接在搜索框中搜索，然后点击安装

如果显示如下图所示，这个插件就算安装好啦！

网页范例

1.特殊字符应用

<!DOCTYPE html>
<html>
<head>
    <title>特殊字符应用</title>
</head>
<body>
    显示 &nbsp 空格<br> 
    显示 &quot引号字符&quot<br> 
    显示 &gt 和 &lt <br>
    显示版权号 copyright ©2013 <br>
</body>
</html>

在这里插入图片描述
2.段落应用

<!DOCTYPE html>
<html>
<head>
    <title>段落应用</title>
</head>
<body bgcolor="#f0f0f0">
    <h2 align="center">显示2号标题字</h2>
    <center>
        <p> </p>
            <font color="blue" face="隶书" size="5">显示蓝色隶书字体</font>
            <br><s>显示删除划线</s>
            <address>aaaa@buu.com显示地址</address>
            <h color="red"></h>
            显示上标：x<sup>3</sup><br>
            显示下标：x<sub>2</sub> 
    </center>
    <hr color="#00ffff" size="4">
</body>
</html>

在这里插入图片描述
3.文字移动

<!DOCTYPE html>
<html>
<head>
    <title>文字移动</title>
</head>
<body>
    <center>
        <marquee height="50" width="400" direction="right" behavior="alternate" bgcolor="#ddffff">
            <font face="隶书" size="5" color="red">案例</font>
        </marquee>
    </center>
</body>
</html>

在这里插入图片描述
4.表单应用

<!DOCTYPE html>
<html>
<head>
    <title>表单标记应用</title>
</head>
<body>
    <form>
        请输入姓名：<input type="text" name="text" size="12" maxlength="6"><p></p>
        请输入密码：<input type="password" name="password" size="12" maxlength="6"><p></p>
        上传的文件：<input type="file" name="file" size="12" maxlength="6"><p></p>
        性别:<select name="sex"><p></p>
        <option>男</option>
        <option>女</option>    
        </select><p></p>
        请选择旅游城市，可做多项选择
        <input type="checkbox" name="chechkbox1" checked>上海
        <input type="checkbox" name="checkbox2"> 太原
        <input type="checkbox" name="chechkbox3">重庆
        <input type="checkbox" name="chechkbox4">深圳<p></p>
        请选择付款方式
        <input type="radio" name="radio1">支付宝
        <input type="radio" name="radio2">微信<p></p>
        留言：<p></p>
        <textarea clos="50" rows="4">请于我们联系</textarea><p></p>
        <input type="reset" name="reset" value="清空">
        <input type="submit" name="submit" value="提交">
    </form>
</body>
</html>

在这里插入图片描述
5.表单域应用

<!DOCTYPE html>
<html>
<head>
    <title>表单域集合</title>
</head>
<body>
   <form>
       <fieldset>
           <legend>注册信息：</legend>
           输入用户名：<input type="text" name="text" size="20" maxlength="12"><p></p>
           输入密码：<input type="password" name="password" size="20" maxlength="12"><p></p>
           选择生日：<input type="date"><p></p>
       </fieldset>
   </form>
</body>
</html>