#WEB前端

news2024/11/16 23:32:40

1.实验：vscode安装，及HTML常用文本标签

2.IDE：VSCODE

3.记录：

（1）网页直接搜索安装vscode

（2）打开vscode，在下图分别安装以下插件：

Html Css Support ------------------------

Auto Rename Tag -----------------------自动补全

Live Sever----------------------------------快速查看网页编写情况

Chinese-------------------------------------中文（安装后提示重启生效）

（3）基础知识：（主要为英文首字母）

h1一级标题,h2.....

p段落

ul无序列表（包裹li，一个li为一个元素）

ol有序列表（自动添加序号，一个li为一个元素）

b加粗

i斜体

u下划线

s删除线

table表格

（4）输入!自动建立一个网页文档体系

（5）输入!!!进行注释

（6）所有语法几乎成对出现，结束的会有斜杠

（7）右键点击图中安装的插件，查看当前网页情况

4.代码：

练习的DEMO

<!DOCTYPE 
这是注释部分
----------------------------------------------------------------------------------
h1一级标题,h2.....
p段落
ul无序列表（包裹li，一个li为一个元素）
ol有序列表（自动添加序号，一个li为一个元素）
b加粗
i斜体
u下划线
s删除线
table表格

----------------------------------------------------------------------------------
>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网页</title>
</head>
<body>
    <h1>一级标签</h1>         
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <p>这是一个段落</p>
    <p>字体加粗：<b>加粗</b></p>
    <p>斜体: <i>斜体</i></p>
    <P>下划线: <u>下划线</u></P>
    <p>删除线: <s>删除线</s></p>
   
 <head>
<b>列表</b>
</head>
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

    <ol>                                                    
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>

<h1><b>表格</b></h1>
<table border="1">                                            <!设置表格边界>
    <tr>                                                     <!table row 列>
        <th>第一列</th>                                      <!table head 列标题>
        <th>第二列</th>                                     
        <th>第三列</th>
        <th>第四列</th>
    </tr>
    <tr>
        <td>元素1</td>                                       <!table data 表格元素>
        <td>元素2</td>
        <td>元素3</td>
        <td>元素4</td>
    </tr>
</table>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1488930.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！