使用visual制作html网页

2401_85041083

于 2024-09-12 16:17:23 发布

阅读量457

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_85041083/article/details/142175722

版权

一. 安装visual(https://code.visualstudio.com/)

二. 设置为中文界面

教程：http://t.csdnimg.cn/mbc7C

三. 基础内容

<body> </body>就是一对完整的标签，一对标签需要一个起始标签和一个结束标签，结束标签开头是一个 / 来表示这对标签的结束，例如：</body>

注释标签 
注释是所有语言中一个必不可少的东西，在html中同样使用。
html的注释不会显示在页面上，目的就是为了提高代码的可读性。

在这里插入图片描述
标题标签 h1-h6
h1-h6共有6个，数字越大，则字体越小。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在html中输入换行之后不会真的换行，而是产生一个空格。
在html中输入多个空格之后，在网页上显示的时候不会有多个空格，而是只有一个空格。
所以在需要产生段落的地方添加<p></p>使内容产生段落。
br是break的缩写表示换行，<br>是一个单标签所以可以单独使用。
在这里插入图片描述

<p>Hello World<br>
Hi World</p>

在这里插入图片描述

<Strong>加粗</Strong>
    <b>加粗</b>
 
    <em>倾斜</em>
    <i>倾斜</i>
 
    <del>删除线</del>
    <s>删除线</s>
    
    <ins>下划线</ins>
    <u>下划线</u>

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
table 包含 tr , tr 包含 td
在这里插入图片描述

<table border="3" cellspacing="10" cellpadding="5">
    <tr>
        <th colspan="4">COLUMNS</th>
    </tr>
    <tr>
        <td rowspan="4">ROWS</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

… …

四.练习

1.用户登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作注册页面</title>
    <style>
        .box {
            width: 300px;
            padding: 16px;
            border: 1px solid black;
            border-radius: 7px;
        }
        .input-text {
            width: 100%;
            padding: 15px 10px;
            margin: 10px 0;
            box-sizing: border-box;
        }
        label{
            font-weight: bold;
        }
        .reg{
            height: 50px;
            width: 100%;
            border-radius: 0;
            border-width: 0;
            color: white;
            background-color: #4caf50;
        }
        .reg:hover{
            opacity: 0.8;
        }
        .reg:active{
            opacity: 0.1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <label for="name">用户名</label>
        </div>
        <div>
            <input class="input-text" type="text" name="name" id="name" placeholder="请输入用户名">
        </div>

        <div>
            <label for="name">密码</label>
        </div>
        <div>
            <input class="input-text" type="text" name="name" id="name" placeholder="请输入密码">
        </div>
        
        <div>
            <label for="name">重复密码</label>
        </div>
        <div>
            <input class="input-text" type="text" name="name" id="name" placeholder="请再次输入密码">
        </div>

        <div>
            <label for="name">邮箱</label>
        </div>
        <div>
            <input class="input-text" type="text" name="name" id="name" placeholder="请输入邮箱">
        </div>

        <div>
            <button class="reg">注册</button>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
       <title>音乐排行榜</title>
   <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: rgb(168, 168, 168);
        }
    </style>
</head>
<body>
    <h1>音乐排行榜</h1>
   <table>
        <tr>
            <th>排名</th>
            <th>歌曲名称</th>
            <th>歌手</th>
        </tr>
        <tr>
            <td>1</td>
            <td>歌曲1</td>
            <td>歌手1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>歌曲2</td>
            <td>歌手2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>歌曲3</td>
            <td>歌手3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>歌曲4</td>
            <td>歌手4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>歌曲5</td>
            <td>歌手5</td>
        </tr>
    </table>
</body>
</html>