【前端】从零开始学习编写HTML

news2024/11/20 14:23:25

目录

一、什么是前端

二、什么是HTML

三、HTML文件的基本结构

四、HTML常见标签

4.1 注释标签

4.2 标题标签

4.3 段落标签

4.4 换行标签

4.5 格式化标签

4.6 图片标签

4.7 超链接标签

4.8 表格标签

4.9 列表标签

4.10 表单标签

（1）form标签

（2）input标签

（3）label标签

（4）select标签

（5）textarea标签

4.11 无语义标签

五、实现简单的简历展示网页

六、实现简单的简历填写页面

一、什么是前端

前端开发是创建Web页面或APP等前端界面呈现给用户的过程，负责把界面更好的呈现给用户

相对于后端主要负责用户看不见的数据处理，前端是指用户可以看到和操作的部分，例如网页页面，PC端程序页面或移动端APP页面。

 

二、什么是HTML

HTML（HyperText Markup Language）是超文本标记语言的简称，是一种用于创建网页的标准标记语言。

  • 超文本：一种文本类型，允许通过链接（通常称为超链接）从一个文档跳转到另一个文档或文档中的特定部分

 

三、HTML文档的基本结构

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        页面内容
    </body>
</html>

如上：

  • html标签是整个HTML文档的根标签，用来标记HTML文档的开始和结束
  • head标签用于标记HTML文档头部的开始和结束，其中填写页面的属性，例如head的子标签titie代表页面的标题
  • body标签用于标记HTML文档主体的开始和结束，其中填写页面当中显示的内容

427e2666e3844363a702b4e78c16d316.png

其中被尖括号包括的就是HTML标签，不同标签之间分为父子关系和兄弟关系

我们可以通过上面不同标签的缩进程度来观察它们的关系，例如head和body是html的子标签，title是head的子标签，head和body之间是兄弟关系

不同标签之间的结构关系就构成了一棵DOM树

 

四、HTML常见标签

HTML标签又分为单标签和双标签

单标签只会单独出现，用法：<标签名/>

双标签成对出现，用法：<标签名></标签名>

4.1 注释标签

<!-- 我是注释 -->

像这样，用尖括号、感叹号和横杠组成注释标签，其中填写自己需要的注释

注释不会显示在网页界面上，主要用于提高代码的可读性

 

4.2 标题标签

就像CSDN的富文本编辑器中提供了六级标题，HTML的标题标签也有六个，从h1到h6逐级变小

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题</h2>
        <h3>这是三级标题</h3>
        <h4>这是四级标题</h4>
        <h5>这是五级标题</h5>
        <h6>这是六级标题</h6>
    </body>
</html>

e5d29a1aaef64f5181751208a244e6b9.png

 

4.3 段落标签

我们在开发工具中编写HTML文档，将一长段文字分成多段，但是在网页中并不会显示分成多段的效果，仍然是一长段，例如：

581d68fb999e4ce8aa208e1393adf466.png

在浏览器中运行：

c4c855c8c02149099021cc0d462d2eca.png

在HTML中直接输入回车并不能真正的实现分段，而是相当于一个空格

如果我们要进行分段，需要用到段落标签p，具体用法如下：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p>1111111111111111111</p>
        <p>2222222222222222222</p>
    </body>
</html>

再次运行：

2716221aa90748c7b8ae09ed5dc0022e.png

会发现成功分成了两段，段落之间有一定的间隙

段落标签p是一个双标签，在开始标签和结束标签之间填写自己想要的内容

当然，标签不限制只能在同一行，像这样也是正确的用法：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <p>
            1111111111111111111
        </p>
        <p>
            2222222222222222222
        </p>
    </body>
</html>

 

4.4 换行标签

换行标签br是break的缩写，是一个单标签，规范写法是<br/>，不建议写成<br>

区别于段落标签p，用br标签只会进行分行，不会产生空隙

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        hello<br/>world
    </body>
</html>

在浏览器中运行：

0ce61c06133e4d6f98c975c21fb735bc.png

 

