Web前端-HTML

黑马程序员JavaWeb开发教程

一、初识web前端

1、 标准也称为网页标准，由一系列的标准组成，大部分由W3C负责指定
2、 三个部分组成

  • HTML：负责网页的结构（页面元素和内容）
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
  • JavaScript：负责网页的行为（交互效果）

二、什么是HTML、CSS

1、HTML：超文本标记语言

  • 超文本：超越了不同文本，比普通文本更加强大。除了文字信息，还可以定义图片、音频、视频等内容
  • 标记语言：由标签构成的语言
    （1）HTML标签都是预定义好的，例如使用<a>展示超链接，使用<img>展示图片，<video>展示视频
    （2）HTML代码直接在浏览器运行，HTML标签由浏览器解析
    2、CSS：层叠样式表，用于控制页面的样式（表现）

三、HTML快速入门

  1. 新建文本文件，后缀名为.html
  2. 编写HTML结构标签
  3. 在中填写内容
  • hello.html 中的内容
<html><head><title>HTML快速入门</title></head><body><h1>hello HTML</h1><img src="1.png"></body>
</html>
  • 结果
    在这里插入图片描述
  1. 特点
  • HTML标签不区分大小写，但是一般都使用小写
  • HTML标签属性值单引号和双引号都可以，即上方代码中使用 src=“1.png” 或者 src=‘1.png’ 都是可以生效的
  • HTML语法松散

四、基础标签&样式

1、新浪新闻标题

（1） 标题排版

在这里插入图片描述

  1. 图片标签<img>
  • src：指定图像的 url （绝对路径/相对路径）
路径书写方式绝对路径1、绝对磁盘路径：<img src="E:\VSCode\workspace\HTML\img\news_logo.png"/>2、绝对网络路径：这个要保证图片一定在网络上 相对路径（推荐使用）./：当前路径，可以省略  <img src="img\news_logo.png"/>../:上一级目录，不可以省略 <img src="../HTML/img/news_logo.png"/>
  • width：图像的宽度（像素/相对于父元素的百分比）
  • height：图像的高度（像素/相对于父元素的百分比）
  1. 标题标签
  • <h1>...</h1> （h1到h6重要程度依次降低）
  • 注意HTML标签都是预定义好的，不能自己随便定义
  1. 水平线标签
  • <hr>

代码：

<!-- 文档类型为html -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 指定标题 --><title>焦点访谈：新闻标题</title>
</head>
<body><!-- img 标签src：图片资源路径width：宽度（px,像素；%，相对于父元素的百分比）height：高（px,像素；%，相对于父元素的百分比）路径书写方式绝对路径1、绝对磁盘路径：<img src="E:\VSCode\workspace\HTML\img\news_logo.png"/>2、绝对网络路径：这个要保证图片一定在网络上 相对路径（推荐使用）./：当前路径，可以省略  <img src="img\news_logo.png"/>../:上一级目录，不可以省略 <img src="../HTML/img/news_logo.png"/>--><img src="img\news_logo.png" /> 新浪政务 > 正文<h1>焦点访谈：新闻标题</h1><hr>2023年03月02日 21:50 央视网<hr>
</body>
</html>

（2）标题样式

1、CSS引入方式

  • 行内样式：写在标签的style属性中（不推荐）

    在这里插入图片描述

  • 内嵌样式：写在style标签中（可以写在页面任何位置，但是通常约定写在head标签中）

    在这里插入图片描述

  • 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

    在这里插入图片描述

    • 首先创建一个文件夹css，在文件夹中创建 style.css 文件，其中的代码为
      • h1{ color: blueviolet; }
    • 之后在html页面中使用link标签引入，一般写在head中
      • <link rel="stylesheet" href="./css/style.css">
2、颜色的表示方法

在这里插入图片描述

3、CSS选择器：用来选取需要设置样式的元素

  1. 元素选择器

    在这里插入图片描述

  2. id选择器

    在这里插入图片描述

  3. 类选择器

    在这里插入图片描述
    优先级： id选择器>类选择器>元素选择器

4、span标签
  • span标签是一个在开发网页时会大量使用到的没有语义的布局标签
  • 特点：一行可以显示多个（组合内元素），宽度和高度默认有内容撑开