4.5 格式化标签

HTML中还有一些标签可以改变字体格式：

  • 加粗：strong标签和 b 标签
  • 倾斜：em标签和 i 标签
  • 删除线：del标签和 s 标签
  • 下划线：ins标签和 u 标签

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <strong>加粗</strong>
        <b>加粗</b>
        <em>倾斜</em>
        <i>倾斜</i>
        <del>删除线</del>
        <s>删除线</s>
        <ins>下划线</ins>
        <u>下划线</u>
    </body>
</html>

在浏览器中运行：

1f221ba16dc14601993a6c1d5af05d9a.png

 

4.6 图片标签

要在网页中显示图片，就需要用到图片标签img

img标签中必须带有src属性，用于说明图片的路径，用法：<img src="图片路径">

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <img src="html.png">
    </body>
</html>

在浏览器中运行：

8b0a940241d24b8393591c1ec1f762ef.png

除了保存在本地的图片，网络路径也可以使用，例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <img src="https://tgi12.jia.com/114/936/14936926.jpg">
    </body>
</html>

在浏览器中运行：

0d2d603ece0d4e95b0eccc43e13fb39b.png

除了src属性，img标签还有其他属性：

  • alt：替换文本，当图片不能正确显示时会显示一个替换的文字
  • title：提示文本，当鼠标放到图片上会有文字提示
  • width/height：控制宽度和高度，修改一个后另一个会等比例缩放
  • border：控制图片边框

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <img src="html.png" alt="HTML" title="这是HTML图标" width="1000px" border="2px">
    </body>
</html>

属性之间不分先后顺序，按照键值对的格式表示

 

4.7 超链接标签

要实现在网页中跳转到其他地方，就需要超链接标签a

超链接标签也有必须具备的属性href，用来说明点击后要跳转到哪个页面

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <a href="https://www.baidu.com/">百度</a>
    </body>
</html>

在浏览器中运行：

bd8011477d254769a39d1279e94fb083.png

点击蓝紫色带下划线的“百度”，就可以跳转到对应的页面

属性href的值有多种形式：

  • 外部链接：其他网站的地址，例如上面的情况
  • 内部链接：网页内部页面之间的链接，使用相对路径即可
  • 空链接：用"#"在herf中占位

例如：

<a href="#">空链接</a>
  • 下载链接：href的值对应的路径是一个文件

例如：

<a href="test.zip">下载文件</a>
  • 网页元素链接：可以给图片等任何元素添加链接

例如：

<a href="https://www.baidu.com/">
    <img src="baidu.png">
</a>

cd682c65e89d46e1a6bc975483e4c9f8.png

点击该图片就会跳转到百度首页

  • 锚点链接：可以快速定位到页面中的某个位置

例如：

<a href="#one">第一章</a>
<a href="#two">第二章</a>
<p id="one">
    第一章内容
</p>
<p id="two">
    第二章内容
</p>

 

4.8 表格标签

要在网页中显示一个表格，就需要使用表格标签table

table有一些子标签：

  • tr：表示表格的一行
  • td：表示一个单元格
  • th：表示表头的单元格，会居中加粗
  • thead：表格的头部区域（范围比th大）
  • tbody：表格的主题区域

其中td和th又是tr的子标签

我们举一个例子：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>19</td>
            </tr>
        </table>
    </body>
</html>

在浏览器中运行：

a9d4abe8de6f465387de9aa2d8b289ea.png

我们发现这个表格怎么没有边框？事实上，表格标签table包含一些属性，其中边框也是属性之一，需要进行设置

table的属性有：

  • align：表格在页面中的对齐方式，例如align="center"就是在页面中居中对齐
  • border：表示边框，1表示有边框，数字越大边框越粗，""表示无边框
  • cellpadding：表格内容距离边框的距离，默认为1像素
  • cellspacing：单元格之间的距离，默认为2像素
  • width/height：表格尺寸

实际设置中我们可能会发现表格的边框有两条线，这是因为单元格之间有距离，如果将cellspacing设置为0边框就变为了单线。大家可以自己设置一下看看

我们还可以对单元格标签td设置合并单元格：

  • 跨行合并：rowspan="需要合并的单元格数"，将下方的单元格合并
  • 跨列合并：colspan="需要合并的单元格数"，将右方的单元格合并

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <table align="center" border="1" cellpadding="5" cellspacing="0" width="500px" height="500px">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>19</td>
            </tr>
        </table>
    </body>
</html>

在浏览器中运行：

26c4df009cd3426b974bff4546735d54.png

 

4.9 列表标签

列表标签又分为有序列表、无序列表和自定义列表：

  • 无序列表：ul和li
  • 有序列表：ol和li
  • 自定义列表：dl（总标签）dt（小标题）和dd

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h3>无序列表</h3>
        <ul>
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ul>
        <h3>有序列表</h3>
        <ol>
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
        <h3>自定义列表</h3>
        <dl>
            <dt>小标题</dt>
            <dd>第一列</dd>
            <dd>第二列</dd>
            <dd>第三列</dd>
        </dl>
    </body>
</html>

在浏览器中运行：

6ee79482a5f44daeb477e98fa2e8a1bd.png

无序列表中，每一列前面的实心圆可以改成方块或空心圆。可以通过ul标签的type属性修改，默认值为disc（实心圆），还有square（实心方块）和circle（空心圆），例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body>
        <h3>无序列表</h3>
        <ul type="circle">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
    </body>
</html>

fdd763613b374ac7a7aa80703965c030.png

有序列表中每一列前面的数字也可以改成英文字母或罗马数字，也是通过修改ol标签的type属性。

有序序列还可以通过修改ol标签的start属性来改变列表起始的数字

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <h3>有序列表</h3>
        <ol type="I" start="2">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
    </body>
</html>

bc31603049b34105a0b7ba8aaa82b0c2.png

 

4.10 表单标签

要想让用户通过页面输入信息，就需要用到表单标签

（1）form标签

用于创建表单，将用户输入的数据提交到服务器

其中action属性负责定义表单数据提交的目标URL，method属性定义提交数据的HTTP方法

例如：

d842b10bc5964fc78e6ed835b7d0e452.png

这里就涉及到一定的服务器和网络编程相关知识了

 

（2）input标签

用于创建各种输入控件，如文本框、按钮、单选框和复选框

input的type属性用于定义输入控件的类型，是必须要显式定义的属性

输入控件有：

  • 文本框（type="text")：用于输入单行文本 

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            输入姓名<input type="text">
        </form>
    </body>
</html>

59af1b2d24a341278333f8df5c124892.png

  • 密码框（type="password")：用于输入密码

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            输入密码<input type="password">
        </form>
    </body>
</html>

84abf0d511c1412f8bb3c68ee9486955.png

  • 单选框（type="radio")：单选

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            性别<input type="radio" name="sex">男<input type="radio" name="sex">女
        </form>
    </body>
</html>

8d6881979f4c4c0a891d9acee8658a39.png

注意！两个构成单选关系的单选框，name属性的值必须相同才可以实现多选一的效果

如果我们想让某个选项作为默认选择项，可以设置其checked属性，例如：

d63f656d48d3406496727715c1266c1f.png

再次运行，此时男选项就被默认选择了

  • 复选框（type="checkbox")：多选

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="checkbox">选项1<input type="checkbox">选项2<input type="checkbox">选项3
        </form>
    </body>
</html>

0a600977db3e45758d02458fae179ff9.png

  • 普通按钮（type="button")

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="button" value="点击">
        </form>
    </body>
</html>

caf3a72e987c453a8bfed2cf07d1db87.png

当前我们写出的按钮点击后没有响应，需要搭配JS使用，例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="button" value="点击" onclick="alert('hello')">
        </form>
    </body>
</html>