5、CSS属性
  • color：设置文本的颜色
  • font-size：设置字体大大小（注意要加px）

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：新闻标题</title><style>h1{color:rgb(77,79,83);}/* 元素选择器span{color: grey;} *//* 类选择器.cls{color: grey;} *//* id选择器 */#time{color: grey;font-size: 13px; /*设置字体的大小*/   }</style>
</head>
<body><img src="img\news_logo.png" /> 新浪政务 > 正文<h1>焦点访谈：新闻标题</h1><hr><!-- span 标签是没有任何语义的，用来组合行内元素的 --><!-- <span class="cls">2023年03月02日 21:50</span> <span>央视网</span>  --><span id="time">2023年03月02日 21:50</span> <span>央视网</span><hr>
</body>
</html>

（3）超链接

  1. 超链接
  • 标签<a>
  • 属性
    • href：指定资源访问的url
    • target：指定在何处打开资源链接
      • _self：默认值
      • _blank：在空白页打开
  1. CSS属性
  • text-decoration：规定添加到文本的修饰，none表示定义标准的文本
  • color：定义文本的颜色

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：新闻标题</title><style>h1{color:rgb(77,79,83);}/* id选择器 */#time{color: grey;font-size: 13px; /*设置字体的大小*/   }/* 将超链接的字体仍然展示为黑色，并且去除默认的下划线 */a{color: black;text-decoration: none; /*设置文本为一个标准的文本*/}</style>
</head>
<body><img src="img\news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>焦点访谈：新闻标题</h1><hr><span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span><hr>
</body>
</html>

2、新浪新闻正文

（1）排版

  1. 音频视频标签

  • 音频标签<audio>

    在这里插入图片描述

  • 视频标签<video>

    在这里插入图片描述

  1. 换行、段落标签
  • 换行标签<br>
  • 段落标签<p>
  1. 文本加粗标签
  • 文本加粗标签 <strong> <b>
  1. CSS样式
  • line-height：设置行高
  • text-indent：定义首行缩进
  • text-align：规定元素中的文本水平对齐方式
  1. 注意
  • 在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符&nbsp;

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：新闻标题</title><style>h1{color:rgb(77,79,83);}/* id选择器 */#time{color: grey;font-size: 13px; /*设置字体的大小*/   }/* 将超链接的字体仍然展示为黑色，并且去除默认的下划线 */a{color: black;text-decoration: none; /*设置文本为一个标准的文本*/}/* 通过元素选择器p 为所有的段落都加上首行缩进的样式 */p{text-indent: 35px;/* 首行缩进*/line-height: 30px;/* 设置行高*/}/* 使用id选择器将责任编辑右对齐 */#plast{text-align: right; /* 对齐方式为右对齐*/}</style>
</head>
<body><img src="img\news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>焦点访谈：新闻标题</h1><hr><span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="750px"></video><!-- 音频 --><audio src="audio/1.mp3" controls></audio>    <!-- 文字 --><p><strong>央视网消息 </strong>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p><p>人勤春来早，春耕农事忙。立春之后，由南到北 </p><img src="img/1.jpg" width="750px"><p id="plast">责任编辑：XXX</p></body>
</html>

（2）布局

1、盒子

  1. 盒子：页面中所有的元素（标签），都可以看做是一个盒子，有盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

  2. 盒子模型的组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

    在这里插入图片描述

  3. 布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签

  4. 标签：<div><span>

  5. 特点

  • div 标签
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
  • span 标签
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）
2、CSS属性
  • width：设置宽度
  • height：设置高度
  • border：设置边框的属性
  • padding：内边距
  • margin：外边距
  • 如果只需要设置某一个方位的边框、内边距，可以在属性名后加上 -位置，如：padding-top

最终代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈：新闻标题</title><style>h1{color:rgb(77,79,83);}/* id选择器 */#time{color: grey;font-size: 13px; /*设置字体的大小*/   }/* 将超链接的字体仍然展示为黑色，并且去除默认的下划线 */a{color: black;text-decoration: none; /*设置文本为一个标准的文本*/}/* 通过元素选择器p 为所有的段落都加上首行缩进的样式 */p{text-indent: 35px;/* 首行缩进*/line-height: 30px;/* 设置行高*/}/* 使用id选择器将责任编辑右对齐 */#plast{text-align: right; /* 对齐方式为右对齐*/}#center{width: 65%;/* margin: 0 17.5% 0 17.5%;上右下左 */margin: 0 auto;}</style>
</head>
<body><div id="center"><img src="img\news_logo.png" /> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<h1>焦点访谈：新闻标题</h1><hr><span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="850px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio>     --><!-- 文字 --><p><strong>央视网消息 </strong>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p><p>人勤春来早，春耕农事忙。立春之后，由南到北 </p><img src="img/1.jpg" width="850px"><p id="plast">责任编辑：XXX</p></div>
</body>
</html>