26684bdcbacd4a8792e01315b1756a34.png

  • 提交按钮（type="submit")：放在form标签中，点击后就会将数据发送给服务器

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            输入姓名<input type="text" name="username">
            <input type="submit" value="提交">
        </form>
    </body>
</html>

页面如下：

7aac98d5863f4d189056f1c22c4b59bc.png

在文本框中输入zhangsan后点击提交：

a754a1b7713f402bba352c2d14303e47.png

此时输入的数据就作为参数提交给服务器了

  • 清空按钮（type="reset")：放在form标签中，点击后将所有的用户输入清空

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form action="1.html">
            输入姓名<input type="text" name="username">
            <input type="reset" value="清空">
        </form>
    </body>
</html>

7ae2d633d90b4ccdb8c01b4e2d83330e.png

在文本框中进行输入后点击清空按钮，即可清空输入的内容

  • 选择文件（type="file")：点击按钮会弹出选择文件界面

例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="file">
        </form>
    </body>
</html>

e5f9ba68a99847b88c5d805880b1d167.png

 

（3）label标签

搭配input标签使用，可以与表单控件相关联，当用户点击label标签的内容时，会自动将焦点跳到相关联的表单控件上，能够提高用户体验

例如我们想实现点击选框对应的文字就能选择该选项的功能：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <input type="radio" name="sex" id="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="female">
            <label for="female">女</label>
        </form>
    </body>
</html>

e84ddb2a40ed4da1a7fef8d69cd30e91.png

此时即使我们不点击选框，点击"男"或"女"也可以实现选择的功能

注意：要将label和表单控件相关联，必须要保证表单控件的id属性值和label标签的for属性值对应

 

（4）select标签

select用于实现下拉菜单，其子标签option作为菜单的每一行，例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
            </select>
        </form>
    </body>
</html>

47c2554cadc34323aeacd1efc650595d.png

如果在option中定义selected="selected"则表示该选项默认选中，例如：

a6cc2f889c034806813709be28c44c2f.png

此时就会默认选中广州

a7035d4dee1546d7a99c4dfd6caa040c.png

 

（5）textarea标签

可以定义一个多行的文本输入控件，例如：

<html>
    <head>
        <title>页面标题</title>
    </head>
    <body> 
        <form>
            <textarea rows="5" cols="20">

            </textarea>
        </form>
    </body>
</html>

79b0d98c15d44ee6b564ef5ad66fd83d.png

其中rows属性和cols属性表示一次能够显示几行几列

 

4.11 无语义标签

顾名思义，就是没有语义的标签，不需要考虑其内容，区别于前面的通过标签名就可以知道标签用途的语义化标签

无语义标签中有div标签和span标签：

  • div是块级元素，独占一行，是一个大盒子
  • span是行内元素，不独占一行，会和其他标签元素在一行显示，是一个小盒子

这两个标签主要用于网页布局

 

五、实现简单的简历展示网页

接下来是练习时间，尝试根据前面的知识来实现下面的网页吧！

8d9417974327468a8629f4a2feec5b51.png

源码如下：

<!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>
    <h1>某某某</h1>
    <div>
        <h2>基本信息</h2>
        <img src="https://pic.616pic.com/ys_bnew_img/00/24/50/zLfQibcVrw.jpg" width="300px">
        <p><span>求职意向：</span>C++开发工程师</p>
        <p><span>联系电话：</span>XXX-XXXX-XXXX</p>
        <p><span>邮箱：</span>xxx@qq.com</p>
        <p><a href="https://github.com/">我的 github</a></p>
        <p><a href="https://blog.csdn.net/">我的 博客</a></p>
    </div>

    <div>
        <h2>教育背景</h2>
        <ol>
            <li>xxx小学</li>
            <li>xxx初中</li>
            <li>xxx高中</li>
            <li>xxx大学</li>
        </ol>
    </div>

    <div>
        <h2>专业技能</h2>
        <ul>
            <li>熟练掌握C++</li>
            <li>能够实现并熟练运用常见数据结构</li>
            <li>熟知计算机网络理论</li>
            <li>掌握Web开发能力</li>
        </ul>
    </div>

    <div>
        <h2>我的项目</h2>
        <ol>
            <li><h3>树洞</h3></li>
            <p>开发时间：xxxx-xxxx</p>
            <p>功能介绍：</p>
            <ul>
                <li>功能1</li>
                <li>功能2</li>
            </ul>
            <li><h3>个人博客网站</h3></li>
            <p>开发时间：xxxx-xxxx</p>
            <p>功能介绍：</p>
            <ul>
                <li>功能1</li>
                <li>功能2</li>
            </ul>
        </ol>    
    </div>

    <div>
        <h2>个人评价</h2>
        <p>在校期间学习优良，绩点名列前茅，多次获得奖学金</p>
    </div>
</body>
</html>

 

六、实现简单的简历填写页面

接下来是第二个练习，尝试根据前面的知识来实现下面的网页吧！

dd27a810215e48859e3a09664e4a9d5b.png

源码如下：

<!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>
    <table cellspacing="0" width="600px">
        <thead><h3>请填写简历信息</h3></thead>
        <tbody>
            <tr>
                <td>姓名</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="male">
                    <label for="male">男</label>
                    <input type="radio" name="sex" id="female">
                    <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>出生年份</td>
                <td>
                    <select>
                        <option>--请选择年份--</option>
                        <option>--2000--</option>
                        <option>--2001--</option>
                        <option>--2002--</option>
                        <option>--2003--</option>
                        <option>--2004--</option>
                        <option>--2005--</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>就读学校</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>应聘岗位</td>
                <td>
                    <input type="checkbox" id="fe"><label for="fe">前端开发</label>
                    <input type="checkbox" id="be"><label for="be">后端开发</label>
                    <input type="checkbox" id="qa"><label for="qa">测试开发</label>
                    <input type="checkbox" id="op"><label for="op">运维开发</label>
                </td>
            </tr>
            <tr>
                <td>掌握的技能</td>
                <td><textarea rows="7" cols="20"></textarea></td>
            </tr>
            <tr>
                <td>项目经历</td>
                <td><textarea rows="7" cols="20"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="read">
                    <label for="read">我已仔细阅读过公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>请应聘者确认：</h3>
                    <ol>
                        <li>以上信息真实有效</li>
                        <li>能够随时上岗</li>
                    </ol>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

完.

 

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

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

相关文章

ThreeJS-3D教学十二：ShaderMaterial

ThreeJS-3D教学十二：ShaderMaterial

一、首先 Shader 是做什么的 Shader 可以自定义每个顶点、每个片元/像素如何显示&#xff0c;而控制顶点和片元显示是通过设置 vertexShader 顶点着色器和 fragmentShader 片元着色器&#xff0c;这两个着色器用在 ShaderMaterial 和 RawShaderMaterial 材质上。 我们先看一个例…
阅读更多...
SpringMVC系列八: 手动实现SpringMVC底层机制-第二阶段

SpringMVC系列八: 手动实现SpringMVC底层机制-第二阶段

实现任务阶段三 &#x1f34d;从web.xml动态获取zzwspringmvc.xml 说明: 前面我们加载zzwspringmvc.xml是硬编码, 现在做活. 从web.xml动态获取 示意图[分析说明] 1.ZzwDispatcherServlet在创建并初始化ZzwWebApplicationContext时, 动态地从web.xml中获取到spring配置文…
阅读更多...
Linux中定位JVM问题常用命令

Linux中定位JVM问题常用命令

查询Java进程ID #ps axu | grep java #ps elf | grep java查看机器负载及CPU信息 #top -p 1(进程ID) #top (查看所有进程)获取CPU飙升线程堆栈 1. top -c 找到CPU飙升进程ID&#xff1b; 2. top -Hbp 9702(替换成进程ID) 找到CPU飙升线程ID&#xff1b; 3. $ printf &quo…
阅读更多...
Redis 必备的原理知识要点

Redis 必备的原理知识要点