五、表格、表单标签

1、表格标签

  1. 场景
  • 在网页中以表格形式整齐展示数据

  1. 标签

    在这里插入图片描述

表格练习

<!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 border="1px" width="900px" cellspacing="0px"><tr><th>标签</th><th>描述</th><th>属性/备注</th></tr><tr><td> table </td><td>定义表格整体</td><td>border:规定表格边框的高度<br>width：规定表格的宽度<br>cellspacing：规定单元之间的空间</td></tr><tr><td> tr </td><td>定义表格的行</td><td></td></tr><tr><td>td</td><td>定义表格的单元格</td><td>如果是表头可以替换成th</td></tr></table>
</body>
</html>

结果

在这里插入图片描述

2、表单标签

  1. 场景
  • 在网页中主要负责数据采集功能，如 注册、登录等数据采集
  1. 标签
  • <form>
  1. 表单项：不同类型的input元素、下拉列表、文本域等
  • <input>：定义表单项，通过type属性控制输入形式
  • <select>：定义下拉列表
  • <textarea>：定义文本域
    4.属性
  • <action>：规定当提交表单时向何处发送表单数据，URL
  • <method>：规定用于发送表单数据的方式，GET、POST
    • get：在url后面拼接表单数据，比如：?username=123&age=12 url 长度有限制，默认值
    • post：在消息体（请求体）中传递的，参数大小无限制

注意：表单项必须有name属性才可以提交

表单实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- from表单属性： action：表单提交的url，往何处提交数据，如果不指定，则默认提交到当前页面method：表单提交当时get：在url后面拼接表单数据，比如：?username=123&age=12 url 长度有限制，默认值post：在消息体（请求体）中传递的，参数大小无限制--><form action="" method="post">用户名<input type="text" name="username">年龄<input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>

结果

在这里插入图片描述

3、表单项标签

（1）表单项

  1. <input>：表单项，通过type属性控制输入形式

    在这里插入图片描述

  2. <select>：定义下拉列表，<option>定义列表项

  3. <textarea>：文本域

表单项实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="" method="get">姓名：<input type="text" name="username"/><br><br>密码：<input type="text" name="password"><br><br>性别：<label><input type="radio" name="sex" value="1">男</label> <!-- 定义单选按钮--><label><input type="radio" name="sex" value="2">女</label><br><br>爱好：<label><input type="checkbox" name="hobby" value="1">java</label><!--定义复选框--><label><input type="checkbox" name="hobby" value="2">game</label><label><input type="checkbox" name="hobby" value="3">job</label><br><br>图像：<input type="file" name="img"> <br><br><!--定义文件上传按钮-->生日：<input type="date" name="birthday"><br><br>时间：<input type="time" name="time"><br><br>日期时间：<input type="datetime-local" name="datetime"><br><br>邮箱：<input type="email" name="email"><br><br>年龄：<input type="number" name="age"><br><br>学历：<select name="degree" ><option value="">----请选择----</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select><br><br>描述：<textarea name="description"  cols="30" rows="10"></textarea><br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="按钮"></form>
</body>
</html>

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

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

相关文章

STL--pair 数对

STL--pair 数对

pair 数对&#x1f357; pair是一个模板类,使用时需要引用文件 #include <utility>//通用工具pair可将两个value处理为一个元素。C标准库内多处用到了这个结构。尤其容器 map、unordered_map和unordered_multimap就是使用pair来管理其内部元素(key_value),任何函数如果…
阅读更多...
ppt技巧：如何将Word文档大纲中导入到幻灯片中？

ppt技巧：如何将Word文档大纲中导入到幻灯片中？