1、为什么使用缓存&#xff1f; 1、数据库太慢-无法使用 2、高性能 3、高并发 4、热点高频数据 2、redis合适的场景&#xff1f; 1、数据类型 5种&#xff1b; 2、Bitmap&#xff1b; 3、HyperLogLog&#xff1b; 结合自身项目讲解redis的使用&#xff1a; 1、token&a…
阅读更多...
考研数学｜考到110到底有多难？

考研数学｜考到110到底有多难？

考研数学一要考到110分&#xff0c;确实不容易。数学一的难度在于它涉及的知识点多&#xff0c;包括高等数学、线性代数和概率论。这些内容不仅要求你理解深刻&#xff0c;还要能熟练运用。特别是高等数学&#xff0c;它在考试中的分值占比最高&#xff0c;也是最难的部分。 数…
阅读更多...
SAMformer：通过锐度感知最小化和通道注意力解锁变换器在时间序列预测中的潜力

SAMformer：通过锐度感知最小化和通道注意力解锁变换器在时间序列预测中的潜力

目录 摘要1. 引言当前方法的局限性变换器的可训练性我们贡献的总结 2. 提出的方法符号说明2.1 问题设置2.2 激励示例命题2.1&#xff08;最优解的存在性&#xff09; 2.3 变换器的损失景观现有的解决方案 2.4. SAMformer&#xff1a;集成所有方法 3. 实验3.1 主要收获 摘要 基…
阅读更多...
目标检测算法的研究现状

目标检测算法的研究现状

一、引言 目标检测是计算机视觉领域中的一项重要任务&#xff0c;旨在从图像或视频中识别并定位出感兴趣的目标物体。随着深度学习技术的快速发展&#xff0c;目标检测算法取得了显著的进步&#xff0c;并在自动驾驶、智能安防、人脸识别等领域得到了广泛应用。本文将对目标检…
阅读更多...
2024上海初中生古诗文大会倒计时4个月：单选题真题和独家解析

2024上海初中生古诗文大会倒计时4个月：单选题真题和独家解析

现在距离2024年初中生古诗文大会初选还有4个多月时间&#xff08;11月3日正式开赛&#xff09;&#xff0c;我们继续来看10道选择题真题和详细解析&#xff0c;以下题目截取自我独家制作的在线真题集&#xff0c;都是来自于历届真题&#xff0c;去重、合并后&#xff0c;每道题…
阅读更多...
电商价格监测：品牌控价维权的关键利器

电商价格监测：品牌控价维权的关键利器

品牌在进行控价时&#xff0c;所面对的是线上成千上万条的商品链接&#xff0c;如果仅依靠人工&#xff0c;根本无法做到准确且全面地完成电商价格监测工作。因此&#xff0c;一套准确率高的电商价格监测系统对于品牌的控价维权而言&#xff0c;其重要性不言而喻。 在形形色色的…
阅读更多...
UE4_材质_材质节点_视差偏移BumpOffset

UE4_材质_材质节点_视差偏移BumpOffset

一、定义 凹凸贴图偏移&#xff08;BumpOffset&#xff09; 是虚幻引擎4术语&#xff0c;就是通常所谓的"视差贴图"。BumpOffset表达式可以使材质产生深度错觉&#xff0c;而不需要额外的几何体。BumpOffset材质使用灰阶_高度贴图_来提供深度信息。高度贴图中的值越…
阅读更多...
沃创云获客系统如何帮助企业找到意向客户群体

沃创云获客系统如何帮助企业找到意向客户群体

沃创云是一家做外呼系统起家&#xff0c;越来越多客户有打电话的需求。我们突然意识到&#xff0c;大量的数据积累是电销的基础&#xff0c;那么如何找到客户以及联系方式也非常关键 通过爬虫技术&#xff0c;通过帮助企业精准地找到意向客户群体。以下是该系统如何帮助企业实…
阅读更多...
PHP转Go系列 | GET 和 POST 请求的使用姿势

PHP转Go系列 | GET 和 POST 请求的使用姿势