在PowerPoint中&#xff0c;将Word文档的大纲导入到新的幻灯片是一种非常实用的技巧。以下是详细的步骤&#xff1a; 首先&#xff0c;需要打开PowerPoint软件并打开原始的幻灯片文件。 在PowerPoint的顶部【开始】菜单栏中&#xff0c;找到并点击“新建幻灯片”按钮&#xff0…
阅读更多...
【力扣】142. 环形链表 II

【力扣】142. 环形链表 II

142. 环形链表 II 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&am…
阅读更多...
微信小程序全屏开屏广告

微信小程序全屏开屏广告

效果图 代码 <template><view><!-- 自定义头部 --><u-navbar title" " :bgColor"bgColor"><view class"u-nav-slot" slot"left"><view class"leftCon"><view class"countDown…
阅读更多...
u盘为什么一插上电脑就蓝屏,u盘一插电脑就蓝屏

u盘为什么一插上电脑就蓝屏,u盘一插电脑就蓝屏

u盘之前还好好的&#xff0c;可以传输文件&#xff0c;使用正常&#xff0c;但是最近使用时却出现问题了。只要将u盘一插入电脑&#xff0c;电脑就显示蓝屏。u盘为什么一插上电脑就蓝屏呢?一般&#xff0c;导致的原因有以下几种。一&#xff0c;主板的SATA或IDE控制器驱动损坏…
阅读更多...
C语言处理文本模板：格式信函编程

C语言处理文本模板：格式信函编程

开篇 本篇文章的问题来源为《编程珠玑》第3章其中一个问题&#xff0c;格式信函编程。说白了就是先在文件中定义一个文本模版&#xff0c;然后使用数据库中的数据去填充这个模版&#xff0c;最后得到填充后的文本&#xff0c;并输出。 问题概要 在常去的网店键入你的名字和密码…
阅读更多...
Harmony鸿蒙南向驱动开发-SPI接口使用

Harmony鸿蒙南向驱动开发-SPI接口使用

功能简介 SPI指串行外设接口&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线。SPI是由Motorola公司开发&#xff0c;用于在主设备和从设备之间进行通信。 SPI接口定义了操作SPI设备的通用方法集合…
阅读更多...
算法练习第16天|101. 对称二叉树

算法练习第16天|101. 对称二叉树

101. 对称二叉树 力扣链接https://leetcode.cn/problems/symmetric-tree/description/ 题目描述&#xff1a; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#x…
阅读更多...
品牌百度百科词条创建多少钱？

品牌百度百科词条创建多少钱？

百度百科作为国内最具权威和影响力的知识型平台&#xff0c;吸引了无数品牌和企业争相入驻。一个品牌的百度百科词条&#xff0c;不仅是对品牌形象的一种提升&#xff0c;更是增加品牌曝光度、提高品牌知名度的重要途径。品牌百度百科词条创建多少钱&#xff0c;这成为了许多企…
阅读更多...
玻璃生产线 Web 组态应用案例介绍

玻璃生产线 Web 组态应用案例介绍

玻璃生产线组态可视化 概述 随着工厂信息化、数字化发展&#xff0c;智慧生产车间成为必然发展趋势&#xff0c;通过智能硬件、物联网、大数据等智慧化技术与手段&#xff0c;提高车间生产设备、工艺设备的智能执行能力&#xff0c;从而提升整个车间乃至工厂的智能化、网络化与…
阅读更多...
【SpringBoot XSS存储漏洞 拦截器】Java纯后端对于前台输入值的拦截校验实现 一个类加一个注解结束

【SpringBoot XSS存储漏洞 拦截器】Java纯后端对于前台输入值的拦截校验实现 一个类加一个注解结束

先看效果&#xff1a; 1.js注入拦截&#xff1a; 2.sql注入拦截 生效只需要两步&#xff1a; 1.创建Filter类&#xff0c;粘贴如下代码&#xff1a; package cn.你的包命.filter; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.IO…
阅读更多...
macos 查看 远程服务器是否开放某个端口

macos 查看 远程服务器是否开放某个端口

想要使用mac查看远程服务器某个端口是否开发&#xff0c;可通过 nc 命令&#xff0c;如下&#xff1a; nc -zv <服务器IP> <端口号>如果该端口开发&#xff0c;结果为&#xff1a;succeeded! Connection to <服务器IP> port <端口号> [类型] succeed…
阅读更多...
CLion 2024：为Mac与Win打造的卓越跨平台集成开发环境

CLion 2024：为Mac与Win打造的卓越跨平台集成开发环境

CLion 2024作为一款跨平台IDE&#xff0c;CLion 2024不仅完美支持Mac和Windows两大操作系统&#xff0c;更在细节之处展现了其出色的跨平台兼容性。无论你是在Mac的优雅界面下工作&#xff0c;还是在Windows的实用环境中编程&#xff0c;CLion 2024都能为你提供一致且流畅的开发…
阅读更多...
Day98：云上攻防-云原生篇K8s安全Config泄漏Etcd存储Dashboard鉴权Proxy暴露

Day98：云上攻防-云原生篇K8s安全Config泄漏Etcd存储Dashboard鉴权Proxy暴露

目录 云原生-K8s安全-etcd(Master-数据库)未授权访问 etcdV2版本利用 etcdV3版本利用 云原生-K8s安全-Dashboard(Master-web面板)未授权访问 云原生-K8s安全-Configfile鉴权文件泄漏 云原生-K8s安全-Kubectl Proxy不安全配置 知识点&#xff1a; 1、云原生-K8s安全-etcd未…
阅读更多...
Springboot实现链路追踪功能

Springboot实现链路追踪功能

前言 在日常开发中&#xff0c;一个业务的实现往往会调用很多个方法&#xff0c;当我们去看日志的时候&#xff0c;各种接口的日志打印出来&#xff0c;看着就头疼&#xff0c;压根没办法去定位&#xff0c;而链路追踪就能很好的帮助我们去查看接口从头至尾依次调用了哪些方法…
阅读更多...
MacOS13搭建安卓逆向环境

MacOS13搭建安卓逆向环境

MacOS中用apktool解包 这里是所有链接&#xff1a;123云盘下载 https://www.123pan.com/s/9QRqVv-JE7Y.html安装apktool https://apktool.org/docs/install/ 或者下载单独的jar包 brew install wgethttps://apktool.org/blog/apktool-2.9.3下载直链&#xff1a;https://co…
阅读更多...
使用Python批量将PDF转Word

使用Python批量将PDF转Word

简述 以下全部代码无法完美对图片、表格等非文字形式的内容转化。要较好的效果需要使用光学字符分析等方法进行转化 我懒&#xff0c;不想将代码模块拆分出来写注释 除代码1中有详细注释外&#xff0c;剩下的代码仅在关键部分进行注释 代码1&#xff1a;小规模文件的转换 代码…
阅读更多...
TikTok如何矩阵养号？TK防关联引流系统助力TK账号安全运营

TikTok如何矩阵养号？TK防关联引流系统助力TK账号安全运营

TK是 TikTok旗下的短视频社交媒体&#xff0c;平台目前是全球最火的短视频平台&#xff0c;目前全球活跃用户已经超过8亿。其中 TikTok的用户已经达到8亿。TK这款短视频社交媒体平台在海外的发展潜力非常大&#xff0c;也是国内很多人的创业目标&#xff0c;很多人都想从 TK这个…
阅读更多...
文件上传阿里云OSS准备工作及入门程序（保姆级手把手教你）

文件上传阿里云OSS准备工作及入门程序（保姆级手把手教你）

使用阿里云作为第三方&#xff0c;来存储文件。 登录阿里云官网&#xff0c;开通对象存储OSS 这样就开通成功了。点击 管理控制台 &#xff0c;出现下面页面。 不过我们也可以不充值购买&#xff0c;先叉掉&#xff0c;它有30天试用的。 创建Bucket 点这个创建Bucket。 创建存…
阅读更多...
[论文笔记] Pai-megatron Qwen1.5-14B-CT 后预训练 踩坑记录

[论文笔记] Pai-megatron Qwen1.5-14B-CT 后预训练 踩坑记录

1. 模型权重转换报错 hf2mcore_1.5_v2.py 报错为： /mnt/cpfs/kexin/dlc_code/qwen1.5/PAI-Megatron-Patch/toolkits/model_checkpoints_convertor/qwen/hf2mcore_1.5_v2.py 正确文件替换如下，更改了477行，删除了 args.hidden_size 这个维度，在tp>1时也支持转换： eli…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023