大家好&#xff0c;我是码农先森。 说到 HTTP 请求工具想必对我们做 Web 开发的程序员都不陌生&#xff0c;只要涉及到网络请求都必须使用。对于我们 PHP 程序员来说&#xff0c;最熟悉不过的就是 CURL 扩展&#xff0c;只要安装的这个扩展便可随意发起 HTTP 请求。 但在 PHP …
阅读更多...
Transformer常见面试题

Transformer常见面试题

目录 1.Transformer为何使用多头注意力机制&#xff1f;&#xff08;为什么不使用一个头&#xff09; 2.Transformer为什么Q和K使用不同的权重矩阵生成&#xff0c;为何不能使用同一个值进行自身的点乘&#xff1f; &#xff08;注意和第一个问题的区别&#xff09; 3.Transf…
阅读更多...
React+TS前台项目实战（二十二）-- 全局常用导出组件Export封装

React+TS前台项目实战（二十二）-- 全局常用导出组件Export封装

文章目录 前言Export组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天我们来封装一个带导出图标的导出组件。 Export组件 1. 功能分析 通过传入链接地址&#xff0c;规定要跳转的导出页面&#xff0c;或是直接通过链接导出数据 2. 代码详细注释 // /c…
阅读更多...
产品中心｜高效能双处理器Xilinx FPGA 4通道射频收发板卡

产品中心｜高效能双处理器Xilinx FPGA 4通道射频收发板卡

1、产品概述 基于Xilinx XC7K325T芯片的4通道射频收发板卡&#xff0c;搭载高能效Cortex-A8内核处理器、1组16bit/2GB DDR3及1组4GB DDR3、 1组2GB Nand Flash、1路USB接口、4路高速ADC、4路高速DAC&#xff0c;支持外触发&#xff0c;外时钟。用于FPGA程序加载板卡工作温度范…
阅读更多...
前端开发中实用小技巧

前端开发中实用小技巧

运行javascript小技巧 // 1.直接在浏览器的地址栏中输入一下代码&#xff1a;javascript:alert(hello world) // 2.注意事项ie和chrom回自动去掉开头的 【javascript:】需要手动添加火狐浏览器不支持这个技巧 // 3.场景快速测试一段js代码运行HTML代码的神奇技巧 // 1.直接在…
阅读更多...
TensorFlow安装CPU版本和GPU版本

TensorFlow安装CPU版本和GPU版本

文章目录 前言一、TensorFlow安装CPU版本1.新建虚拟环境2.激活虚拟环境3.下载tensorflow4.验证是否下载成功 二、TensorFlow安装GPU版本1.新建虚拟环境2.激活虚拟环境3.安装tensorflow-gpu4.验证是否下载成功 前言 下载的Anaconda是Anaconda3-2024.02-1-Windows-x86_64版本 一…
阅读更多...
firewalld防火墙转发流量到其他端口forward port rules

firewalld防火墙转发流量到其他端口forward port rules

假设云主机eth0: 47.93.27.106 tun0: inet 10.8.0.1 netmask 255.255.255.0 Show rules for a specific zone (public) sudo firewall-cmd --zonepublic --list-all Add the tun0 interface to the public zone: sudo firewall-cmd --zonepublic --add-interfacetun0 --…
阅读更多...
MTK7621交换芯片配置

MTK7621交换芯片配置

MTK7621上自带的交换芯片为mt7530 admin@OpenWrt:~# /sbin/swconfig list Found: switch0 - mt7530 交换芯片的配置工具为swconfig程序。MTK7621采用内部的MDIO（Management Data Input/Output）接口管理MT7530的switch芯片。 MT7530共有7个物理口，通过/sbin/swconfig dev …
阅读更多...
isupper()方法——判断字符串是否全由大写字母组成

isupper()方法——判断字符串是否全由大写字母组成

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 isupper()方法用于判断字符串中所有的字母是否都是大写。isupper()方法的语法格式如下&#xff1a; str.isupper() 如果字符串中包含至少…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023